I'm using a javascript "slide" function to move a <div> layer in 10 pixel increments from one location on a page to another. The layer contains a GIF image. It's basically a side panel that flies out when you click a button. The button is an invisible GIF with an anchor that calls slide() onClick.
The animation works fine in IE but in Firefox I'm getting a series of afterimages as the function moves the layer to the goal. The image is painted in the new position each time but the previous position is also shown and doesn't disappear right away. The movement looks jumpy. It also runs very slowly compared to IE.
Has anyone had this problem and is there a workaround for fix for this?
The animation works fine in IE but in Firefox I'm getting a series of afterimages as the function moves the layer to the goal. The image is painted in the new position each time but the previous position is also shown and doesn't disappear right away. The movement looks jumpy. It also runs very slowly compared to IE.
Has anyone had this problem and is there a workaround for fix for this?
Code:
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>cn_shell</title>
<script language="JavaScript" type="text/JavaScript">
<!-- These are vars used in the Slide function-->
var layername, xgoal, xhop, delay=5;
<!-- This function handles browser syntax differences-->
function makeName(layerID) {
if (navigator.appName=="Mozilla")
{ refname = eval("document." + layerID) }
else
{ refname = eval("document.all." + layerID + ".style") }
return refname
}
<!--The slide function moves the object-->
function slide() {
if ((parseInt(layername.left) != xgoal))
{ layername.left = parseInt(layername.left) + xhop;
window.setTimeout("slide()", delay) }
}
</script>
</head>
<body>
<!--button layer needs to be above tab layers **************************************************************** -->
<div id="buttons" style="position:absolute; width:60px; height:488px; z-index:30; left: 340px; top: 82px;">
<div id="bTab1Out" style="position:absolute; width:16px; height:100px; z-index:31; left: 3px; top: 7px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab1');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="100" border="0" ></a> </div>
<div id="bTab2Out" style="position:absolute; width:16px; height:60px; z-index:31; left: 3px; top: 127px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab2');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="60" border="0" ></a> </div>
<div id="bTab3Out" style="position:absolute; width:16px; height:50px; z-index:31; left: 3px; top: 211px; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px;"> <a href="#" OnClick="layername=makeName('tab3');xhop=-10; xgoal=410; slide()"> <img src= "emptyButton.gif" width="16" height="50" border="0" ></a> </div>
<div id="bTab1In" style="position:absolute; width:16px; height:100px; z-index:31; left: 33px; top: 7px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab1');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="100" border="0" ></a> </div>
<div id="bTab2In" style="position:absolute; width:16px; height:60px; z-index:31; left: 33px; top: 127px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab2');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="60" border="0" ></a> </div>
<div id="bTab3In" style="position:absolute; width:16px; height:50px; z-index:31; left: 33px; top: 211px; background-color: #FFCC99; layer-background-color: #FFCC99; border: 1px;"> <a href="#" OnClick="layername=makeName('tab3');xhop=10; xgoal=780; slide()"> <img src= "emptyButton.gif" width="16" height="50" border="0" ></a> </div>
</div>
<!--TAB 1 START **************************************************************** -->
<div id="tab1" style="position:absolute; width:390px; height:488px; z-index:25; left: 780px; top: 82px;"> <img src= "minfo-tab-in.gif" width="390" height="488" name="minfo-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is more information</div>
</div>
<!--TAB 1 END **************************************************************** -->
<!--TAB 2 START **************************************************************** -->
<div id="tab2" style="position:absolute; width:390px; height:488px; z-index:20; left: 780px; top: 82px;"> <img src= "glossary-tab-in.gif" width="390" height="488" name="glossary-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is a glossary</div>
</div>
<!--TAB 2 END **************************************************************** -->
<!--TAB 3 START **************************************************************** -->
<div id="tab3" style="position:absolute; width:390px; height:488px; z-index:15; left: 780px; top: 82px;"> <img src= "help-tab-in.gif" width="390" height="488" name="help-tab-in">
<div id="moreInfoContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is help information.</div>
</div>
<!--TAB 3 END **************************************************************** -->
</body>
</html>
Comment