Warning: array_merge(): Argument #1 is not an array in /home/pfarning/waytoocrowded.com/includes/flickr.php on line 47

Warning: Invalid argument supplied for foreach() in /home/pfarning/waytoocrowded.com/includes/flickr.php on line 176
jQuery support.minHeight | w2c

jQuerysupport.minHeight

20090314718

The latest release of jQuery deprecated the old browser sniffing model in favor of feature detection. I always feel a dirty checking user agent strings but jQuery’s browser object made it simple – and perhaps too easy and convenient. The new support object is just as simple when a built in test is available for the feature. While the list includes a lot of common issues, there are some tests missing for items that more resemble bugs than missing features.

I find a number of cases where I need to know whether the CSS property min-height is available. Most current browsers support it, IE6 being the exception. The fix is to use height in IE6 as it deviates from the specification on the property and actually expands a box to its content’s height, even if a smaller height is specified. Other browsers will cut off at the declared height, as they should. For them, min-height can be used.

Detecting min-height

Given the style object, it’s expected checking for style.minHeight should return a string if the property is available and return null if not. Unfortunately, IE6 isn’t that simple. The property is available and can even be set, it just won’t be applied.

I’ve worked out an extension to the jQuery support object to check if min-height is working. I haven’t given this a rigorous testing and am even conflicted whether it is the right way to deal with the problem, but, for what it is worth, here it is.

jQuery.extend(jQuery.support, {
	minHeight : function() {
		var id = "minheightsupport" + (new Date).getTime();
		$("<div></div>").attr("id",id)
                       .css({
                                  height : "1px",
                                  minHeight : "2px",
                                  overflow : "hidden",
                                  border : "none",
                                  padding : "0",
                                  margin : "0"
                              })
                       .appendTo("body");
		var iscorrectheight = document.getElementById(id).offsetHeight==2;
		$("#"+id).remove();
		return iscorrectheight;
	}
});

The idea is insert an element. Set its height smaller than its min-height then check the computed height of the element. If the computed height equals the min-height, min-height is working. Remove the added element and return a boolean.

It works much the same as the other support objects with the exception of requiring execution. While the standard support objects can be called by

$.support.boxModel

this requires a set of brackets at the end to call the function

$.support.minHeight()

The extra styles are applied to be sure to clear anything that might add to the computed height of the element.

Performance

Worked across a few test cases in Firefox, IE6/7, Safari and Opera but mostly just as demos, not production code. Firebug profile returns around 8ms to execute.

The right thing?

Part of me thinks this is cheating feature detection. It is checking CSS rendering, not DOM support. Perhaps that is left to browser sniffing and conditional comments. A nice thing about jQuery’s extensibility is if/when the browser object gets pulled from the jQuery core, at least it can always be added back as a plugin. Yeah, just some thoughts.


. comments.


Search WayTooCrowded
The Header Should Always Point Home