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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get document.ready using javascript

    In Jquery, there are following two concepts

    1. Document.ready
    2. Window.onload

    How can i get to know when document is ready to use using pure javascript?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    .onload IS the javascript method

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery demo</title>

    </head>
    <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="JQuery1.6.2.js"></script>
    <script>
    $(window).load(function(){
    alert("Window load");
    });
    $(document).ready(function(){
    alert ("Document ready");
    });

    </script>
    </body>
    </html>

    Here "Document ready" will be painted first before even execute window load. So, My question is that without using jquey, if i want to know when document is ready to use. How can i find out? I appreciate your help!!

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by RajaRamu View Post
    In Jquery, there are following two concepts

    1. Document.ready
    2. Window.onload

    How can i get to know when document is ready to use using pure javascript?
    Search for ondomready and you'll find several stand-alone solutions.

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't find out using pure javascript. I do see lots of framework solutions. I want only in javascript. Can you please help me out on this?

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    .load is a Jquery ajax function.
    this is how you use onload

    Code:
    <html>
    <head>
    <script>
    function foo(){
    alert("bar")
    }
    window.onload = foo();
    </script>
    </head>
    <body>
    content
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No. i have something to execute once DOM is ready before window.onload is being called.

    This can be achieved in Jquery by

    $(document).ready(function(){
    alert ("Document ready");
    });


    i want the same functionality in javascript.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    $(document).ready() fires on DOMContentLoaded, but this event is not being fired consistently among browsers. This is why jQuery will most probably implement some heavy workarounds to support all the browsers. And this will make it very difficult to "exactly" simulate the behaviour using plain Javascript (but not impossible of course).

    In supporting browsers you can write something like this
    Code:
    document.addEventListener('DOMContentLoaded', function() {
       // your code here
    }, false);
    For Internet Explorer and Safari you can follow this description

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by devnull69 View Post
    $(document).ready() fires on DOMContentLoaded, but this event is not being fired consistently among browsers.
    Using the below code, the DOMContentLoaded event is working fine for me in Chrome 14 Beta, Firefox 7 Beta 2, Internet Explorer 9, Opera 11.5, and Safari 5.1. (Of course, there may still be problems in older browsers.)

    Code:
    var d = document;
    function document_loaded() {
    	d.defaultView.alert("The DOM is loaded!");
    }
    d.addEventListener("DOMContentLoaded", document_loaded, false);
    (This should be no surprise though since the former Mozilla-only event has since become part of HTML5; see http://www.whatwg.org/specs/web-apps...e/the-end.html and http://www.whatwg.org/specs/web-apps....html#events-0.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you all.This really helps!!

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Searching for “DOM ready javascript” with Google gave me this as first result within one second: http://www.javascriptkit.com/dhtmltutors/domready.shtml


  •  

    Posting Permissions

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