Question

Assuming I have an array of names:

var myarray = ["A", "B", "C", "D", ... "J"]

Say if I have 10 entries in my array and I only want to show 3 at any given time. How do I make it such that each entry, if shown, is shown in a div of red color with a “Back” link and a “Next” link? When I click next, it will show the next 3; when I click on previous it will show the previous 3.

Example:

Initially 3 Divs are Shown

"A"  "B"  "C"

Clicking on “next” shows

"D" "E" "F"

Clicking on “previous” shows

"A" "B" "C"

Clicking on “next” 3 times shows only 1 div
“J”

How to go about this with Javascript or jQuery? Any sample is appreciated.

Answer 1

Just whipped something up really quickly. I assume there is a better pattern for this… But it should work for any array full of whatever.

This has ‘next’ and ‘prev’ buttons: http://jsfiddle.net/aEYSB/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    };

    $( '#next' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === limit ){ break; }
        index++;
      }
    });

    $( '#prev' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        if( index === 0 ){ break; }
        index--;
      }
      var p = $( 'p' ).get().reverse();
      container.empty().append( p );
    });
})();​

This will form a continuous carousel: http://jsfiddle.net/fSNhK/

(function(){
    var index = 0,
        increment = 3,
        container = $( '#container' ),
        arr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ],
        len = arr.length,
        limit = len - 1,

    renderMarkup = function(){
      var markup = [
        '<p>' + arr[index] + '</p>' 
      ];
      container.append( markup.join( '' ) );        
    },

    controlIndex = function(){
      ( index === limit ) ? index = 0 : index++;
    };

    $( '#toggle' ).click( function(){
      container.empty();
      for( var i = 0; i < increment; i++ ){
        renderMarkup();
        controlIndex();
      }
    });
})();​