javascriptjquerypagination

paginating using .slice selecting too many items


I want to create an automatic pager that I can configure using parameters within the url. If I hardcode the perTime variable it works. The moment I use the parameter from the URL the page starts acting strange.

You can see what happens here: http://risevision.syntra-limburg.be/ClassSchedule.aspx?Campus=genk&no_of_items=3&width=300&height=300

I want to show 3 items per page. This works okay for the first 2 pages. On the third it shows me a lot more items per page.

Does somebody knows what is happening? How can I fix this?

$.urlParam = function (name) {
  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
  if (results == null) {
    return null;
  }
  else {
    return results[1] || 0;
  }
}
$(document).ready(function () {
  $(".placeholder").width($.urlParam('width')).height($.urlParam('height'))
  var perTime = $.urlParam('no_of_items');
var $divSlide = $('.item');
var currentCnt = 0;
$divSlide.hide().slice(currentCnt, currentCnt + perTime).show();
var panelCnt = $divSlide.length;
setInterval(function () {
  $divSlide.slice((currentCnt % panelCnt), (currentCnt % panelCnt) + perTime).fadeOut("1600", function () {
    $divSlide.eq((currentCnt + perTime) % panelCnt).fadeIn("1000");
    currentCnt++;
    console.log(perTime);
  });
}, 3000);
});

Solution

  • Just guessing, I'd try parsing $.urlParam('no_of_items');:

    var perTime = parseInt($.urlParam('no_of_items'));
    

    since perTime is a string in your current implementation. I'm not sure how much slice likes that...