Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

scrollTop does not work in XHTML 1.0

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

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

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…
Geo-targeting is the practice of distributing content based on a person’s location, as best as you can determine it. Let’s look at some ways you could successfully use this tactic. The following tips and case studies could lead to meaningful results.
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…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

636 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