locked
Start timer when page has loaded. RRS feed

  • Question

  • User-1317932780 posted

    I am very new to Javascript and have never used jQuery but I think jQuery may be able to help with my problem some how.

    I want to start a timer when my page loads. So after researching it looks like I could simply do the following:

    <body onload="starttimer();">

    However in my ASP.NET application I am using master pages so the <body> tag is defined in my master page not in the .aspx file for the page I want to start my timer in. Given that I must find another way to start the timer. Any ideas?

    Wednesday, May 4, 2011 12:37 PM

Answers

  • User-1828494216 posted

    Hi,

    using simple javascript...

    <script type="text/javascript">
        window.onload = function StartTimer() {
            //your timer starting code
        }
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2011 12:57 PM

All replies

  • User1618479829 posted

    You can put <body onload="starttimer();"> in Master page ... it will work..

    there is no master/child page concept once it is rendered by th browser.

    Wednesday, May 4, 2011 12:52 PM
  • User-1828494216 posted

    Hi,

    using simple javascript...

    <script type="text/javascript">
        window.onload = function StartTimer() {
            //your timer starting code
        }
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 4, 2011 12:57 PM
  • User-1317932780 posted

    shelly, sorry i didn't specify but I don't want to start the timer for every page that inherits from that master page just one specific page.

    Wednesday, May 4, 2011 2:22 PM
  • User-1317932780 posted

    mitja, your solution seems to work but if you don't mind could you explain what makes that work.

    I mean i know "window.onload" is a pointer to a method that gets fired once the window is loaded but I dont know how the javascript that assigned the method pointer to the onload property gets called.

    Does this mean any/all javascript code listed in the <head> section gets automatically executed when a page loads?

     

    Wednesday, May 4, 2011 2:26 PM
  • User-1828494216 posted

    Hi,

    i'll try to explain it simply...

    in c# or VB (code behind) you have an event called Page_Load, right? so what you put in there get's called when page loads, right?

    well... this is kida the same but on client (JavaScript) side. Onload is an event of the window... so what you put into window.load will fire and NOT what you put in header. You don't even need to put this code in the header it can be inside Form or Place Holder.

    You could also do it like this

    <script type="text/javascript">
        function func1() { alert('func1 fired'); };
        function func2() { alert('func2 fired'); };
        function func3() { alert('func3 fired'); };
        window.onload = function () {func1();func2();func3();}
    </script>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="func1();return false;" />

    Will this simple explanation do?

     

    Wednesday, May 4, 2011 2:50 PM
  • User-1317932780 posted

    Sorry to be a pain but I clearly realize that this is probably the most basic concept for me to understand in order to move forward with javascript and jQuery development so I feel it is vital that I understand it and not "guess wrong".

    OK I just did a test and I think I understand it now.

    In the <head> section I added the following code:

     

        <script type="text/javascript">
            function Test1() {
                var RsltElem = document.getElementById("Results1");
                RsltElem.innerHTML = "Test 1 fired";
            }
            var RsltElem = document.getElementById("Results2");
            if (RsltElem != null)
                RsltElem.innerHTML = "Test 2 fired";
       </script>

     

    What I found was that the function Test1() never got executed but this line did:

    var RsltElem = document.getElementById("Results2");

     

    But (I am thinking) since it appears to execute all lines from top down when page is loading then RsltElem was null because the element "Results2" had not been created/rendered yet. So I also added the following to the end of the <body> section.

     

        <script type="text/javascript">
    
            var re = document.getElementById("Results");
            if (re != null)
                re.innerHTML = "Test 3 fired";
        </script>

     

    This did fire and was able to locate the element "Results", I am assuming because it occured after the code to declare <span id="Results"></span>

    So the only thing that I question or rather wish to confirm is that no functions get executed "automatically" as the page is loading on the client side?   Since the code " window.onload = {something} " is just an assignment and not located inside a function then it does get executed while the page is loading then once the page has completed loading then it calls the method which is pointed to by the property "onload" of the window object?

    Wednesday, May 4, 2011 3:28 PM