?
Solved

scrollTop does not work in XHTML 1.0

Posted on 2004-03-29
5
Medium Priority
?
447 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 500 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses
Course of the Month16 days, 12 hours left to enroll

862 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