Using setInterval to rotate div content

Dev Shed Forums Sponsor:

September 25th, 2012, 05:05 PM

BlackAce

Contributing User

Join Date: Jun 2010

Posts: 164

Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 44

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?

September 25th, 2012, 05:19 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,890

Time spent in forums: 6 Months 2 Days 18 h 6 m 51 sec
Reputation Power: 4192

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. I'm available for hire at Dynamic Site Solutions.

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).

September 25th, 2012, 06:30 PM

BlackAce

Contributing User

Join Date: Jun 2010

Posts: 164

Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 44

Quote:

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.

September 25th, 2012, 09:41 PM

BlackAce

Contributing User

Join Date: Jun 2010

Posts: 164

Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 44

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.

Using setInterval to rotate div content

Developer Shed Advertisers and Affiliates