Results 1 to 6 of 6

Thread: document.onload Clarification

  1. #1
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default document.onload Clarification

    Hey guys! I haven't been here for a while, and I haven't been coding for a while either. Recently, I've attempted a start back up and am having some trouble with document.onload. I revisited an old script of mine and tried to execute a document.onload function in the <script> tags. For some reason, it doesn't seem to work, and since it's been a year or so since I've dealt with this stuff, I can't seem to find the problem.

    It was an old blog post for a somewhat average attempt at a JavaScript effect library (http://www.dynamicdrive.com/forums/blog.php?b=9). The jasoop.js is identical to what can be found in the blog post. Here is the code I'm experimenting with.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="jasoop.js"></script>
    <script type="text/javascript">
    var myElement;
    
    document.onload = function() {
    	myElement = new Effect("slide");
    }
    </script>
    <style type="text/css">
    #slide {
    	background: black;
    	width: 480px;
    	height: 360px;
    }
    </style>
    </head>
    <body>
    <div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
    </body>
    </html>
    I don't understand why this won't work. It's following what I instructed in the blog post, but when I click the <div> Firebug gives me a "myElement is undefined". I assure you there is nothing erroneous in jasoop.js because I can just put the onload="functionThatDefinesmyElementHere()" attribute in the <body> tag and it works. Please explain to me what is being done incorrectly. Thanks!
    Last edited by magicyte; 03-14-2011 at 12:44 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The document.onload event doesn't exist in at least some browsers. Firefox is one of them. It should be window.onload, or if executed in the global scope, simply onload.

    Ideally you should be using an add/attach event thing, or even a document ready event. The syntax for either of those is different than for onload.

    That said, this works:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="jasoop.js"></script>
    <script type="text/javascript">
    var myElement;
    
    onload = function() {
    	myElement = new Effect("slide");
    }
    </script>
    <style type="text/css">
    #slide {
    	background: black;
    	width: 480px;
    	height: 360px;
    }
    </style>
    </head>
    <body>
    <div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
    </body>
    </html>
    A document ready version:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="jasoop.js"></script>
    <style type="text/css">
    #slide {
    	background: black;
    	width: 480px;
    	height: 360px;
    }
    </style>
    </head>
    <body>
    <div id="slide" onclick="myElement.fadeOut(2, 'normal');"></div>
    <script type="text/javascript">
    var myElement = new Effect("slide");
    </script>
    </body>
    </html>
    Using your own slightly cumbersome addEvent function:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="jasoop.js"></script>
    <script type="text/javascript">
    (function(el){
    	var myElement;
    	var myClick = function(){
    		myElement.fadeOut(2, 'normal');
    	};
    	var myOnload = function() {
    		myElement = new Effect(el);
    		myElement.addEvent('click', myClick);
    	};
    	Effect.prototype.addEvent.call({element: window}, 'load', myOnload);
    })('slide');
    </script>
    <style type="text/css">
    #slide {
    	background: black;
    	width: 480px;
    	height: 360px;
    }
    </style>
    </head>
    <body>
    <div id="slide"></div>
    </body>
    </html>
    Note: All these work using the jasoop version in the blog entry.
    Last edited by jscheuer1; 03-13-2011 at 05:03 PM. Reason: add third method and note
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    magicyte (03-14-2011)

  4. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by jscheuer1 View Post
    The document.onload event doesn't exist in at least some browsers. Firefox is one of them. It should be window.onload, or if executed in the global scope, simply onload.
    That's funny! I was at one point contemplating if Firefox had dropped it since it wasn't working and it'd been, what, a year?...also in any other generic web browsers because I'd run a test to see if it was just a problem with Firefox.

    I really appreciate your time and help along with the examples you provided!

  5. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Hey! Back again. Could you please explain {element: window} used in call()? I understand that it references window to the this pointer, but I don't understand what the "element" part is. Thanks!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Using call() makes the first argument passed be referenced as this in the function (holds true for any function, though not all functions use the keyword this, so for them it would be pointless to use call). The function in this case uses this:

    Code:
            addEvent: function(ev, response) {
                if (this.element.addEventListener)
                    this.element.addEventListener(ev, response, false);
                else if (this.element.attachEvent) {
                    var res = function() {
                        response.apply(this.element);
                    };
                    this.element.attachEvent("on" + ev, res);
                } else
                    this.element["on" + ev] = response;
            },
    So if we go like:

    Code:
    Effect.prototype.addEvent.call({element: window}, 'load', myOnload);
    Then the object {element: window} will be this in the function. The function references this.element, and lo and behold the value of element in the object we passed as this is window.

    Perhaps this will help explain it:

    Code:
    var obj = {element: 'bob'};
    function func(){
    	alert(this.element);
    }
    func.call(obj);
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    magicyte (07-09-2011)

  8. #6
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Ah, now that I look back at the code I see that "element" was a property of the object "this" pointed to.. Silly me! Thanks for the clarification, John!

Bookmarks

Posting Permissions

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