I've been hoarding a few plugins which I thought it was about time I did some sharing.

They are:

  1. crop - crop any image on the fly using JavaScript only
  2. labelOver - based on an article over at A List Apart an accessible method of compressing forms
  3. pluck - return an array of values for a specific attribute

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

crop

See the crop image example

The crop plugin takes an IMG element and crops them to the dimensions given. The result is a DIV with a background image with the height and width and an offset. The new DIV should also carry across the existing style attributes of the image.

Crops image to dimensions given. If only width (and height), x and y are selected randomly based on the image's height and width.

$("img").crop(x, y, height, width, transparentURL) /* or */
$("img").crop({ x: x, y: y, height: height, width: width, transparentURL: url })

Unfortunately, this slick little plugin requires that pass in the transparent gif URL since IE doesn't support the 'data:' pseudo protocol (which is what I used to generate and transparent gif on the fly)...making it a little less slick in my eyes.

The only thing to watch out for is cropped images should not have any padding. Since we're using a background-image style to create the cropped appearance, it will bleed in to the padding. You can use margin however with the same effect.

Download the crop plugin

labelOver

See the label over example

The labelOver plugin is a follow on from the text hints, but in fact the best practise solution.

It's based on the A List Apart article that demonstrates using a label positioned over the input field.

It's important to enclose the label and input within a div that has the following CSS applied:

DIV { position: relative; float: left; }
LABEL.over-apply { color: #ccc; position: absolute; top: 5px; left: 5px;}

Obviously the top and left will depend on your own CSS, but it's easy to play with in Firbug to get the CSS just right.

Then apply the plugin using:

$('label').labelOver('over-apply')

The best way to understand how it works is to view the example, then view it with JavaScript turned off, and then CSS turned off.

Download the labelOver plugin

pluck

Finally, pluck is a plugin inspired by a comment on Dustin Diaz's web site by Dean Edwards that I found I needed in a project I was working on lately.

It simply returns an array of attributes from the matched selector - simple, but useful enough to save me some coding time and maybe even share-worthy.

I used it to validate a form contained non-blank values:

if (jQuery.grep(jQuery('form :input').pluck('value'), function(e) {
  return (e.length == 0);
}).length) {
  submit.attr('disabled', 'disabled');
} else {
  submit.attr('disabled', '');
}

Download the pluck plugin here