dcsimg
Results 1 to 12 of 12

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

  1. #1

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    Resolved [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

  2. #2
    Lurker
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,651

    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. -->

  3. #3

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    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 ?

    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
    Last edited by aconybeare; Feb 9th, 2006 at 05:44 AM.

  4. #4
    Lurker
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,651

    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/

  5. #5

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    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

  6. #6
    Lurker
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,651

    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.

  7. #7

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    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

  8. #8

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    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

  9. #9
    Lurker
    Join Date
    Jan 2005
    Location
    Everywhere
    Posts
    13,651

    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.

  10. #10

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

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

    Great thanks!

  11. #11

    Thread Starter
    Fanatic Member aconybeare's Avatar
    Join Date
    Oct 2001
    Location
    UK
    Posts
    772

    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;
    }

  12. #12
    New Member
    Join Date
    Nov 2010
    Posts
    1

    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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width