Get the actual width/height of invisible DOM elements with jQuery.
HTML JavaScript
Latest commit d38580c Jan 3, 2017 @ben-lin ben-lin v1.0.19
Permalink
Failed to load latest commit information.
demo v1.0.14 - Support for jQuery 1.9.0 Jan 16, 2013
meteor adding meteor support Feb 2, 2015
.gitignore add .gitignore Mar 16, 2011
CHANGELOG.md v1.0.19 Jan 3, 2017
LICENSE.txt v1.0.9 Aug 16, 2012
README.md v1.0.18 Feb 1, 2016
bower.json v1.0.19 Jan 3, 2017
jquery.actual.js v1.0.19 Jan 3, 2017
jquery.actual.min.js v1.0.19 Jan 3, 2017
package.js v1.0.19 Jan 3, 2017
package.json v1.0.19 Jan 3, 2017

README.md

jQuery Actual Plugin

Get the actual width/height of invisible DOM elements with jQuery.

Description

jQuery has trouble finding the width/height of invisible DOM elements. With element or its parent element has css property 'display' set to 'none'. $('.hidden').width(); will return 0 instead of the actual width; This plugin simply fix it.

Demo

  • Normal usage see demo/normal.html
  • If you use css3pie you might also want to take a look at another demo( demo/css3pie.html )
  • Live demo please take a look at this and this

Documentation

  • There is a syntax highlight version, please see this post
  • For chinese version please go here

Requires

  • jQuery >= 1.2.3

Browser Compatibility

Installation

  • First, make sure you are using valid DOCTYPE
  • Include necessary JS files
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.actual.js"></script>

Usage

Example code:

// get hidden element actual width
$( '.hidden' ).actual( 'width' );

// get hidden element actual innerWidth
$( '.hidden' ).actual( 'innerWidth' );

// get hidden element actual outerWidth
$( '.hidden' ).actual( 'outerWidth' );

// get hidden element actual outerWidth and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerWidth', { includeMargin : true });

// get hidden element actual height
$( '.hidden' ).actual( 'height' );

// get hidden element actual innerHeight
$( '.hidden' ).actual( 'innerHeight' );

// get hidden element actual outerHeight
$( '.hidden' ).actual( 'outerHeight' );

// get hidden element actual outerHeight and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerHeight', { includeMargin : true });

// if the page jumps or blinks, pass a attribute '{ absolute : true }'
// be very careful, you might get a wrong result depends on how you makrup your html and css
$( '.hidden' ).actual( 'height', { absolute : true });

// if you use css3pie with a float element
// for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
// please see demo/css3pie in action
$( '.hidden' ).actual( 'width', { clone : true });

// if it is not a block element. By default { display: 'block' }.
// for example a inline element
$( '.hidden' ).actual( 'width', { display: 'inline-block' });

Credits

License

The expandable plugin is licensed under the MIT License (LICENSE.txt).

Copyright (c) 2012 Ben Lin