~ overflow ~

Problem:

Highlighting a checkbox or radio button on error with jquery’s validator plugin is not a good idea, specially if you’re adding borders , backgrounds or something like, since it’s NOT supported over all browsers. I have a little bar around them that goes red if something is wrong, however, it’s not possible to add it if there’s many elements, so it’s better add a wrapper element and style it, in my case i added an element which ID is the same of input NAME, a little change on the plugin make things automatic.

Solution:

		highlight: function( element, errorClass, validClass ) {
			$(element).addClass(errorClass).removeClass(validClass);
			if (($(element).attr("type") == "radio" || $(element).attr("type") == "checkbox") && $("#"+$(element).attr("name")).length > 0)
				$("#"+$(element).attr("name")).addClass(errorClass).removeClass(validClass);
		},
		unhighlight: function( element, errorClass, validClass ) {
			$(element).removeClass(errorClass).addClass(validClass);
			if (($(element).attr("type") == "radio" || $(element).attr("type") == "checkbox") && $("#"+$(element).attr("name")).length > 0)
				$("#"+$(element).attr("name")).removeClass(errorClass).addClass(validClass);
		}

Problem:

I have a form where user sends a image and, if needed, he will select an area of the image for cropping. Everything is loaded by AJAX and image size is dynamic, nothing wrong with Jcrop but overlay is not able to work right if there’s no width set the div floats at wrong position.

The setup of the form is quite complex (uploadify + jQuery tools overlay + Jcrop + AJAX), so it was complicated isolating the issue.

Solution:

By adding a image height / width reply to the ajax after image upload, setting the overlay container css width with it and reloading the overlay call fixed the issue.
Here’s a snippet:

				$("#crop_container").css({
					height:"auto",
					width: r.w+"px"
				}).overlay({
					speed: 500,
					fixed:false,
					closeOnClick: false,
					closeOnEsc: false,
					oneInstance: true,
					mask: {
						color: '#fff',
						opacity: 0.5
					}
				});

				$("#crop_container > span").html("<img height="+r.h+" width="+r.w+" src='"+img+"?"+Math.random()+"' id='crop_img'>");