Solved

scrollTop does not work in XHTML 1.0

Posted on 2004-03-29
5
438 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now