Results 1 to 9 of 9

Thread: Help with the rotating js file?

  1. #1
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default Help with the rotating js file?

    Hey I have a tiny little rotating/randomizing js file that works really really well.

    See it here:

    Code:
    divs = ['d1','d2','d3','d4','d5'];
    
    function hideDivs() {
    for (var i=0; i<divs.length; i++)
    document.getElementById(divs[i]).style.display = 'none';
    }
    
    function showDiv() {
    hideDivs(); //hide them all before we show the next one.
    var randomDiv = divs[Math.floor(Math.random()*divs.length)];
    var div = document.getElementById(randomDiv).style.display =
    'block';
    
    setTimeout(showDiv,8000); //set a delay before showing the next div
    }
    Told you it was tiny.

    Now basically what this does is it takes specific divs in my html and hides them, then picks one at random and displays it, rotate, repeat. Like I said, it works great.

    The problem? I don't want it to be random any more. I just want it to scroll through the divs one at a time and display them then start over at 1 when it reaches the end.

    What do I re-write to make it stop being random? I know WHERE, I just don't know HOW. Everything I have tried breaks it all together.

    Help?
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I'm not that good at js, but wouldn't it be:
    Code:
    setTimeout(showDiv(),8000);
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    That won't remove the randomization though...
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    But wouldn't it be like that though?
    Jeremy | jfein.net

  5. #5
    Join Date
    Feb 2008
    Posts
    42
    Thanks
    0
    Thanked 13 Times in 13 Posts

    Thumbs up

    maybe this will work?
    Code:
    divs = ['d1','d2','d3','d4','d5'];
    thisDiv=1;
    
    function hideDivs() {
     for (i=0; i<divs.length; i++){
      document.getElementById(divs[i]).style.display = 'none';
     }
    }
    
    function showDiv(){
    
     if(thisDiv<=divs.length){
      hideDivs();
      document.getElementById(divs[thisDiv]).style.display = 'block';
      thisDiv++;
    
      if(thisDiv>divs.length){
       thisDiv=1;
      }
     }
    }

  6. #6
    Join Date
    Feb 2008
    Posts
    42
    Thanks
    0
    Thanked 13 Times in 13 Posts

    Default

    oops, and of course you will still need your setTimer(showDiv(),8000)

  7. The Following User Says Thank You to zaphod42 For This Useful Post:

    BLiZZaRD (02-29-2008)

  8. #7
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    That was close enough for me to get it working.

    Code:
    divs = ['d1','d2','d3','d4','d5'];
    thisDiv=0;
    
    function hideDivs() {
     for (i=0; i<divs.length; i++){
      document.getElementById(divs[i]).style.display = 'none';
     }
    }
    
    function showDiv(){
    
     if(thisDiv<=divs.length){
      hideDivs();
      document.getElementById(divs[thisDiv]).style.display = 'block';
      thisDiv++;
    
      if(thisDiv==divs.length){
       thisDiv=0;
      }
     }
    setTimeout(showDiv,8000); //set a delay before showing the next div
    }
    Just made the 3 slight changes in red. Leaving the div # at 1 instead of 0 made it skip the first one completely.

    Then it didn't return to the first div it stopped after reaching the last.

    Changes the > to == in the show function and it loops now

    Perfect! thanks!
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  9. #8
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default Just a little change

    I think it's simpler.

    Code:
    divs = ['d1','d2','d3','d4','d5'];
    thisDiv=0;
    
    function hideDivs() {
     for (i=0; i<divs.length; i++){
      document.getElementById(divs[i]).style.display = 'none';
     }
    }
    
    function showDiv(){
    
     if(thisDiv<=divs.length){
      hideDivs();
     document.getElementById(divs[thisDiv%divs.length]).style.display = 'block';
      thisDiv++;
    
     }
    setTimeout(showDiv,8000); //set a delay before showing the next div
    }
    Thinking about it, shouldn't the setTimeout be replaced by a setInterval that is outside of the function. That would allow you to stop calling the function if you wanted.

    Just my 2 cents/pence.
    Last edited by Bob90; 03-03-2008 at 02:49 PM. Reason: extra info

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Good point Bob90, might as well declare an object and be specific when creating variables though to protect the global environment:

    Code:
    var showDiv={
    divs:['d1','d2','d3','d4','d5'], //Set divisions
    i:3000, //Set Interval
    c:0,t:0,
    hide:function(){
     for (var i=0; i<this.divs.length; i++)
      document.getElementById(this.divs[i]).style.display = 'none';
    },
    doIt:function(){
    this.hide();
     document.getElementById(this.divs[this.c%this.divs.length]).style.display = 'block';
      this.c++;
    },
    init:function(){
    clearInterval(this.t);
    var o=this, g=function(){o.doIt();};
    g();
    o.t=setInterval(g, o.i);
    }
    };
    showDiv.init();
    With setInterval, as Bob90 suggests, it can now be turned on and off. This will stop it:

    Code:
    clearInterval(showDiv.t);
    This starts/resumes it:

    Code:
    showDiv.init();
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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