Hi, I have a problem with a Lightbox type modal window not working properly with IE. I have identified the problem as being due to the style attribute of the hidden image as 'display: none'. This works fine in all other browsers. But for IE, I need to change the value onload to 'display: block' and then straight back to 'display: none' which will fix the problem.
Could anyone tell me how I can do this? I need to apply this rule to multiple divs of class 'image'.
are you using any frameworks at all? I ask because this can change the location that you put the following code.
I'm not positive if this works in IE but it may:
<img ... onload="this.style.display='block';this.style.display='none';">
Failing that put it in your body/document onLoad function (if you don't have one create one).
function docOnLoad()
{
...
document.getElementById('img_in_question').style.display = 'block';
document.getElementById('img_in_question').style.display = 'none';
...
}
Edit: fixing my horribad spelling.
In your css
.image{ display:none; }
in your html
...
<body onload="switch" >
...
<script type="text/javascript">
function switch(){
var divs = document.getElementsByClassName("image"); // not supported by all browsers but you can easily find implementations on the web
for(var index=0;index<divs.length;index++)
{
divs[index].style.display='block';
}
}
</script>
</body>
jquery version:
$(document).ready(function(){
$(".image").show();
});