CODEWITHSUNDEEP
jquery
Cyr
Cyr

Reputation: 77

jQuery show 5 list one at a time

this has been bugging me for days now . . . so i have this layout

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

and this is my function

function changePage(){
    var limit = 5; //number of list to show
    var pages = $(".body1");
    var pageul = $(".body1 ul");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){
        $.cookie('pg', 0); // just the cookie to retain current div on display when refresh
    }
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pageul).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    $(pages[c]).find('li:lt('+limit+')').fadeIn(2000); //fadein the lists
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    window.setTimeout(changePage, 10000); //run every 10 sec
}

what im trying to do is display all divs in loop with 10 secs interval, but if one div has more list than limit then split the list by displaying 5(limit) every 10 secs, and when reach the last one then continue looping the divs..

am i on the right track? or i need to a different approach?

im quite new to jquery so pls bear with me

Upvotes: 2

Views: 368

Answers (2)

Cyr
Cyr

Reputation: 77

Working now, silly me all i need was to call window.setTimeout(changePage, 10000); after clearInterval lol..

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
        <li>Name 4</li>
        <li>Name 5</li>
        <li>Name 6</li>
        <li>Name 7</li>        
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

function changePage(){
    var limit = 6; //number of list to show
    var pages = $(".body1");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){$.cookie('pg', 0);} // just the cookie to retain current div on display when refresh
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pages).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    if($(pages[c]).find("ul li:not(.heading)").length > limit){
        $(pages).find('li:lt('+(limit+1)+')').fadeIn(2000);
        var grpli = Math.ceil($(pages[c]).find("ul li:not(.heading)").length/limit);
        var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 1; //increment
            gt = (limit*(timesRun+1))-5;
            if(timesRun === grpli-1){clearInterval(interval); window.setTimeout(changePage, 10000);}else{window.clearTimeout(timer);} // fixed by calling setTime out again
            $(pages).find('li:not(.heading)').hide(); //hide all lists again
            $(pages).find('li:gt('+gt+'):lt('+gt+')').fadeIn(2000); //show 5 lists between gt and lt
        }, 10000); 
    }else{
        $(pages[c]).find('li:lt('+limit+')').fadeIn(2000);
    }
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    var timer = window.setTimeout(changePage, 10000); //run every 10 sec
}
changePage();

Upvotes: 0

MarioDS
MarioDS

Reputation: 13063

A quick debug shows that c is a String when retrieved from the cookie. You cannot use this as an index for the jQuery object, you need to parse it into an integer first. So this line:

var c = $.cookie('pg');

Changes into:

var c = parseInt($.cookie('pg'), 10); // parseInt(string, radix)

(radix is the base of the number system you're working in, in this case decimal aka base 10).

> updated jsFiddle (I changed the limit to 8 to make it more clear).

(I don't know if jQuery supports a way to retrieve the nth element from a jQuery object with a string, but going through the docs it doesn't seem to be the case).

Upvotes: 1

Related Questions