getting "afterimages" when moving layers in Firefox

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

 <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>

Mar 26 '07 #1

Subscribe Post Reply

2373

drhowarddrfine

7,435

Expert 4TB

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

raylaur

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

 <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="glossaryContent" 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="helpContent" 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>

Mar 26 '07 #3

drhowarddrfine

7,435

Expert 4TB

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

raylaur

Wish I could say the same. But thanks for checking anyway.

Mar 26 '07 #5

AricC

1,892

Expert 1GB

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

7,435

Expert 4TB

Then I think it might be time to move this to the js forum.

Mar 27 '07 #7

AricC

1,892

Expert 1GB

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

by: Yan Roosens | last post by:

Hello all, I'm a total newbie with SQL Server 2000 and I have a little problem when moving a database form Access 2000 to SQL Server 2000. In the Access database, each table has an...

Microsoft SQL Server

Perform an event when moving between records

by: rigasp | last post by:

Hello, is there an event I can call when moving between the records of a form (either from the navigation buttons or by pressing down from the keyboard? Thankx

Microsoft Access / VBA

re-enter credentials when moving from HTTP to HTTPS

by: Tom | last post by:

Hi, I have a .NET web application protected by Windows Authentication. Therefore, when accessing the first page, users are prompted to enter their credentials (when not logged on the domain). ...

ASP.NET

I am getting error when trying to Add Web Reference in Visual Studio 2005.

by: dipesh | last post by:

I am getting error when trying to Add Web Reference in Visual Studio 2005. "Some of the files required for web references are not installed"

.NET Framework

Went from using Visual Web Develop express to Visual Studio 2005 and getting error when trying to open project

by: jonny | last post by:

Went from using Visual Web Develop express to Visual Studio 2005 and getting error when trying to open project. Error message: "One or more projects in the solution could not be loaded for the...

ASP.NET

Getting Error when Service account of WCF Service is a new account

by: =?Utf-8?B?UmF2aQ==?= | last post by:

Hi, I have WCF service and integrated with STS (WS-Federation). The Service exposes 5 endpoints Win, UNT and Federated Windows, Federated UNT and Mex endpoint. My STS Service exposes 3 endpoints...

.NET Framework

My vb.net application is getting closed when i trying to run the solution

by: shwethatj | last post by:

Can anyone help me please .... My vb.net application is getting closed when i trying to run the solution ... What might be the problem ... Am new to .net .. Regards, Shwetha

.NET Framework

getting error when calculating total using unbound text field in subform

by: sumit kale | last post by:

Hi, Can somebody help me resolve my problem ? I am getting error when calculating total using unbound textfiled in subform. I have a main form called purchase_register_master and a subform...

Microsoft Access / VBA

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

getting "afterimages" when moving layers in Firefox

Similar topics