Set inner/outer width/height with jQuery Dimensions.Etc Plugin

You often want to animate or set an object to be a specific width or height on the page. But if that element has padding, border, or margin, it will probably take up more space than you expect. The jquery.dimensions.etc.js plugin lets you set and animate the outerWidth, outerHeight, innerWidth and innerHeight of DOM elements.

posted in open-source, in javascriptmvc, in jquery, in Development on June 10, 2010 by Justin Meyer

You often want to animate or set an object to be a specific width or height on the page. But if that element has padding, border, or margin, it will probably take up more space than you expect. The jquery.dimensions.etc.js plugin lets you set and animate the outerWidth, outerHeight, innerWidth and innerHeight of DOM elements.

Download

jquery.dimensions.etc.js (minified 2kb)

Features

  • Set and animate innerWidth, innerHeight, outerWidth, and outerHeight.
  • Fast. Uses the curStyles plugin.

Demo

Change the dimensions of an element in the dimensions demo.

Documentation

Read JavaScriptMVC’s dimensions docs.

Use

Setting and animating the dimensions with the innerWidth, innerHeight, outerWidth, and outerHeight helpers is pretty straightforward:

// include padding
$('#foo').innerHeight(20)
$('#foo').animate({innerWidth: 80})

// include padding + border
$('#bar').outerHeight(40)
$('#bar').animate({outerWidth: 40})

// padding + border + margin
$('#zed').outerHeight(50, true)
$('#zed').animate({outerWidthMargin: 600})

The numeric value is the length of the dimension in pixels.

These helpers adjust the height and width of the element but include the padding, border, and margin in their calculation. For example, setting outerHeight(40) on an element with "padding:5; border: solid 1px black" will have it’s height set to 40 - 2*5 - 2*1 = 28.

Conclusions

We use outerWidth and outerHeight quite often to make an element the size we want it to appear on the page. It enables us to use and adjust border and padding on most widgets we create. Before outerWidth and outerHeight, we had to manually adjust for border and padding. Hopefully you can avoid our problem by making use of this plugin. Good luck.

comments powered by Disqus
Contact Us
(312) 620-0386 | contact@bitovi.com
 or cancel