jQuery – evenIfHidden

Posted by Davide

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 jquery.evenifhidden.js script, obviously!

Test it!

Play with the buttons to show/hide our target box and its container, and look how differently the width property of the box is parsed by jQuery’s width() and evenIfHidden(). Every toggling will trigger a refresh of the information area.

I’m the box!

Width calculated with width(): ?

Width calculated with evenIfHidden(): ?

Works with jQuery UI Tabs, as well!

If you have experience with this kind of hidden elements’ problems, and you play with jQuery UI Tabs, you’d probably know this case is even trickier. That’s because UI Tabs’ hidden tabs have assigned the ui-tabs-hide CSS class, that contains a display: none !important; statement. The evenIfHidden plugin handles this case as well, as you may test in the following example.

Resize me toward right!

Width: ?

Download

jquery.evenifhidden.js

About

Tested with jQuery 1.3.2, 1.4.2.
Any feedback is welcome!

  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Technorati
  • Twitter

Permalink | April 22nd, 2010

22 Responses to “jQuery – evenIfHidden”

  1. Heriberto Sardinas Says:
    September 6th, 2010 at 12:58 am

    Hi! Das ist mal wieder ein informativer Text. Echt gut, dass es so Blogs wie deinen gibt. :)

  2. Dmitry Says:
    September 9th, 2010 at 5:38 pm

    Great plug-in ! Thank you !

  3. Dmitry Says:
    September 10th, 2010 at 4:06 pm

    There was a problem with functionality in IE8, sometimes old styles didn’t sets back.
    In that case there is solution that helps:

    style = typeof style == ‘undefined’? ”: style;
    changed on
    style = typeof style == ‘undefined’? ‘ ‘: style;

  4. Davide Says:
    September 17th, 2010 at 4:22 pm

    Thank you Dmitry!

    Actually, I haven’t tested evenIfHidden on IE that much :) So you help is really appreciated.

    I will commit you patch as soon as possible ;)

  5. Marc Says:
    October 26th, 2010 at 1:42 pm

    Thanks for a great plugin Davide.

    I was also having problems with functionality in IE8 where sometimes old styles weren’t set back to their original values. This seemed to fix it for me:

    Changed:
    $(this).attr( ’style’, styleBackups.shift() );

    To:
    $(this).removeAttr(’style).attr( ’style’, styleBackups.shift() );

  6. Marc Says:
    October 26th, 2010 at 1:45 pm

    Sorry missed a quote, should be:
    $(this).removeAttr(’style’).attr( ’style’, styleBackups.shift() );

  7. PiranhaJ Says:
    December 14th, 2010 at 2:48 pm

    Great plugin, really got me out of a jam.

    Found the same problem with IE8. I changed the reset code to:

    hiddenElements.each( function() {
    var oldStyle = styleBackups.shift();

    if (oldStyle) {
    $(this).attr( ’style’, oldStyle );
    } else {
    $(this).removeAttr(’style’);
    }
    });

  8. praveen kasu Says:
    January 10th, 2011 at 8:05 am

    Thanks for the plugin. How can i SET the width of an element which is hidden?

  9. Chair Pads Says:
    January 30th, 2011 at 2:30 am

    -~” I am very thankful to this topic because it really gives useful information `”;

  10. Ondra Says:
    March 25th, 2011 at 2:48 pm

    Thanks for the comments, I used both and got it working with IE8+IE7.

  11. Nursery Decoration Says:
    April 1st, 2011 at 7:07 am

    Wow, you seem to be very knowledgable about this kind of topics.`,,*`

  12. designer handbag Says:
    April 1st, 2011 at 9:18 pm

    Thanks for your submission. I also feel that laptop computers are becoming more and more popular today, and now are often the only type of computer used in a household. The reason is that at the same time potentially they are becoming more and more affordable, their working power is growing to the point where there’re as powerful as desktop computers coming from just a few years ago.

  13. Marjorie Arzate Says:
    July 2nd, 2011 at 8:05 am

    I don’t assume Baidu can contend with Google. Its primary marketplace is Offshore and in fact, it serves 338 million people there. Which explains why it is managing 63% of China’s marketplace give and at the time of 3% of the world’s.

  14. chiropractor denver colorado Says:
    July 12th, 2011 at 6:06 pm

    Oh my goodness! an amazing article. Thank you!

  15. Kortney Heathcock Says:
    September 21st, 2011 at 9:58 am

    Hey there! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be bookmarking and checking back often! Thanks!

  16. Doodle Jump apk Says:
    October 17th, 2011 at 5:21 pm

    Doodle Jump apk Hi there I favor your post, nice blog!…

    Hi there I favor your post, nice blog!…

  17. Prestigio Multipad PMP3084B Says:
    October 27th, 2011 at 7:21 am

    Prestigio Multipad PMP3084B Thanks pertaining to taking turns this kind of wonderful subject material on your web-site. I came across it on google. I may check back again whenever you post additional aricles….

    Thanks pertaining to taking turns this kind of wonderful subject material on your web-site. I came across it on google. I may check back again whenever you post additional aricles….

  18. bitbop android Says:
    October 29th, 2011 at 2:52 am

    Do you mind if I quote a couple of your articles as long as I supply credit and sources back to your weblog? My web site is within the very exact same location of interest as yours and my users would really benefit from a great deal of the data you present here. Please let me know if this okay with you. Regards!

  19. jocuri Says:
    November 9th, 2011 at 12:08 am

    As someone said above, nothing!

  20. orthopaedic doctor Says:
    December 18th, 2011 at 10:49 pm

    With our Consultant Senior Orthopedic Surgeon, Dr. Kevin Yip, Dr Kevin Yip Man Hing and staff, let the Singapore Orthopaedic Clinic take care of you and your bone problems. Don’t let your current orthopaedic condition hinder you from your everyday activities. With our state of the art facilities, we provide a full range of orthopaedic needs designed to improve patients’ outcome.

  21. cleaning stainless steel pans Says:
    January 25th, 2012 at 3:45 pm

    advertising and *********** with Adwords. Well I?m including this RSS to my email and can look out for much extra of your respective intriguing content. Make sure you update this again soon..

  22. click Says:
    June 2nd, 2012 at 5:17 pm

    Fantastic Stuff, do you currently have a myspace account?

Leave a Reply