Jump to content

jumping


djp1988
 Share

Recommended Posts

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...