jQuery Plugin: TinyPagination

On February 6, 2012, in CSS, HTML, JavaScript, by Mewes Kochheim


With this plugin I tried to achieve the goal to have a fully functional pagination for usage in areas with a very limited amount of space, like sidebars. To make the pagination more compact it shows by default only the “first”, “previous”, “next”, “last” button, together with a button showing the current page. After clicking on that last mentioned button, a list with proceeding and following pages will be displayed. Those list are shown vertically following the idea that i should be used for sidebars. This kind of layout allows to have huge numbers of pages (several hundreds) without the pagination to screw the overall page layout.


.tinypagination( options )

  • options A map of data containing the user settings.  All settings are optional.

.tinypagination( method [, parameter1 [, parameter2] ] )

  • method A string containing the name of the method to be called.


Name Default Value Description
change function(page, sender) {} Callback function called everytime the page value changes.
classBig tpBig The class name representing the big button.
classBottom tpBottom The class name representing the bottom page list.
classButton tpButton The class name representing all buttons excluding the list buttons.
classList tpList The class name representing both page lists.
classListButton tpListButton The class name representing the list buttons.
classSmall tpSmall The class name representing the all small buttons.
classTop tpTop The class name representing the top page list.
contentFirst << The content of the “first” button.
contentLast >> The content of the “last” button.
contentNext > The content of the “next” button.
contentPrevious < The content of the “previous” button.
contentSeperator / The seperator used for the “current” button t o seperate the current page from the max. page.
current 1 The page currently visible page. The first page is 1, not 0.
pages 1 The amount of pages.
steps [1, 2, 3] The steps used for the page lists. [1,2,3,8] would generate for page 50 the following page lists: [42,47,48,49], [51,52,53,58]
tag div The tag used for all HTML elements the plugin is creating.


Name Parameters Description
destroy Destroys the HTML elements and event handlers created by the plugin.
first Jumps to the first page.
previous Jumps to the previous page.
next Jumps to the next page.
last Jumps to the last page.
page int page Jumps to the given page.
exists int page Checks whether the given page exists. Returns true or false.
options object options, boolean reinit Expands the internal options object with the given options. If reinit is set to true, the pagination will be re-initialized.


<div id="list">
<div id="title">Persons</div>
<ul id="items">
	<li>Person 1</li>
	<li>Person 2</li>
	<li>Person 3</li>
	<li>Person 4</li>
	<li>Person 5</li>
	<li>Person 6</li>
	<li>Person 7</li>
	<li>Person 8</li>
	<li>Person 9</li>
	<li>Person 10</li>
<div id="pagination"></div>


// Init
    'current' : 1,
    'pages' : 50,
    'change' : function(page, sender) {
        var items = $('#items li');
        for (var i = 0; i < items.length; i++) {
            $(items.get(i)).html('Person ' + ((page - 1) * 10 + i + 1));

// Public methods
$('#pagination').tinypagination('page', 7);
  { 'current' : 7, 'steps' : [2,4,6] });
  { 'current' : 7, 'steps' : [2,4,6] }, true);
console.log($('#pagination').tinypagination('exists', 40));



Tagged with:  

jQuery Plugin: keysequence Event

On March 26, 2011, in JavaScript, by Mewes Kochheim


This plugin adds a new event to jQuery. It works similar to the keydown, keyup and keypress events but instead of getting fired for each key it will only get fired if a specified key code combination was entered. Therefore it shares the behaviour with the other key events. This means that the element with the event must have the focus to capture the entered keys.

Initially this plugin was only designed to add the Konami Code to a web site. But after some cleaning it became a customizable event. Additionally it comes with a helper class called KeySequenceHelper to convert strings to key code arrays and the other way around.


.keysequence( sequence, handler(eventObject) )

  • sequence An array of key codes which trigger the event.
  • handler(eventObject) A function to execute each time the event is triggered.

.keysequence( sequence, [ eventData ], handler(eventObject) )

  • sequence An array of key codes which trigger the event.
  • eventData A map of data that will be passed to the event handler. (optional)
  • handler(eventObject) A function to execute each time the event is triggered.



// event initialization with a key code array
var keyCodeArray = [65,67,68,69];
$(window).keysequence(keyCodeArray, function(event) {
	var string = KeySequenceHelper.keyCodeArrayToString(event.sequence);
	$('body').append(event.sequence)); // 65, 67, 68, 69
	$('body').append(string); // ABCD

// event initialization with a string
var keyCodeArray = KeySequenceHelper.stringToKeyCodeArray('foobar');
$(window).keysequence(keyCodeArray, function(event) {
	var string = KeySequenceHelper.keyCodeArrayToString(event.sequence);
	$('body').append(string); // FOOBAR

// event initialization with the Konami Code
$(window).keysequence(KeySequenceHelper.konamiCode, function(event) {

// manual event triggering


Tagged with: