All geek questions in one place

Navigating divs in an interval - jQuery

I have a list of about 30 divs (see below.) And would like to hear any suggestions on how to best rotate them by sliding in one at the top and removing one from the bottom at a given time. Something like every 5-10 seconds. Also, despite being on page 30, I would like to show a list of 10 and show the rest as indicated.

A great example is www.foursquare.com and their recent activity section. I would like to do the same except for a given number of divs and not in real time using ajax.

Any suggestions or a little help pointing me in the right direction are welcome.

<div class="recent-questions">

<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>

<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>

</div>

Thanks in advance for any help or thoughts!

+3
source share
2

... . , , :

<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"></script>
  </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>

, .

+1

jQuery, JavaScript.

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

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

5 .

. ajax, , , 30 div . , divs 20 29. ( 0-29 div). html,

style="display:none"

divs 0-19. :

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--;
}

:

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);
    }
}
+1

Source: https://habr.com/ru/post/1745857/

More articles:


All Articles