Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

layer with div's doesn't show on IE9

By: ruben056 on Sep 25th, 2012  |  syntax: JavaScript  |  size: 3.42 KB  |  hits: 49  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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