SHARE
TWEET

layer with div's doesn't show on IE9

ruben056 Sep 25th, 2012 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. -- part of html page:
  2.                 <div id="mainbackground">
  3.                         <img src="images/home/background.png" id="mainbackgroundimage"/>
  4.                        
  5.                        
  6.                                 <!-- 6 divs for hover/clickable areas -->
  7.                                 <div id="infojarne">
  8.                                         <img src="images/home/infojarne.gif" id="inforjaneImg">
  9.                                 </div>
  10.                                 <div id="paintings">
  11.                                         <img src="images/home/paintings.gif" id="paintingsImg">
  12.                                 </div>
  13.                                 <div id="etc">
  14.                                         <img src="images/home/etc.gif" id="etcImg">
  15.                                 </div>
  16.                                 <div id="projects">
  17.                                         <img src="images/home/projects.gif" id="projectsImg">
  18.                                 </div>
  19.                                 <div id="digitalart">
  20.                                         <img src="images/home/digitalart.gif" id="digitalartImg">
  21.                                 </div>
  22.                                 <div id="drawings">
  23.                                         <img src="images/home/drawings.gif" id="drawingsImg">
  24.                                 </div>
  25.                                
  26.                 </div> 
  27.  
  28. --Javascript file to set positioning:
  29.  
  30. // because ie does not support console if not in debug...
  31. if (!window.console) console = {log: function() {},info: function(){}};
  32.  
  33. $("document").ready(function(){
  34.  
  35.         function ImageDimensions (width, height, x, y, id){
  36.                 this.width = width;
  37.                 this.height = height;
  38.                 this.x = x;
  39.                 this.y = y;
  40.                
  41.                 if(id){
  42.                         var $div = $(id);
  43.                         $div.css("z-index", "1");
  44.                         if(id == "#etc"){
  45.                                 $div.css("right", "0px");
  46.                                 $div.css("bottom", "0px");     
  47.                         }else{
  48.                                 $div.css("left", this.x +"px");
  49.                                 $div.css("top", this.y +"px");
  50.                         }
  51.                        
  52.                         $div.css("width", this.width +"px");
  53.                         $div.css("height", this.height +"px");
  54.                         $div.hover(
  55.                                 function(event){
  56.                                         $div.find("img").show();
  57.                                 },
  58.                                 function(event){
  59.                                         $div.find("img").hide();
  60.                                 }
  61.                         );
  62.                         $div.click(function(){
  63.                                 var location;
  64.                                 if($div.attr("id") == "infojarne"){
  65.                                         $(window.location).attr('href', 'infojarne.html');
  66.                                 }if($div.attr("id") == "digitalart"){
  67.                                         $(window.location).attr('href', 'digitalart.html');
  68.                                 }else{
  69.                                         console.info("unknown id : " + id);
  70.                                 }
  71.                         });
  72.                         var $imgObj = $(id+ " img");
  73.                         $imgObj.hide();
  74.                 }
  75.         };
  76.        
  77.         var background = new ImageDimensions(836, 638);
  78.         // TODO on resize recalc this + reposition
  79.         var windowWidth = $(window).width();
  80.         console.info("windowWidth:" + windowWidth);
  81.         var leftMargin = (windowWidth - background.width) /2;
  82.         console.info("left margin:" + leftMargin);
  83.        
  84.         $("#mainbackground").css("left",leftMargin+"px");
  85.         $("#mainbackground").css("z-index","0");
  86.  
  87.        
  88.         var infojarne = new ImageDimensions(413, 200, 149, 0, "#infojarne");
  89.         var drawings = new ImageDimensions(272, 138, 0 ,200, "#drawings");
  90.         var digital = new ImageDimensions(276, 172, 0, 338, "#digitalart");
  91.         var projects = new ImageDimensions(311, 128 ,276, 509, "#projects");
  92.         var etc = new ImageDimensions(249, 299, 587, 340, "#etc");
  93.         var paintings = new ImageDimensions(290, 138, 546, 200, "#paintings");
  94.        
  95. });
  96.  
  97.  
  98. DESCRIPTION OF CODE (WHAT AM I TRYING TO ACHIVE):
  99. *. set the encapsulating div "mainbackground" in the center of the screen.(position relative) + set the width and height of the div. This equals the dimensions of the background image "#mainbackgroundimage"
  100.  
  101. *. the containing divs should react on hovers, and show the image that they hide when the div is hovered.
  102. Therefore i have set the divs width and height and position so the hover can happen, and hidden the image contained in that div.
  103.  
  104. PROBLEM:
  105. For some reason this does not work on IE9. It works however on FireFox and Chrome.
  106. I have tried some stuff with the z-index but at no avail ...
  107. Can anybody shed some light on this issue
RAW Paste Data
Want to get better at JavaScript?
Learn to code JavaScript in 2017
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top