PDA

View Full Version : Resolved document.onload Clarification



magicyte
03-12-2011, 10:11 PM
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.


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

jscheuer1
03-13-2011, 03:49 PM
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:


<!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:


<!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:


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

magicyte
03-14-2011, 12:35 AM
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! :)

magicyte
07-09-2011, 02:15 AM
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!

jscheuer1
07-09-2011, 04:54 AM
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:


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:


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:


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

magicyte
07-09-2011, 09:29 PM
Ah, now that I look back at the code I see that "element" was a property of the object "this" pointed to.. Silly me! :p Thanks for the clarification, John!