OuterHeight in Prototype

Jquery comes with some sweet utils that prototype users miss out on sometimes. One of my recent discoveries is outerHeight. Prototype comes with Element.getHeight() method, which only gives you the actual height of the element discounting the margins, borders, and padding. Outerheight in jquery gives you the whole thing. Here is the implementation for Prototype:

Element.addMethods({
	outerHeight: function(element) {
		var height = Number(element.getStyle('height').slice(0,-2));
    	var padding = Number(element.getStyle('padding-top').slice(0,-2)) + Number(element.getStyle('padding-bottom').slice(0,-2));
    	var margin = Number(element.getStyle('margin-top').slice(0,-2)) + Number(element.getStyle('margin-bottom').slice(0,-2));
    	var border = Number(element.getStyle('border-top').slice(0,-2)) + Number(element.getStyle('border-bottom').slice(0,-2));
    	return height + padding + margin + border;
	}
});

Now you can get the height of any element you want with just $("mydiv").outerHeight();

Advertisements

2 Responses to OuterHeight in Prototype

  1. Matt James says:

    Hey, as a heads up, this method doesn’t work if the element you are trying to get an outer height for is not being displayed.

    A better solution would be to use element.getHeight() which is specifically designed to work on elements that are not currently being displayed. Note, however, that this change will also require that you no longer add in padding and border size since those are included in the offsetHeight which is what Prototype uses internally when you ask it for getHeight().

    One final cool thing is that this also ends up being a lot less code.

  2. Prashant Kumar says:

    Hi,
    It seems that element.getStyle(‘border-top’) method is not working for IE8 and google chrome. I have been facing this problem recently. Is there any fix to this problem.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: