Question

So I have an image that I need to call .width and .height but I’m running into the old problem with IE returning 0 if any of the parent elements are not visible.

Because of the dynamic nature of this particular task, it’s not possible to tell at design time which elements will be visible. So my solution to this is to take my image element and then go up the element hierarchy one parent at a time and set it to visible if it isn’t. I’m going to add the element id to an array if I set it to visible so I know which ones to flip back to hidden after I get the width/height.

So my question is: how do I write a recursive jQuery function go up the element tree and check if the element is hidden or not?

Answer 1

No need for any recursion, you can do that much easier:

var hiddenElements = $(yourelement).parents().filter(':hidden').show();

Instead of .filter(':hidden') you could also use .not(':visible') – but that’s just a matter of style.

---

However, why not simply do it like this – it will avoid annoying flickering of elements which would be shown for a short moment just to be hidden again. Besides that, the image is already cached so cloning it will not cause any noticable delays (or any additional network traffic).

var clone = $(yourelement).clone().appendTo('#dummy');
// now get the size
clone.remove();

To prevent the clone from being flickering into visiblity, style #dummy like this:

#dummy { position: absolute; left: -1000em; }

This will hide it without actually making it invisible.