[RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

**aconybeare** · Feb 8th, 2006, 09:54 AM

Hi,

I'm trying to use the body tag onscroll event to trap the page coordinates (IE) so that when my page reloads I can return the page to the last known position.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If I remove the above doctype declaration the event fires but doesn't with it in.

Does anyone have any idea why and is there a workaround?

Cheers Al

**penagate** · Feb 8th, 2006, 04:04 PM

IE's playing by the rules - there is no onscroll attribute in proper HTML. It is a JS event, nothing to do with HTML - the script and the content stay separate

HTML Code:

<head>
    <script type="text/javascript">
        function window_scroll()
        {
            // do your business
        }
        window.onscroll = window_scroll;
    </script>
    <!-- etc. -->

**aconybeare** · Feb 9th, 2006, 05:30 AM

Penagate,

Thanks a bunch for your response, I can't seem to get your suggestion working, here is an example, If I remove/comment out the doctype declaration it works

?

It works if you put the ref to the onscroll in the body tag too, so maybe IE aren't playing by the rules??

Code:

<body onload="scrollItPage();" onscroll="setPageCoords();">

If it's working the values in the two text boxes change as you scroll

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script language="javascript">

	// Remember the page position
	// Goto Last known page position
	function scrollItPage(){
		window.scrollTo(myFrm.txtPageX.value, myFrm.txtPageY.value);
	}

	// set the page coordinates as the user scrolls down the page
	function setPageCoords(){
		var myPageX;
		var myPageY;
		if(document.all){
			myPageX=document.body.scrollLeft;
			myPageY=document.body.scrollTop;
		}else{
			myPageX=window.pageXOffset;
			myPageY=window.pageYOffset;
		}
		myFrm.txtPageX.value=myPageX;
		myFrm.txtPageY.value=myPageY;
	}

	function resizeWin() {
	    // resize the window to force scroll bars
	    window.resizeTo(460,600);
  	}

	window.onscroll=setPageCoords;

</script>
</head>
<body onload="resizeWin(); scrollItPage();">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />

<form name="myForm" id="myForm" method="post">
	<script language="javascript">
		<!--
		// set the name of your form here
		var myFrm = document.myForm;
		//-->
	</script>
	<!--
	The following two controls are used for remembering the page position
	They should be hidden, have set them to text for illustration purposes
	This needs to be done with ASP so that you can access the submitted values
	In the value="<%'=Request.Form("txtPageX")%>"
	-->
	<input type="text" name="txtPageX" id="txtPageX" value="" />
    	<input type="text" name="txtPageY" id="txtPageY" value="" />
    	<br /><br /><br /><br />
	<input type="submit" name="cmdTest" id="cmdTest" value="test" />
	<br /><br /><br /><br />
</form>

</body>
</html>

Cheers Al

**penagate** · Feb 9th, 2006, 11:04 AM

That's odd. In IE, it seems to only work in quirks mode, which is the mode you get by default when there is no doctype. You can force quirks mode just in IE by placing a comment before the doctype; that makes the script work but you will have problems using CSS because of it. I'm really not sure of a better solution right at the moment.

HTML Code:

<!-- Quirks -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

On an unrelated note, it's best to always ensure your documents validate first before debugging, because invalid documents can cause strange errors. You seem to be using a syntax more like XHTML with the self-closing elements. You can't do that in HTML 4. Content cannot be directly within the body element, you need enclosing block-level elements such as <div> or <p> (<form> is not a block level element), and finally you should use the type attribute instead of language, as in

HTML Code:

<script type="text/javascript">

You can use the W3C's Validator service to check your documents for markup errors.
http://validator.w3.org/

**aconybeare** · Feb 9th, 2006, 11:19 AM

Penagate,

Thanks for all the tips most helpful, I'm always looking at improving my coding technique and style.

I'd adopted xhtml style as much as possible as thought I'd have to migrate at some point, I have to say I've not had any issues so far but will revert to normal html tags

I'll also change all my script block declarations
as well as putting <p> tags into my body tags

finally I've just noticed the animation in your sig. very amusing!

Cheers Al

**penagate** · Feb 9th, 2006, 11:29 AM

If you like self-closing tags and are in the process of migrating to XHTML then use XHTML 1.0 Transitional, it will suit what you are doing just now fine.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Personally I use XHTML 1.1, which is the latest strict version of XHTML, and a PHP script I wrote to convert it to HTML 4 on the fly for Internet Explorer, which does not properly support XHTML Strict. Writing the document in a strict doctype ensures you have clean content-centric markup, and the other elements such as script and presentation (CSS) stay separate. If you would like to try what I'm doing then I could upload the conversion script somewhere.

**aconybeare** · Feb 9th, 2006, 11:39 AM

Penagate,

Thanks for that, I don't know the first thing about php and I've got so much to do at the moment on totally unrealistic timescales that I really can't get into learning this right now, in time though.

Cheers Al

**aconybeare** · Feb 9th, 2006, 11:47 AM

Penagate,

I have a question

I've seen this used -

Code:

<script language="javascript" type="text/javascript">

Is this okay or should the language bit go altogether?

Cheers Al

**penagate** · Feb 9th, 2006, 11:49 AM

Well, language is deprecated. If you specify the type attribute then there's no need for the language.

Originally Posted by [url=http://www.w3schools.com/tags/tag_script.asp]W3Schools[/url]

Specifies the scripting language. Deprecated. Use the type attribute instead.

**aconybeare** · Feb 9th, 2006, 01:00 PM

Great thanks!

**aconybeare** · Sep 18th, 2006, 08:49 AM

Hi,

As it stands you have to have the  above the doctype declaration for this to work

Have found a solution to this -
When you use a doctype in IE6, all properties of document.body are reassigned to
document.documentElement, however if you're using something like this "document.body.scrollLeft>=0" to check if the browser supports scrollLeft, IE6 returns true, but when you attempt to access the value it returns 0 regardless.

Source - http://lists.evolt.org/archive/Week-...04/105459.html

Therefore changing this function to this means you can loose the  declaration

Essentially the change is this -

first check for - document.documentElement.scrollLeft then
check for - document.body.scrollLeft

Code:

function setPageCoords(){
	var myPageX;
	var myPageY;
	if(document.documentElement.scrollLeft>=0){
		myPageX=document.documentElement.scrollLeft;
		myPageY=document.documentElement.scrollTop;
	}else if(document.body.scrollLeft>=0){
		myPageX=document.body.scrollLeft;
		myPageY=document.body.scrollTop;
	}else{
		myPageX=window.pageXOffset;
		myPageY=window.pageYOffset;
	}
	myFrm.txtPageX.value=myPageX;
	myFrm.txtPageY.value=myPageY;
}

**sergioabreu** · Nov 18th, 2010, 08:04 PM

aconybeare
You saved our lives

Thank's a lot !!!

My use now is:

var scrolltop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;

This way we can keep the correct DOCTYPE in the top and the script working in all browsers!

Thread: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Thread Tools

Display

[RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: Body onscroll doesn't work with doctype strict.dtd?

Re: Body onscroll doesn't work with doctype strict.dtd?

Re: Body onscroll doesn't work with doctype strict.dtd?

Re: Body onscroll doesn't work with doctype strict.dtd?

Re: Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?

Posting Permissions