www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with rotating DIV

  1. #1
    Join Date
    Jun 2009
    Posts
    2

    Help with rotating DIV

    Hi all,

    First time poster so I hope I have this in the right spot. I'm in serious need of some help. I'm trying to create rotating text inside of a DIV tag. Using borrowed code I've come close but I honestly don't know enough about (okay *anything about*) JavaScript so I'm having a hard time figuring out what is wrong.

    What is happening is that DIV 1, 2, and 3 all come up during the first rotation, but on second and subsequent rotations, only DIV 2 and 3 show. Can anyone tell me what I'm doing wrong? I've pasted the code below. THANK YOU!!!

    <script type="text/javascript">
    function rotateDivs(){
    rotateDivs.flag = !rotateDivs.flag;
    if(rotateDivs.flag){
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = '';
    document.getElementById('div3').style.display = 'none';
    }
    else {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = '';
    }
    }
    onload = function(){
    setInterval(rotateDivs, 3000);
    };
    </script>
    </head>
    <body>
    <div id="div1">
    <p class="nn2"><b>sample text 1</b> </p> </div>
    <div id="div2" style="display: none;">
    <p class="nn2"><b>sample text 2</b></p> </div>
    <div id="div3" style="display: none;">
    <p class="nn2"><b>sample text 3</b></p> </div>

  2. #2
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    The problem is that both your 'if' and 'else' statements define div1's style.display as 'none'. Since you are only set up for two boolean values- true or false, you will have difficulty overcoming the limitation of two conditions affecting more than two desired outcomes. You could do something like this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Some Title</title>
    <script type="text/javascript">
    function rotateDivs(divIdsArr) {
        if (!arguments.callee.count) {
            arguments.callee.count = 0;
        }
        var i, el, ac = arguments.callee.count;
        for (i = 0; i < divIdsArr.length; i++) {
            el = document.getElementById(divIdsArr[i]);
            el.style.display = (ac == i) ? 'block' : 'none';
        }
        arguments.callee.count = (ac == divIdsArr.length - 1) ? 0 : ++ac;
    }
    
    window.onload = function(){
        window.setInterval(function () { rotateDivs(['div1', 'div2', 'div3']); }, 3000);
    };
    </script>
    </head>
    <body>
    <div id="div1">
    <p class="nn2"><b>sample text 1</b> </p> </div>
    <div id="div2" style="display: none;">
    <p class="nn2"><b>sample text 2</b></p> </div>
    <div id="div3" style="display: none;">
    <p class="nn2"><b>sample text 3</b></p> </div> 
    </body>
    </html>

  3. #3
    Join Date
    Jun 2009
    Posts
    2
    Thank you SO much! That worked! I knew there had to be an issue with DIV 1 being "none" in both if and else but I had no clue how to fix it. It's a sad day when I'm the best our office has for a Web developer but so it goes. I REALLY appreciate you taking the time help!

  4. #4
    Join Date
    Oct 2008
    Location
    U.S.
    Posts
    726
    You're welcome!

Thread Information

Users Browsing this Thread

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

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