M123
05-22-2009, 06:21 PM
Hi, I am trying to create a fade effect using javascript similar to the one explained at http://www.ilikespam.com/blog/javascript-fade-effects
The problem is, in IE, haslayout needs to be true for the element that needs to be faded. I've tried a few things that should set it to true but not change anything else (zoom: 1;, etc) but whenever it is set to true, some of my fonts and images get distorted. It looks fine in Firefox but not IE 8.
I have supplied some code below, if you check it in IE you should see that the text and image looks different then it does when it is in Firefox. If you remove the "zoom: 1;", it will look fine, but the fading will no longer work.
Does anybody have any insight into what could be the cause of this problem?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="fader" style="zoom: 1;">
<div id="image1"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
<p><h1><b><i>Hello WORLD!</i></b></h1></p>
</div>
<div id="image2"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/489px-Wikipedia-logo-en-big.png" /></div>
</div>
<script type="text/javascript">
var comments = new Array(document.getElementById('image1').innerHTML, document.getElementById('image2').innerHTML);
var current = 0;
var element = document.getElementById('fader');
function setOpacity(level) {
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
/* rotate and create timers to fade the testimonial in */
function fadeIn(){
element.innerHTML = comments[current];
current = (current + 1) % comments.length;
for (i = 0; i <= 1; i = i + 0.05) {
setTimeout("setOpacity(" + i + ")", i * 1000);
}
setTimeout("fadeOut()", 9000);
}
/* create timers to fade the testimonial away */
function fadeOut() {
for (i = 0; i <= 1; i = i + 0.05) {
setTimeout("setOpacity(" + (1 - i) + ")", i * 1000);
}
setTimeout("fadeIn()", 1000);
}
fadeIn();
</script>
</body>
</html>
The problem is, in IE, haslayout needs to be true for the element that needs to be faded. I've tried a few things that should set it to true but not change anything else (zoom: 1;, etc) but whenever it is set to true, some of my fonts and images get distorted. It looks fine in Firefox but not IE 8.
I have supplied some code below, if you check it in IE you should see that the text and image looks different then it does when it is in Firefox. If you remove the "zoom: 1;", it will look fine, but the fading will no longer work.
Does anybody have any insight into what could be the cause of this problem?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div id="fader" style="zoom: 1;">
<div id="image1"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
<p><h1><b><i>Hello WORLD!</i></b></h1></p>
</div>
<div id="image2"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/489px-Wikipedia-logo-en-big.png" /></div>
</div>
<script type="text/javascript">
var comments = new Array(document.getElementById('image1').innerHTML, document.getElementById('image2').innerHTML);
var current = 0;
var element = document.getElementById('fader');
function setOpacity(level) {
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
/* rotate and create timers to fade the testimonial in */
function fadeIn(){
element.innerHTML = comments[current];
current = (current + 1) % comments.length;
for (i = 0; i <= 1; i = i + 0.05) {
setTimeout("setOpacity(" + i + ")", i * 1000);
}
setTimeout("fadeOut()", 9000);
}
/* create timers to fade the testimonial away */
function fadeOut() {
for (i = 0; i <= 1; i = i + 0.05) {
setTimeout("setOpacity(" + (1 - i) + ")", i * 1000);
}
setTimeout("fadeIn()", 1000);
}
fadeIn();
</script>
</body>
</html>