dreamerslab / jquery.actual Goto Github PK

View Code? Open in Web Editor NEW

240.0 18.0 54.0 68 KB

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

License: MIT License

JavaScript 29.07% HTML 70.93%

jquery.actual's Introduction

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

Firefox 2.0+
Internet Explorer 6+
Safari 3+
Opera 10.6+
Chrome 8+

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

jquery.actual's People

Stargazers

Watchers

jquery.actual's Issues

Return type inconsistency between jQuery 1.7.2.b1 and 1.7.1

Please take notice of this jQuery bug ticket concerning return types while using the Actual plugin:
http://bugs.jquery.com/ticket/11271

Maybe you know an answer right away.
Best of Luck! And thanks for the nice plugin.

Support native jquery-1.9

Looks like the parts that need to change are as follows:

jQuery.fn.andSelf() needs to change to jQuery.fn.addBack()
The demo depends on jQuery.browser, which is no longer supported / available, so this functionality could either depend on jquery-migrate, another library, or some native code. Since it just needs to check if the user agent is MSIE with major version < 7, perhaps it would be acceptable to perform this check natively?

Perhaps

  if( $.browser.msie && $.browser.version < 7 ){

could become

  if( typeof navigator.appName === "string" &&
        navigator.appName === "Microsoft Internet Explorer" &&
        parseFloat(navigator.userAgent.replace(new RegExp(".*MSIE\\D*(\\d+.\\d+).*"), "$1")) < 7
  ){

See http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx

No access to properties

So i need to get the scrollHeight of a hidden element. But this isn't a function so it breaks.

Local variable "style" not initialized

Hi, I haven't tested this, but looking at your code, inside the else-branch, there is:

var ..., style;

fix = function (){
    // ...
    style += 'visibility: hidden !important; display: block !important; ';

This should result in style beeing 'undefinedvisibility: hidden ...' which is ruins the visibility-attribute - I guess that's not what you wanted.

package.json parse error

Package.json has a trailing ',' which leads to build fail
"contributors": [
{ "name": "Ben Lin", "email": "[email protected]" },
{ "name": "Erwin Derksen" },
{ "name": "Jon Tara", "email": "[email protected]" },
{ "name": "Matt Hinchliffe", "email": "[email protected]" },
{ "name": "Ryan Millikin" },
{ "name": "Jacob Quant" },
{ "name": "ejn" },
{ "name": "Rudolf", "email": "[email protected]" },
],

/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Version: 1.0.17
 *
 * Requires: jQuery >= 1.2.3
 */

I have no idea what the plugin is ( the method actual is ambiguous ) since the file was compiled about year ago and you have many repos.

this would be preferred

/*! Copyright 2012, Ben Lin (http://dreamerslab.com/)
 * Licensed under the MIT License (LICENSE.txt).
 * https://github.com/dreamerslab/jquery.actual
 * Version: 1.0.18
 *
 * Requires: jQuery >= 1.2.3
 */

does not work with 'display: table-cell'

tested on mac os with chrome and safari