By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

getting "afterimages" when moving layers in Firefox

P: 3
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?

Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  3. "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
  6. <title>cn_shell</title> 
  7.  
  8. <script language="JavaScript" type="text/JavaScript"> 
  9.  
  10. <!-- These are vars used in the Slide function--> 
  11. var layername, xgoal, xhop, delay=5; 
  12.  
  13. <!-- This function handles browser syntax differences--> 
  14. function makeName(layerID) { 
  15. if (navigator.appName=="Mozilla") 
  16. { refname = eval("document." + layerID) } 
  17. else 
  18. { refname = eval("document.all." + layerID + ".style") } 
  19. return refname 
  20.  
  21. <!--The slide function moves the object--> 
  22. function slide() { 
  23. if ((parseInt(layername.left) != xgoal)) 
  24. { layername.left = parseInt(layername.left) + xhop; 
  25. window.setTimeout("slide()", delay) } 
  26. </script> 
  27.  
  28. </head> 
  29. <body> 
  30. <!--button layer needs to be above tab layers **************************************************************** --> 
  31. <div id="buttons" style="position:absolute; width:60px; height:488px; z-index:30; left: 340px; top: 82px;"> 
  32. <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> 
  33. <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> 
  34. <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> 
  35.  
  36. <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> 
  37. <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> 
  38. <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> 
  39. </div> 
  40.  
  41. <!--TAB 1 START **************************************************************** --> 
  42. <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"> 
  43. <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> 
  44. </div> 
  45. <!--TAB 1 END **************************************************************** --> 
  46. <!--TAB 2 START **************************************************************** --> 
  47. <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"> 
  48. <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> 
  49. </div> 
  50. <!--TAB 2 END **************************************************************** --> 
  51. <!--TAB 3 START **************************************************************** --> 
  52. <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"> 
  53. <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> 
  54. </div> 
  55. <!--TAB 3 END **************************************************************** --> 
  56.  
  57.  
  58. </body> 
  59. </html>
Mar 26 '07 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
First things first. Your <html> tag is in the wrong position. It needs to come after the doctype. But moving it there means it doesn't work at all, at least in Firefox.

In addition, you are using the id "moreInfoContent" more than once. You can only use an id name once on a page.

Try fixing those two errors while I run to the store.
Mar 26 '07 #2

P: 3
First things first. Your <html> tag is in the wrong position. It needs to come after the doctype. But moving it there means it doesn't work at all, at least in Firefox.

In addition, you are using the id "moreInfoContent" more than once. You can only use an id name once on a page.

Try fixing those two errors while I run to the store.
Thanks for taking a look. As you said, placing the <html> tag after the doctype doesn't work in Firefox. But I did correct the error of multiple ID names.

What''s happening is I'm getting repeating images. You might not see this unless you link the GIF images. I can send these if you need. It seems that the browser is not refreshing after each position change. The movement looks jumpy. When I resize the browser window slightly the repeated images disappear.

Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  3. "http://www.w3.org/TR/html4/loose.dtd"> 
  4.  
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
  7. <title>cn_shell</title> 
  8.  
  9. <script language="JavaScript" type="text/JavaScript"> 
  10.  
  11. <!-- These are vars used in the Slide function--> 
  12. var layername, xgoal, xhop, delay=5; 
  13.  
  14. <!-- This function handles browser syntax differences--> 
  15. function makeName(layerID) { 
  16. if (navigator.appName=="Mozilla") 
  17. { refname = eval("document." + layerID) } 
  18. else 
  19. { refname = eval("document.all." + layerID + ".style") } 
  20. return refname 
  21.  
  22. <!--The slide function moves the object--> 
  23. function slide() { 
  24. if ((parseInt(layername.left) != xgoal)) 
  25. { layername.left = parseInt(layername.left) + xhop; 
  26. window.setTimeout("slide()", delay) } 
  27. </script> 
  28.  
  29. </head> 
  30. <body> 
  31. <!--button layer needs to be above tab layers **************************************************  ************** --> 
  32. <div id="buttons" style="position:absolute; width:60px; height:488px; z-index:30; left: 340px; top: 82px;"> 
  33. <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> 
  34. <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> 
  35. <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> 
  36.  
  37. <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> 
  38. <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> 
  39. <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> 
  40. </div> 
  41.  
  42. <!--TAB 1 START **************************************************  ************** --> 
  43. <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"> 
  44. <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> 
  45. </div> 
  46. <!--TAB 1 END **************************************************  ************** --> 
  47. <!--TAB 2 START **************************************************  ************** --> 
  48. <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"> 
  49. <div id="glossaryContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is a glossary</div> 
  50. </div> 
  51. <!--TAB 2 END **************************************************  ************** --> 
  52. <!--TAB 3 START **************************************************  ************** --> 
  53. <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"> 
  54. <div id="helpContent" style="position:absolute; width:360px; height:480px; z-index:21; left: 25px; top: 5px; overflow: auto; visibility: hidden;">This is help information.</div> 
  55. </div> 
  56. <!--TAB 3 END **************************************************  ************** --> 
  57.  
  58.  
  59. </body> 
  60. </html>
Mar 26 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
The <html> tag needs to be after the doctype in any case. I think this should actually be in the javascript board but OnClick needs to be all lower case. I'm using Firefox but on FreeBSD so I don't know if it matters but with those two changes it works and looked pretty smooth to me.
Mar 26 '07 #4

P: 3
Wish I could say the same. But thanks for checking anyway.
Mar 26 '07 #5

Expert 100+
P: 1,892
Wish I could say the same. But thanks for checking anyway.
What browser isn't this working with? FF should run the same regardless of OS.
Mar 26 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
Then I think it might be time to move this to the js forum.
Mar 27 '07 #7

Expert 100+
P: 1,892
Then I think it might be time to move this to the js forum.
It didn't work for me in IE6 or FF on Win XP Pro 64, actually are you sure that navigator.appName == "Mozilla" is valid? Change Mozilla to Netscape. Running out the door I'll test that in a bit when I get back.
Mar 27 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.