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

by Justin Meyer

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

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.

posted 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.

Getting Started with Cordova

Brian Moschelposted in Development on March 26, 2015 by Brian MoschelAt Bitovi, we’re big fans of building applications with web technologies and using build tools to target other platforms like iOS, Android, and desktop. This article will provide a quick guide to getting up and running quickly with Cordova.

Web Application Theory

Justin Meyerposted in Development on June 27, 2014 by Justin MeyerUnderstand the technology and architecture choices Bitovi make and why we make them. What Bitovi does and why.

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