Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Onload for a div?

    Hello I've been looking for a good helpful coding site for quite some time so I hope this is it!

    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.

  • #2
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Code:
    <div onload="Javascript stuff here">
        Content here
    </div>
    Is this OK?

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Millenia View Post
    Code:
    <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!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Millenia View Post
    Code:
    <div onload="Javascript stuff here">
        Content here
    </div>
    onload event doesn't work on a tag other than body, AFAIK.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Darn, worth a try.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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

  • Users who have thanked Bill Posters for this post:

    reaver2k (07-18-2008)

  • #7
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters View Post
    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!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Get a copy of jquery file and try the following code (correct your js file path)
    Code:
    <!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:Get...ed_with_jQuery
    Last edited by abduraooft; 07-18-2008 at 12:35 PM. Reason: added 'click'
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    reaver2k (07-18-2008)

  • #9
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Get a copy of jquery file and try the following code (correct your js file path)
    Code:
    <!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:Get...ed_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.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    reaver2k, a warm welcome to Codingforums
    (belated though)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by abduraooft View Post
    Code:
    …
     
    $(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.

    Code:
    $('div').eq(0).ready(function() {
    	…
    });
    
    $('#mydiv').click(function() {
    	…
    });
    http://docs.jquery.com/Selectors
    http://docs.jquery.com/Traversing/eq

  • Users who have thanked Bill Posters for this post:

    abduraooft (07-18-2008)

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks mate, I need to explore it more
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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