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