Solved

scrollTop does not work in XHTML 1.0

Posted on 2004-03-29
5
443 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

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

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
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 automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…

696 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