jQuery Peek

I often have hidden elements on a page for which I want to do calculations. For example, maybe I have a dropdown menu with dynamically sized vertical separators. I'd really like to do something like:

$(".separator").height($(".dropdown_menu").height());

But it doesn't work! The issue, of course, is that the dropdown menu is hidden, so calling height() on it returns 0.
We need a way to get its height as if it was visible.

Introducing jQuery-Peek, which tries to make doing that both flexible and easy.

Here's what I'm talking about

Toggle the example's visibility Get the example's width Get the example's width using peek

This is a test

The normal code to get the width fails when the container is hidden:

$("#inside_example1").width()

But this works nicely:

$("#inside_example1").peek("width")

If I needed a more complex value, perhaps depending on a conditional, I could have done something like this:

$("#inside_example1").peek(function() { return atMaxWidth ? 100 : $(this).width(); })

Peek works even when the target is INSIDE a hidden element

Ever try initializing a custom widget in a hidden div?
If you were basing its size or position off an existing element, you'd be in trouble.
So avoid the issue. Wrap your initialization in peek instead of each.

$.fn.myjqueryplugin = function() {
  return $(this).peek(function() {
    // initialization logic here...
  });
};