[RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
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
Re: Body onscroll doesn't work with doctype strict.dtd?
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. -->
Re: Body onscroll doesn't work with doctype strict.dtd?
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 :confused: ?
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
Re: Body onscroll doesn't work with doctype strict.dtd?
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/
Re: Body onscroll doesn't work with doctype strict.dtd?
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
Re: Body onscroll doesn't work with doctype strict.dtd?
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.
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
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
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
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
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
Well, language is deprecated. If you specify the type attribute then there's no need for the language.
Quote:
Originally Posted by [url=http://www.w3schools.com/tags/tag_script.asp]W3Schools[/url]
Specifies the scripting language. Deprecated. Use the type attribute instead.
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
Hi,
As it stands you have to have the <!--Quirks--> 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 <!--Quirks--> 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;
}
Re: [RESOLVED] Body onscroll doesn't work with doctype strict.dtd?
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!
