Solved

scrollTop does not work in XHTML 1.0

Posted on 2004-03-29
5
441 Views
Last Modified: 2013-12-16
In a HTML 4 document I used a script which was based on the function below (fixit).
It "fixes" a nav-menu at a certain position on the screen while the rest of the document scrolls by.

As I tried to shift the HTML style to XHTML, the script stopped working. Obviously "scrollTop" or "pageYOffset" is no longer understood.

Can you tell me why? Is there an JS alternative (besides something like "position:fixed" in CSS)?

Thx

Pok



****

function fixit() {
style_pos = document.getElementById("menu").style;

if(document.all) {scroll_Y = document.body.scrollTop+h;}
else {scroll_Y = self.pageYOffset+h; }
            
      style_pos.position="absolute";      
      style_pos.top=scroll_Y;
}


window.setInterval("fixit()",10);

PS: If you test this, you will notice some awkward flickering, which I smoothed by additional functions. You can see the script in action at:
http://www.oeaw.ac.at/ias/Allg.html
0
Comment
Question by:Pok
5 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 10708446
Perhaps this two links help you:
http://www.hixie.ch/advocacy/xhtml 
http:Q_20935406.html

0
 
LVL 17

Expert Comment

by:dorward
ID: 10711104
I suspect that the problem is not that you changed to XHTML, but that you changed from a Doctype which triggers "Emulate all the mistakes of earlier browsers mode" (Quirks mode) to one which triggers Standards mode.

You need to make your code conform to the standard you are claiming to follow. Even with your current doctype (HTML 4.0 Transitional (which is known to have bugs - at least go to 4.01)), you have syntax errors.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.oeaw.ac.at%2Fias%2FAllg.html&doctype=%28detect+automatically%29&charset=iso-8859-1+%28Western+Europe%29

Browsers are less for giving of syntax errors in Standards mode.

I'm not sure, but it looks like that JavaScript which changes the values of the menu styles is failing to set them to values which include a unit (like px). All non-zero lengths require units in CSS, and most browsers enforce this in Standards mode.

See also:
* http://www.w3.org/QA/2002/04/valid-dtd-list.html
* http://gutfeldt.ch/matthias/articles/doctypeswitch.html
* http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
0
 
LVL 9

Expert Comment

by:lombardp
ID: 10711105
The link works fine.
Could you post the XHTML version?
0
 

Accepted Solution

by:
Bluntschli earned 125 total points
ID: 10712590
Hi Pok,

try

h=0;   //?

function fixit() {
style_pos = document.getElementById("menu").style;

if (document.documentElement && document.documentElement.scrollTop) {                   //documentElement replacing MS "body"
scroll_Y = document.documentElement.scrollTop+h;}
else if (document.all) {scroll_Y = document.body.scrollTop+h;}
else {scroll_Y = self.pageYOffset+h; }
         
     style_pos.position="absolute";    
     style_pos.top=scroll_Y +"px" ;                     //add a unit!
}

hope it works

Bluntschli
0
 

Author Comment

by:Pok
ID: 10712844
Bluntschli:
Your suggestions work fine! Thx!
See the link below.
Are there still things to take care of?
(I only tested it with IE 6, NS 7 and Opera7 on WinXP.)

Dorward: I know the old page is no strict HTML, thats why I want to redesign it outright, using XHTML!

Lombard: a new test version runs at:
http://members.chello.at/scheid/ias_test/
find the js-script at:
http://members.chello.at/scheid/ias_test/scripts/weiten_all.js
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question