The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
EvenIfHidden - Get layout information of hidden DOM elements
evenIfHidden is a jQuery plugin able to get layout information about a DOM element even in the case the element, or one of its containers, is hidden.
The case
Let's assume we have a box, wrapped in one or more containers. A <div> in a <div>. And we'd like to get information about the box's layout (width or height, for example), no matter the state of the box or the containers.
The problem
If a DOM element or one of the elements this one in contained in is hidden, with a display: none; CSS property, the jQuery's build-in functions like width() or height() will rightly return a value that is probably 0. This is due to the fact that an hidden DOM element actually occupies no space in the layout.
The solution
To avoid this behaviour, I wrote this short and easy jQuery plugin. It assures you that a layout information request on a DOM element, even if hidden, will return the value it would have if visible.
How to use evenIfHidden?
There's no need of that much of explanation.
This is how you'd usually ask the box for its width value:
alert( $('#box').width() );With evenIfHidden, things change a bit:
$('#box').evenIfHidden( function(element) {
alert( element.width() );
});You simply have to wrap the width function in a callback function, passed to evenIfHidden. That callback requires a single parameter, that is our box element itself.
Still easy, huh?
Assuming that you included the script, obviously!
