Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

License

Packages

No packages published
You can’t perform that action at this time.