Get the overall width/height of an element's children
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

jQuery Content Size plugin

Get the total width/height of an element's children.


This plugin is for getting the real dimensions of an element's children, which don't always match the parent's width and height.

The most common use case would a parent (eg. <ul>) with a set height and CSS style of overflow:hidden. If the <ul> has a variable number of child <li> elements, there is no standard way to get the total height of the <li> children.

With this plugin, simply type:


Function Reference

Three functions are provided:

  • contentWidth() - Get total width of all the given element's children (returns int)
  • contentHeight() - Get total height of all the given element's children (returns int)
  • contentSize() - Get total width and height of all the given element's children (returns {width:int, height:int})

All three functions work by looping through the child elements and for each one, it adds the child's left/top offset to its outerWidth/Height, then returns the maximum combined value.

All functions also accept an optional first parameter for quick mode. If set to true, the function will get the dimensions of the last child only for a speed increase, since in most cases all the children will be in a single line either horizontally or vertically.

eg. $('ul').contentHeight(true); // Enables quick mode

Note: All values returned include the children's margin values