GroupRows Plugin for jQuery

Demo

Click here to view the demo

How To Use

Download

$("table").groupRows({
  groupColumn: iColumnIndex
});

Options

Option Type Default
groupColumn Integer 0
ignoreFirstRow Boolean True
columnsForGroupRow Integer Array []

Methods

Name Example Purpose
destroy $.groupRows.destroy(table); Remove the current groupings from the table.

Description

This plugin will group the rows of a table together based on a column you specify.  It goes from the top of the table to the bottom and starts a new group whenever it finds new content in the column you specified.

It is useful for making large tables easier for users to scan and understand.  The demo is an example of a long table of steps to perform for certain processes.  Users can group by roles or products to make the table easier to understand.  You could also use additional javascript to auto expand groups based on the statuses of the records in the group.

The “columnsForGroupRow” can be used to display the content of columns from the first record in a group on the group row itself.  An example is showing the subject from every group’s first record on the group rows themselves so users can even more quickly gain an understand of groups.

Advertisements

jQuery Thumbnail Hover Popup for Greasemonkey

Demo

Click here to view the demo

How To Use

Download

$("img").thumbPopup({
  imgSmallFlag: "_s",
  imgLargeFlag: "_l"
});

Options

Option Type Default
popupId String thumbPopup
popupCSS Properties {‘border’: ‘1px solid #000000’, ‘background’: ‘#FFFFFF’}
imgSmallFlag String _t
imgLargeFlag String _l
cursorTopOffset Integer 15
cursorLeftOffset Integer 15
loadingHtml HTML <span style=”padding:5px;”>Loading</span>

Description

This plugin will display a thumbnail’s larger image like a tooltip when you hover over the thumbnail.  I originally made the plugin for Greasemonkey so I could preview larger images on certain sites without having to click to the next page.  It also works great when implemented directly on a site.

This plugin can be used on sites whose thumbnails and larger images have almost the exact same filenames except for one piece that changes between the two.  Here are some example sites, the filename conventions they use, and example userscripts for Greasemonkey:

Size Flickr Vi.sualize.us TinyPic
Small filename_s.jpg filename_m.jpg filename_th.jpg
Medium filename_m.jpg
Large filename.jpg filename_h.jpg filename.jpg
Userscript Userscript Userscript