CODEWITHSUNDEEP
jqueryhtmlcss
m_73
m_73

Reputation: 569

Box change with number? (jQuery)

I can't understand how can I do it with jQuery.

This is my HTML code:

<div id="contentbox1" class="contentbox">content 1</div>
<div id="contentbox2" class="contentbox" style="display: none;">content 2</div>
<div id="contentbox3" class="contentbox" style="display: none;">content 3</div>
<div id="contentbox4" class="contentbox" style="display: none;">content 4</div>
<div id="contentbox5" class="contentbox" style="display: none;">content 5</div>
<hr />
<div id="pager" class="pager"> <span id="actualpage">1</span>/5</div>

CSS:

div.contentbox {
    width: 300px;
    height: 300px;
    background: #cccccc;
    float: left;
    display: inline;
}
div.pager {
    cursor: pointer;
}
hr {
    display: block;
    clear: both;
    margin: 10px 0px 10px 0px;
}

I can't understand how can I develop it that if I click on #pager to see next box and change first number in #actualpage. Is it possible with jQuery functions?

I tried many ways to do it but without success. This is my JSFIDDLE.

Upvotes: 0

Views: 107

Answers (4)

Devima
Devima

Reputation: 1566

You can use the modulo operator that changes the value of the variable count..simply

var count=1;
   $('#pager').click(function(){
       count++;
       $('.contentbox').hide();
       $('#contentbox'+(count)).show();
       $(this).find('#actualpage').html(count);
       if(count%5==0){count-=5};
   })

Upvotes: 0

SpiderCode
SpiderCode

Reputation: 10122

Make sure that You have included JQuery in your page. Update your JQuery as mentioned below : 

var currentPage = 1;
$("#pager").on("click", function () {
    var nextPage;
    if(currentPage == 5)
    {
        nextPage = 1;
    }
    else
    {
        nextPage = currentPage+1;
    }

    $('#contentbox' + currentPage).hide(500);
    $('#contentbox' + nextPage).show(500);
    currentPage = nextPage;
    $('#actualpage').html(currentPage);

});

  1. Live demo with fading effect

  2. Live demo with sliding effect

Upvotes: 0

neel shah
neel shah

Reputation: 2271

You could do it this way: Fiddle

$("#pager").on("click", function () {
    var temp = $('#actualpage').html();
    $('#contentbox' + temp).attr('style', 'display: none;');
    temp = (parseInt(temp) + 1) % 6;
    temp = temp == 0 ? 1 : temp;
    $('#contentbox' + temp).removeAttr('style');
    $('#actualpage').html(temp);
});

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

I have updated your fiddle and it now works like a circular carousel. See if that helps and ask if you need to change anything.

Demo JSFiddle

$("#pager").on("click", function () {
    var len = $('.contentbox').length;
    var cur = +($('#actualpage').text());
    if (cur === len) cur = 0;
    $('#actualpage').text(cur+1);
    $('.contentbox').hide();
    $('#contentbox' + (cur+1)).show();
});

Upvotes: 1

Related Questions