Peter Velichkov's Blog

// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var pagerPageHeight = $('warper').getSize().y;
var contentArea = $('content');
var pagerCurPage = 1;
var pagerPagesCount = 1;
var pagerPages = $('pager');
 
var pagerInit = function(){
 
	var contentHeight = contentArea.getSize().y ;
	pagerPagesCount = (contentHeight / pagerPageHeight).toInt();
	if (contentHeight % pagerPageHeight != 0 ) pagerPagesCount++;
	if (pagerPagesCount === 1) return;
 
	var prev = new Element('a', {
			'class': 'cust-pager-prev',
			'html': '&lt',
			'id': 'cust-pager-prev',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage - 1);
				}
			}
		});
 
	var next = new Element('a', {
			'class': 'cust-pager-next',
			'html': '&gt',
			'id': 'cust-pager-next',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage + 1);
				}
			}
	});	
 
	prev.inject(pagerPages,'top');
	$('cust-pager-prev').setStyle('display','none');
 
	for (var i=1; i<=pagerPagesCount; i++){
		var anchor = new Element('a', {
			'class': 'cust-pager-item',
			'id': 'cust-pager-item-'+ i,
			'html': i,
			'events': {
				'click': pagerChangePage.pass(i)
			}
		});
		anchor.inject(pagerPages);
	}
 
	next.inject(pagerPages,'bottom');
};
 
var pagerChangePage = function(page){
	$('cust-pager-item-' + pagerCurPage).set('class', 'cust-pager-item');
	$('cust-pager-item-' + page).set('class', 'cust-pager-item-sel');
 
	pagerCurPage = page;
 
	if (pagerCurPage === 1) {
		$('cust-pager-prev').setStyle('display', 'none');
	}else{
		$('cust-pager-prev').setStyle('display', 'inline');
	}
 
	if (pagerCurPage === pagerPagesCount) {
		$('cust-pager-next').setStyle('display', 'none');
	}else{
		$('cust-pager-next').setStyle('display', 'inline');
	}
 
	contentArea.setStyle('top', (-1) * pagerPageHeight * (page - 1));
};
 
pagerInit();

16 Responses to “Javascript Dynamic Paging (MooTools Pager)”

1. Vesko Kolev Says:
   August 17th, 2008 at 9:23 pm

   Great idea!

2. Peter Says:
   August 18th, 2008 at 9:28 pm

   Thanks – Haven’t figured it all by myself

3. bhaarathiya Says:
   December 30th, 2008 at 4:16 pm

   It is not working when i used ..please tel me how to use this

4. Peter Says:
   January 2nd, 2009 at 11:13 pm

   refer to the example

5. mehul shah Says:
   February 2nd, 2009 at 10:36 am

   its not working please tell me how to use this paging
   please its urgent
   please tell on this mail address…..

6. Peter Says:
   February 2nd, 2009 at 11:28 am

   Did you checked the example? It is quite simple

7. doubleop Says:
   February 19th, 2009 at 8:45 pm

   hi, im having problem, pager does not appear it ends on something like check screenshot http://img142.imageshack.us/my.php?image=51917501da6.jpg
   any ideas ? thanks…

8. damien Says:
   March 20th, 2009 at 1:48 am

   Beautiful, works like a charm…
   it’s a great job…since it’s open to customization

   thanks for the code !

9. pardi Says:
   April 22nd, 2009 at 1:12 pm

   its not fully working in chrome browser..?

10. Peter Says:
    April 22nd, 2009 at 1:43 pm

    @pardi – Haven’t tested, maybe mootools has some problem with chrome. Will check it soon.

11. will Says:
    June 9th, 2009 at 12:43 pm

    This script is very handy, thanks

    Just want to mention your code above contains escaped characters

    i.e. < instead of <

12. Paul Says:
    June 15th, 2009 at 3:15 pm

    @Peter

    Great script, I’m going to use it One note – you should use ‘visible: none’ instead of ‘display: hidden’ for ” symbols since using second one causes whole pager to change it’s position after user clicks on it.

13. Peter Says:
    June 15th, 2009 at 3:21 pm

    @ Paul – I guess you are refering to visible:hidden instead of display:none, but yeah it makes sense

14. Ute Says:
    November 25th, 2009 at 2:28 pm

    Great job, thanks a lot!

15. Darby Says:
    December 10th, 2009 at 6:22 am

    Loved it. It would be awesome if you can have a scrollbar within the content section as well. Is this possible?

16. Peter Says:
    December 10th, 2009 at 12:12 pm

    @Darby – It should be, play with the overflow property of the container

Leave a Reply