Get hidden elements width and height with jQuery

A jQuery plugin that gets the actual width of hidden DOM elements

jQuery Actual plugin logo

Description

Older version of 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

  • Click here to see the demo
  • If you use css3pie you might also want to take a look at this demo( demo/css3pie.html )
  • Demo pages are also included in the source file

Download


Requires

  • jQuery 1.2.3+

Browser Compatibility


Installation

  • First, make sure you are using valid DOCTYPE
  • Include nessesary 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 });

Related posts