“the j stands for Justicer”
about me | research blog | wordpress plugins | jQuery plugins

29 July, 2011

jQuery Clear-on-Focus Plugin

A small jQuery plugin I wrote which I thought I would make public. Instead of using <label> elements for each of your form’s fields, use the input’s value attribute to set the label. Clear-on-focus will then take care of clearing the value when a user clicks or focuses the field. If they leave the field blank, the original message is reset back. Also works correctly for password fields. Example usage:

<input type="text" name="username" value="Enter username" class="clear-on-focus" />
<input type="text" name="password" value="Enter password" class="clear-on-focus password" />

Link: github repository

16 December, 2010

jQuery Tiler Plugin

A new plugin I’m in the process of creating, for neatly tiling boxes of different dimensions into a grid.

If you have ever created tiled a layout by floating a bunch of boxes together, you may have noticed that when these boxes have different dimensions ( heights/widths) you end up with a lot of space and an altogther un-neat layout (Figure A):

Figure A: Floating of different-sized blocks leaves a lot of white space.

Figure B: By using the jquery-tiler plugin our boxes are now neatly stacked

The tiler plugin fixes this by greedily inserting each box into the column which is “shortest”, resulting in something like that in Figure B.

Note how the order of the boxes has changed. To me this is acceptable, but more importantly it is somewhat unavoidable (as someone wise used to tell me, “you have to break eggs if you want to make an omelette”).

Note that in this scenario all boxes are forced into fixed column widths. There is also some support for varying widths (i.e. preserving the width of each box) however it is far from complete. Will implement this when I have some more time (and a few more brain waves).

Anyway if you want to try it out, the git repository is here: http://github.com/johnjcamilleri/jquery-tiler

28 September, 2010

jQuery Autoscale Plugin

This simple plugin basically takes a source and a target element (could be the same element) and shrinks the font-size in the target when the length of the content in the source increases.

Demo

Download

jQuery Spincrement Plugin

This is my first jQuery plugin!

It basically takes an element (div, td etc) containing a number and increments up or down to that value.

Demo

Download