...

View Full Version : Onload for a div?



reaver2k
07-18-2008, 11:19 AM
Hello I've been looking for a good helpful coding site for quite some time so I hope this is it! :thumbsup:

A little question, I won't bother you with my tremendously ugly coding for now unless it is needed, I know that is bad practice - sorry!

Question is, I know onload only works on body and images (and something else?) but I have a function that requires to be run when a div is loaded (it requires a "this" to be thrown, there are alternative ways to get around this but it will probably take some prolonged scripting!).

The question is, is there any other way I can call a function from a div when it is loaded? I have seen a similar question in which it got an answer refering to onreadystatechange but I am unsure how exactly this works?

Any suggestions would be greatly appreciated! Don't hesitate to ask for any further information!

Thank you very much.

Millenia
07-18-2008, 11:21 AM
<div onload="Javascript stuff here">
Content here
</div>

Is this OK?

reaver2k
07-18-2008, 11:29 AM
<div onload="Javascript stuff here">
Content here
</div>

Is this OK?

That was my idea aswell, unfortunately I believe this doesn't work as onload is only executed if it is in regards to <body>, <frame>, <frameset>, <iframe>, <img>, <link> or <script>, not div'sl.

Information supplied from here?

http://www.w3schools.com/jsref/jsref_onload.asp

Thank you for your quick responce!

abduraooft
07-18-2008, 11:31 AM
<div onload="Javascript stuff here">
Content here
</div>

onload event doesn't work on a tag other than body, AFAIK.

Millenia
07-18-2008, 11:32 AM
Darn, worth a try.

Bill Posters
07-18-2008, 11:54 AM
You could try using a js framework such as jQuery, which provides the ready() method, which can be used on any identifiable element on the page.

http://docs.jquery.com/Events/ready#fn

reaver2k
07-18-2008, 12:07 PM
You could try using a js framework such as jQuery, which provides the ready() method, which can be used on any identifiable element on the page.

http://docs.jquery.com/Events/ready#fn

Good idea, I know nothing of jQuery but I am keen to learn! Was hoping for a easy solution but I suppose if no-one has come up with one yet there probably isn't one!

Out of interest, could anyone explain/link me to a good explanation of what onreadystatechange does and the syntax of how to use it? I'm trying to get as broad prospective on everything as possible!

Thanks for all the quick replies everyone, sounds like I've found the right forum!

abduraooft
07-18-2008, 12:28 PM
Get a copy of jquery file and try the following code (correct your js file path)


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

$(document.getElementsByTagName('div')[0]).ready(function() {
// do stuff when div is ready
alert('loaded');
});
$(document.getElementById('mydiv')).click(function() {
// do stuff when clicked
alert('clicked');
});
</script>
</head>
<body>
<div id="mydiv">My Div</div>
</body>
</html>

See http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

reaver2k
07-18-2008, 01:45 PM
Get a copy of jquery file and try the following code (correct your js file path)


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

$(document.getElementsByTagName('div')[0]).ready(function() {
// do stuff when div is ready
alert('loaded');
});
$(document.getElementById('mydiv')).click(function() {
// do stuff when clicked
alert('clicked');
});
</script>
</head>
<body>
<div id="mydiv">My Div</div>
</body>
</html>

See http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Thank you very much for your reply. I will look into jQuery regardless for future reference but have decided to bite the bullet and rescript what I have done, which was suprisingly piss easy.

I decided to do this as I realised my current CSS was invalid anyway (I was using ID's as classes like an idiot) and rescripting mean't I was validating my CSS so no complaints.

Thank you everyone very much for your responses, you have most deffonately given me a good impression of the whole forum! Thanks for being one of the good guys! I will be back with more questions soon enough no doubt.

abduraooft
07-18-2008, 01:51 PM
reaver2k, a warm welcome to Codingforums :)
(belated though)

Bill Posters
07-18-2008, 02:16 PM


$(document.getElementsByTagName('div')[0]).ready(function() {

});

$(document.getElementById('mydiv')).click(function() {

});



I think you're missing a large chunk of the benefits of jQuery's selector-based DOM selection.


$('div').eq(0).ready(function() {

});

$('#mydiv').click(function() {

});

http://docs.jquery.com/Selectors
http://docs.jquery.com/Traversing/eq

abduraooft
07-18-2008, 02:54 PM
Thanks mate, I need to explore it more :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum