Gilles Ruppert

I know it’s been a while. I started about 5 posts, but haven’t finished any of them… 

Hopefully this makes up for it: as a treat for the new year, I thought a little jQuery plugin that I wrote would be handy for some people: please welcome Elpaginator!

What it does:

It looks for a ul or ol within a wrapper & adds pagination depending on the maximum number of items specified.

Features:

• paginates if there are more items than the user specified
• displays number of items left or pages, i.e. 1-10, 11-20, etc or 1, 2, etc
• html of pagination is fully configurable (wrapper need to contain class of page-list!)
• the number of the list item if ordered list is used is correct (uses start attribute that is deprecated, but there is no real alternative yet as IE6 & 7 don’t support CSS for this yet)
• support for ul & ol
• very lightweight (less than 200 lines WITH lots of comments)

You can find the elpaginator script & a demo page in my repository.

Options

This is how you initialise the pagination:

  $('#wrapper').elpaginator();

Possible Options are:

  $('#wrapper').elpaginator({
    MAX: 10,  // maximum number of items per pagination
    list: 'ol',   // whether it's an ul or ol. Default: ul
    style: 'items', // other value is pages -> show 1-5 6-10, etc, or 1, 2,
    paginationHTML: '<div class="pagination"><ul class="page-list"></ul></div>', // HTML for the pagination. Is appended to the wrapper
    paginationListItemHTML: '<li><a href="#"></a></li>' // HTML for the pagination items
  });

A live example of it working can also be seen on the new Top Gear site (look at the sidebar for the lap times table).

We all know the problem: the designers are struggling to get the form elements in the space they have or they decide that having labels next to input fields is not really necessary…
Instead the label is displayed inside the input field & supposed to disappear when the user clicks or focuses on the field.

I’ve come across this quite often lately, so I quickly put a little jQuery plugin together to make my life a bit easier.

It works on input fields and it works just like any other jQuery plugin.

All you need to do is call the plugin with the selectors you are interested in, i.e.
$('input:text.email').autoInputLabel();

The options are specified in an object literal & can be:

• blurColor – colour of the text when the label is displayed
• focusColor – colour of the active text, i.e. user input
• value – the label that should be displayed

By default, the plugin displays the value of the value attribute. If there is none, it checks whether there has been a value provided by the user. Otherwise it looks for the label associated with the input field (that is probably hidden, otherwise why would you use the plugin?). The label needs to be associated to the input field with the for attribute.

The plugin only works on <input type="text"> fields.

You can download the latest version from my public svn repository