ansaurus

Question

Sliding through divs at interval - jQuery

Answer 1

+1 A:

It's not particulary jQuery specific, but you just need to use an interval in JavaScript.

function shiftDivs()
{
    $('div:last').remove();
    $('div:first').before(myNewDivElement); // Pseudo
}

setInterval(function()
{
    shiftDivs();
}, 5000);

The interval function will be called every 5 seconds.

I'll give an example. If you won't be doing ajax, you'll probably want to start at the bottom of your 30 divs and move up. So we'll display divs 20 through 29. (assuming 0-29 div indices). You set up your html to initially have

style="display:none"

on divs 0-19. Then, you use this code:

var headIndex = 19;
var intervalId = null;

$(document).ready(function()
{
     intervalId = setInterval(function()
     {
         shiftDivs();

         if(headIndex == -1)
            clearInterval(intervalId);
     }, 5000);
});

function shiftDivs()
{
    $($('div')[headIndex]).slideDown();
    $($('div')[headIndex + 10]).slideUp();
    headIndex--;
}

Additional pause example:

function pauseShift()
{
    if(intervalId != null) // Currently Not Paused
    {
         clearInterval(intervalId);
    }
    else // Paused
    {
         ShiftDivs(); // Only include this if you want the shift to occur immediately on resume
         intervalId = setInterval(function()
         {
             shiftDivs();

             if(headIndex == -1)
                clearInterval(intervalId);
         }, 5000);
    }
}

Tejs 2010-05-17 19:08:08

Thanks Tejs - a bit over my head but I appreciate the help. If you have any more detailed explanations, please let me know.

pixelflips 2010-05-17 19:16:49

Thanks Tejs!!!! You helped me out greatly! Much appreciated

pixelflips 2010-05-17 20:49:31

One more quick one. This may or may not be possible, I'm not sure. Inside each div there is an anchor tag. If this anchor is clicked would it be possible to stop the divs from sliding until it is clicked again??Thanks again for all your help!!

pixelflips 2010-05-17 21:08:02

Ok I have everything in order and it's working great. Thanksvfor all your help and please let me know if you have any ideas about the "pause" idea when you have some time. Thanks again!

pixelflips 2010-05-17 23:27:05

Does anyone have any additional suggestions or ideas for a pause effect on the code used above? Thanks in advance!

pixelflips 2010-05-18 17:16:42

Sure. When you click the button, you need to call clearInterval on the intervalId obtained from setInterval. Then, when you want to resume, you just start a new setInterval on your function.

Tejs 2010-05-19 08:49:10

Hi Tejs! Thanks so much man! I had narrowed it down to clearInterval, but could you give me a simple example. I'm trying to get up to speed with jquery and javascript but somethings are still a bit out of my league. Thanks again!!

pixelflips 2010-05-19 16:25:27

I cant seem to get it to work. Added the code above beneath the first script, is that correct. Basically within each div there is an anchor with a class applied. Clicking it once would stop the shiftDivs and a second click would start it again. Thanks so much for all of your help1!!

pixelflips 2010-05-19 22:34:06

Hi Tejs! Your script is working fantastic but due to being a noob I am unable to get the pause effect to work.Each of the divs contains one anchor like so:<a class="classname">Text</a>The problem is that I am not sure how to make a call to the pauseShift function using that link.Any advice would be greatly appreciated!!

pixelflips 2010-05-21 20:00:20

You would do `<a href="javascript:void(0);" onclick="pauseShift();" class="classname">Text</a>`

Tejs 2010-05-21 22:56:26

Tejs you rock! Thanks so much for all your help. There is one small issue. On the first click the div(s) do pause but on the second click the div(s) don't resume. Any thoughts?Also if you would contact me through my website (www.pixelflips.com). I would like to make a donation for all your help and patience! Or if you have a site let me know and I will get in touch.

pixelflips 2010-05-22 00:09:27

No need - just pay it forward to someone else and help them out!

Tejs 2010-05-22 05:04:18

Answer 2

A:

Hey there... so I've modeled your entire problem into a new file. You should be able to tweak this to get what you need:

<html>
  <head>
    <title>Shift Test</title>
    <style>
       .recentQuestion { border: 1px solid blue; height: 50px; width: 150px; }
    </style>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  </head>
  <body>
     <div style="overflow: hidden; height: 250px;">
     <div class="recentQuestion" id="div0" style="display: none;">
        This is some content 0.
     </div>
     <div class="recentQuestion" id="div1" style="display: none;">
        This is some content 1.
     </div>
     <div class="recentQuestion" id="div2" style="display: none;">
        This is some content 2.
     </div>
     <div class="recentQuestion" id="div3" style="display: none;">
        This is some content 3.
     </div>
     <div class="recentQuestion" id="div4" style="display: none;">
        This is some content 4.
     </div>
     <div class="recentQuestion" id="div5" style="display: none;">
        This is some content 5.
     </div>
     <div class="recentQuestion" id="div6" style="display: none;">
        This is some content 6.
     </div>
     <div class="recentQuestion" id="div7" style="display: none;">
        This is some content 7.
     </div>
     <div class="recentQuestion" id="div8" style="display: none;">
        This is some content 8.
     </div>
     <div class="recentQuestion" id="div9" style="display: none;">
        This is some content 9.
     </div>
     <div class="recentQuestion" id="div10" style="display: none;">
        This is some content 10.
     </div>
     <div class="recentQuestion" id="div11" style="display: none;">
        This is some content 11.
     </div>
     <div class="recentQuestion" id="div12" style="display: none;">
        This is some content 12.
     </div>
     <div class="recentQuestion" id="div13" style="display: none;">
        This is some content 13.
     </div>
     <div class="recentQuestion" id="div14" style="display: none;">
        This is some content 14.
     </div>
     <div class="recentQuestion" id="div15">
        This is some content 15.
     </div>
     <div class="recentQuestion" id="div16">
        This is some content 16.
     </div>
     <div class="recentQuestion" id="div17">
        This is some content 17.
     </div>
     <div class="recentQuestion" id="div18">
        This is some content 18.
     </div>
     <div class="recentQuestion" id="div19">
        This is some content 19.
     </div>
     </div>

     <br/>
     <br/>
     <br/>

     <div style="border: 1px solid red; height: 30px; width: 200px;">
         <a href="javascript:void(0);" id="pauseShifting">Pause / Resume</a>
     </div>

     <script type="text/javascript" language="javascript">
       var intervalId = null;
       var indicesToShow = new Array();

       $(document).ready(function()
       {
          indicesToShow.push(15);
          indicesToShow.push(16);
      indicesToShow.push(17);
      indicesToShow.push(18);
      indicesToShow.push(19);

      intervalId = setInterval(function()
      {
          shiftDivs();
      }, 2000);

      $('#pauseShifting').click(function()
      {
          if(intervalId != null)
          {
             clearInterval(intervalId);
             intervalId = null;
          }
          else
          {
              shiftDivs();
              intervalId = setInterval(function()
              {
                 shiftDivs();
              }, 2000);
          }
      });
   });

   function shiftDivs()
   {
       var newSetOfImages = new Array();

       if(indicesToShow[0] == 0)
       {
          newSetOfImages.push(15);
          newSetOfImages.push(16);
          newSetOfImages.push(17);
          newSetOfImages.push(18);
          newSetOfImages.push(19);

          for(var j = 0; j < 5; j++)
          {
             $('#div' + indicesToShow[j]).slideUp('fast');
             $('#div' + newSetOfImages[j]).slideDown('fast');
          }

          indicesToShow = newSetOfImages;
          return;
       }
       else
          newSetOfImages.push(indicesToShow[0] - 1);

       newSetOfImages.push(indicesToShow[0]);
       newSetOfImages.push(indicesToShow[1]);
       newSetOfImages.push(indicesToShow[2]);
       newSetOfImages.push(indicesToShow[3]);

       $('#div' + indicesToShow[4]).slideUp('fast');
       $('#div' + newSetOfImages[0]).slideDown('fast');

       indicesToShow = newSetOfImages;
   }
 </script>
  </body>
</html>

This solution will automatically roll around to the beginning of the list when you reach the end as well.

Tejs 2010-05-22 05:03:52

Hi Tejs! I owe you big time man! If I can ever do anything to repay you for your help, please let me know! It took me a bit to work out the numbering but now my divs are rotating and the pause/play click works like a charm! Thanks again!

pixelflips 2010-05-24 01:42:46

ansaurus

tags:

views:

answers:

Sliding through divs at interval - jQuery

related questions