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

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

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

  2. [...] crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there [...]

  3. [...] crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there [...]

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

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

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

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

  8. [...] jQuery Crop – crop any image on the fly [...]

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

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

  11. [...] 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 [...]

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

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

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

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

  16. thx, good plugin

  17. never updated labelOver to use offset/dimensions?

  18. 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')
    });
    
  19. 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

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

  21. Further to Justin’s problem, I’ve found that if I drag and drop text onto a field, the label stays visible until I click in the field. An example of this scenario may be when a user is emailed a password; they select the password text in the email, drag, and drop it onto a field. The text appears correctly in the field; however, the label is still visible over the field causing a mess of characters. Granted, many users would probably copy and paste into the field, but a drag and drop is plausible. Any thoughts on how to hide the label on a text-drop into a field?

    BTW, thanks for an excellent plug-in.

  22. I am looking for a suitable chop plug-in for jQuery and PHP/Python back-end. The back-end operation is quite easy, which can be processed by ImageMagick/GD2/PIL. The chop plug-in works fine, however I expect the user can use an selection box over the target image to chop, rather than entering the pix figures.

  23. There’s a problem when Chrome 6 does an autofill on labelOver fields. When it fills the fields with values, the labels positioned over the fields remain visible. Perhaps the plug-in needs to somehow detect when the field contains a value / not empty / value change, and hide the label in that event. Beyond my jQuery skills unfortunately. A great plug-in otherwise.

Leave a Reply
Not required

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