ansaurus

Question

Can Internet Explorer bind events to absolute positioned elements ?

Answer 1

A:

I don't know if this is necessarily your problem or not, but have you tried changing your "type" attribute to "text/javascript" instead of "application/javascript"? Again, this may have 0 effect. But then again, IE is quirky.

Jason 2010-05-11 02:40:25

good point by the problem persists

marcos 2010-05-11 12:34:17

Answer 2

A:

Two issues: 1) As someone else pointed out, IE is ignoring the script without the type set to "text/javascript" 2) When the element is absolute positioned, the click events only fire if the mouse is over "content" in the abs div. In this case, the text content like the G letter. You can set a background-color to allow clicks anywhere in the div. Alternatively, you can set a very large font-size and just put a   in the element with overflow:hidden to allow it to be transparent, but still process clicks on the whole element.

Here is a modified version of your example:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 
<script type="text/javascript"> 
$(document).ready(function(){ 
   $("#id3").click(function(){ 
        alert( $(this).html() ); 
        }); 

   //$("#id3").trigger("click"); 
}); 
</script> 
</head> 
<body> 
<div id="id1" style="position:relative;"> 
<img id="id2" src="http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png" style=";z-index:-1;"/> 
<div id="id3" class="classHolder" style="position:absolute;font-size:9000px;overflow:hidden;background-color:transparent;border:2px solid red;left:0px;top:0px;width:70px;height:70px;z-index:1002;">&nbsp;</div> 
<div id="id4" class="classHolder" style="position:absolute;border:2px solid red;left:210px;top:0px;width:25px;height:70px;z-index:1001;">&nbsp;</div> 
asd asdf asdfg 
</div> 
</body> 
</html>

David 2010-05-11 02:56:03

Well said, and I quote:"2) When the element is absolute positioned, the click events only fire if the mouse is over "content" in the abs div."Thanks

marcos 2010-05-11 12:54:59

Answer 3

A:

SOLUTION: added

"background-color:#FFFFFF;"

to the element style. and used the wacky function:


function setOpacity(obj,value){
  obj.style.opacity=value/10;
  obj.style.filter='alpha(opacity='+value*10+')';
}

and finally, when binding the evento to the element:


   $("div.classHolder").each(function(){
      $(this).bind("click",function(e){ alert($(this).html()); }); 
      setOpacity(this,0);
   });

marcos 2010-05-11 12:39:37

ansaurus

tags:

views:

answers:

Can Internet Explorer bind events to absolute positioned elements ?

related questions