www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to rotate a Div after 30 seconds

  1. #1
    Join Date
    Apr 2009
    Posts
    2

    How to rotate a Div after 30 seconds

    I have a two <divs> and want rotate them.
    For example, at the start of the page i want activate one div & its content and then in 30 seconds i want activate content of 2nd div while hiding the earlier div.

    For example:

    <div id="div1">
    <p>some txt & image </p> </div>

    <div id="div1">
    <p>some txt & image </p> </div>


    Can i do this with JavaScript function? The problem is, while there are onload, onClick functions,
    there is no function that i can have to be called on 30 seconds after load etc.

    I appreciate any help.

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726

  3. #3
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    I should add, that w3schools example is somewhat lacking there, in that they only show you the method of quoting the code to be executed after the delay period. Quoting the code is undesirable, as the string compiler (one of the slowest parts of executing javascript, along with accessing DOM elements) has to start up. It is much better to feed setTimeout the name of a function to run (without quotes or parens () ) or else feed it an anonymous function which contains the code or function with parameters to be run. A better example or two:

    Code:
    <script type="text/javascript">
    function myFunction() {
        alert("Hello from myFunction!");
    }
    
    function myFunctionWithParameters(parameter1,parameter2) {
        parameter1.style.display = parameter2;
    }
    
    window.onload = function () {
        window.setTimeout(myFunction,3000); //3000 milliseconds = 3 seconds
        window.setTimeout(function () { myFunctionWithParameters(document.getElementById('someDiv'), "block"); },6000);
    };
    </script>
    
    <div id="someDiv" style="display:none;">some text in someDiv</div>

  4. #4
    Join Date
    Apr 2009
    Posts
    2
    Thanks for the input. I'm further along but not there yet.

    I understand the SetInteraval() and SetTimeout() and i'm able to fade the divs as I want.
    What i can't do is:
    Rotate two divs in the same location of the page
    when i fade, div 1 it works
    when i fade div 2 it works but its fading in its location


    Remember i have them like this:
    <div id="div1">
    <p>some txt & image </p> </div>

    <div id="div1">
    <p>some txt & image </p> </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles