Check out my latest project: Full Frontal JavaScript Conference
19 Mar

A few more jQuery plugins: crop, labelOver and pluck

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

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

70 Responses to “A few more jQuery plugins: crop, labelOver and pluck”

1 2 3 4
  1. Jquery的N个插件 | php技术交流|我是陈|54chen.com November 16th, 2008 at 10:18 am

    [...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image Reflection. 十一、Google地图（Google Map） jQuery Plugin googlemaps. jMaps jQuery [...]

  2. 240 plus Jquery plugins | Center Of Spotlight November 18th, 2008 at 1:43 am

    [...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]

  3. 240多个jQuery插件 | Offar’s Blog November 22nd, 2008 at 2:39 pm

    [...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]

  4. 240jQuery - memory ’s blog November 23rd, 2008 at 5:52 am

    [...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]

  5. jQuery好用的240 plugin list | 偉士牌的實驗室 January 5th, 2009 at 6:21 am

    [...] jQuery Cycle Plugin. jQuery Flickr. jQuery Lazy Load Images Plugin. Zoomi - Zoomable Thumbnails. jQuery Crop - crop any image on the fly. Image [...]

  6. trendbender February 7th, 2009 at 3:03 pm

    thx, good plugin

  7. Roo March 8th, 2009 at 5:59 am

    never updated labelOver to use offset/dimensions?

  8. Justin Perry March 18th, 2009 at 4:54 pm

    This is a great plugin. Thanks.

    I came across a minor issue...
    Where the text in the label element is only re-positioned using a negative text-indent, the label itself is still positioned over the text input, meaning that the user is unable to drag (or double click) to highlight the text in the input field. Not sure if anyone has experienced this or not, but a quick workaround below sorted it...

    I made a few simple mods...basically, changing text-indent property to left and then storing the label position in a variable to revert to when the input is empty:

    
jQuery.fn.labelOver = function(overClass) {
	return this.each(function(){
		var label = jQuery(this);
		var labelOrigPos;
		var f = label.attr('for');

		if (f) {
			var input = jQuery('#' + f);

			this.hide = function() {
			  label.css({ left: -10000 })
			}

			this.show = function() {
			   if (input.val() == '') label.css('left', labelOrigPos )
			}

			// handlers
			input.focus(this.hide);
			input.blur(this.show);
		  label.addClass(overClass).click(function(){ input.focus() });
			 labelOrigPos = label.css('left')
			if (input.val() != '') this.hide();
		}
	})
}
$(document).ready(function(){
	$('label.pre').labelOver('over')
});
  9. Jordan Moore July 30th, 2009 at 10:00 am

    Hey Remy,

    Fantastic plugin. However what would you recommend doing if I only intend to use the labelover in a date of birth field for example with the text "dd/mm/yyyy" as the label, but also a label beside the input to say "Date of Birth".

    I'm sorry I can't be clearer, I guess what I'm saying is can it be used as hint text for a field with another label associated with that field?

    Thanks,
    Jordan

  10. Kris December 11th, 2009 at 4:38 am

    any body have issue with ie6,7 for crop plugin? It does crop but comes with red cross on top left of the picture

1 2 3 4
Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight