#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45

    Using setInterval to rotate div content


    I love me some PHP, CSS, HTML, and even a little jQuery. But I use Javascript so infrequently, that I easily stumble on things like this.

    I'm trying to write a simple script that will rotate through 3 divs of content. For whatever reason, my code hates me and won't advance past 'div2'. I'd love to use jQuery, but it gets stripped out of the module I'm using. Only pure javascript sneaks through.

    Code:
    <script type="text/javascript">
    function rotateDivs(){
      if (rotateDiv = 2){
      document.getElementById('div1').style.display = 'none';
      document.getElementById('div2').style.display = '';
      rotateDiv=3;  
     }
     else if (rotateDiv = 3){
      document.getElementById('div2').style.display = 'none';
      document.getElementById('div3').style.display = '';
      rotateDiv=1;  
     }
     else {
      document.getElementById('div1').style.display = '';
      document.getElementById('div3').style.display = 'none';  
      rotateDiv=2;
     }
    }
    onload = function(){
     setInterval(rotateDivs, 3000);
    };
    </script>
    Code:
    <div id="div1">
    <p>This is Div 1</p>
    </div>
    <div id="div2" style="display: none;">
    <p>This is Div 2</p>
    </div>
    <div id="div3" style="display: none;">
    <p>This is Div 3</p>
    </div>
    Help?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Here's a hint: PHP comparison operators are the same as JavaScript comparison operators (except JS doesn't have the "<>" form of the "not equal" operator).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by Kravvitz
    Here's a hint: PHP comparison operators are the same as JavaScript comparison operators (except JS doesn't have the "<>" form of the "not equal" operator).
    I did try that originally, because I thought it was a typo in the original sample code I copied, but it didn't fix it, so I changed it back to match the sample code. I've changed other things since then, so I guess I'll try again once I can get my laptop booted.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    OK, you were correct on the operator (of course). The actual issue was that I hadn't declared the var before the function, so it wasn't working.

    In case anyone comes across this, here is my corrected code:

    Code:
    <script type="text/javascript">
    var rotateDiv = 2;
    function rotateDivs(){
      if (rotateDiv == 2){
      document.getElementById('div1').style.display = 'none';
      document.getElementById('div2').style.display = '';
      rotateDiv=3;  
     }
     else if (rotateDiv == 3){
      document.getElementById('div2').style.display = 'none';
      document.getElementById('div3').style.display = '';
      rotateDiv=1;  
     }
     else {
      document.getElementById('div1').style.display = '';
      document.getElementById('div3').style.display = 'none';
      rotateDiv=2;
     }
    }
    onload = function(){
     setInterval(rotateDivs, 3000);
    };
    </script>
    Thanks, Kravvitz for pointing me in the right direction.

IMN logo majestic logo threadwatch logo seochat tools logo