djp1988 Posted July 5, 2008 Share Posted July 5, 2008 I have this script what changes the opactity of a div from 1 to 0, 0 to 1 when someone clicks the link:http://code.herpfrance.com/fade/jsfade.htmlBut the first time you click it, the action done is a fade in, but the div is already visible so it looks like it jumps, after that it works fine, but I tried setting a variable to set the opacity to 100 on page load, just so that the opacity has been defined but still it jumps Link to comment Share on other sites More sharing options...
boen_robot Posted July 5, 2008 Share Posted July 5, 2008 I see no effect on the page in IE7. The error console of IE shows an error saying "object required". At a first glance, this is the line var object = document.getElementById(mydiv).style; You need to place quotes in the ID, i.e. var object = document.getElementById("mydiv").style; Link to comment Share on other sites More sharing options...
djp1988 Posted July 5, 2008 Author Share Posted July 5, 2008 Does it work now in Internet Explorer? Link to comment Share on other sites More sharing options...
boen_robot Posted July 5, 2008 Share Posted July 5, 2008 Does it work now in Internet Explorer?Yep. Like a charm . And I see nothing I'd call "jumping". Link to comment Share on other sites More sharing options...
djp1988 Posted July 5, 2008 Author Share Posted July 5, 2008 Yes great, I needed to set a fixed height and width for the div I was playing with, I fixed the flickering by adding an onload function:But I prefer just to set a variable to define it, I am sure if it's not working, it's becausethe opacity is starting off not defined, so my if statment checking to see if it's 0 opacity isn't wrking because the opacity is not defined, I added a 0 to 100 oacity in 1 millisecond onload for the body, I'll remove this and you will see the problem, here is the improvised onload version of the working script, and on the following link, see the glitch when you first press the link to fade: http://code.herpfrance.com/fade/jsfade.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"><html> <head> <title></title><script type="text/javascript">function opacity(id, opacStart, opacEnd, millisec) { var speed = Math.round(millisec / 100); var timer = 0; if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { var a = "changeOpac(" + i + ",'" + id + "')"; var c = (timer * speed); setTimeout(a, c); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { var a = "changeOpac(" + i + ",'" + id + "')"; var c = (timer * speed); setTimeout(a, c); timer++; } }}function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")";} function shiftOpacity(id, millisec) { if(document.getElementById(id).style.opacity == 0) { opacity(id, 0, 100, millisec); linktxt.innerHTML = "Hide"; } else { opacity(id, 100, 0, millisec); linktxt.innerHTML = "Show"; }} </script> </head> <body onload="shiftOpacity('mydiv', 1)"><div id="mydiv" style="height:450;width:520;"><img src="image.jpg" alt="Mont Tauch" width="500" height="375" /><br /><p>Mont Tauch, southern France </p></div><br /><a href="java script:shiftOpacity('mydiv', 300)" id="linktxt">Hide</a> </body></html> Link to comment Share on other sites More sharing options...
shadowayex Posted July 5, 2008 Share Posted July 5, 2008 I'm using Firefox, and everything looks fine to me. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.