David John Farmer
My quick playground for bits of JQuery and code...

Free JQuery Plugins

These plugins only depend on JQuery (and your own code) - super lightweight but really useful. Remember to combine plugins into a single file for quicker downloads... minify too if you wish.

I wrote these simple plugins as I found myself reusing the same code over and over... I'm sure someone out there will find them useful / time saving!

MaintainRatio Example Usage

The div below is 100% wide (with a cover-sized background image), it has no height set in CSS and as the window resizes it will maintain it's aspect ratio:

Im Square on Resize

Download MaintainRatio

AbsoluteMiddle & MaintainRadio Example Usage

When using MaintainRatio you don't have to set it to be a square (you set a ratio), you can also set an offset.

The example below also shows use of AbsoluteMiddle - this sets an absolutely positioned element vertically to the middle, regardless of its parent size or how big it is (responsive too).

Note: Your 'in the middle' element must be absolutely positioned, and the parent item must be relative.

Im Rectange on Resize and my label is slightly longer

Download AbsoluteMiddle

SyncHeights Example Usage

Works when you have multiple rows (like a product grid):

Some text goes here
Some more text goes here
Event more extra text goes here
Text
Some text goes here
Some more text goes here
Event more extra text goes here
Text

Accounts for some items having padding, others without:

This div has some bottom padding and more content, like some words here...
This div has no padding, but is the same height!

And you can set extra padding (e.g. min-height + some pixels):

Some text
Some more text goes here

In this example, the child elements are run through the SyncHeights sizing before the parent items (so it works on complicated product panels for example):

Product name
Some text goes here that further describes the product
30% off
£30.00
A much longer product name to show SyncHeights in action
Some text goes here that further describes the product, this description is much longer than the other
This item was previously £14.00
£30.00

At the moment SyncHeights works as shown below (there is no specific CSS or HTML):

Download SyncHeights

ListToTabs Example Usage

My demo pages use this (the tabs below are the demo). These are great for SEO as the content renders prior to being shifted into tabs.

Download ListToTabs