Question

I can do this:

$("#icon").live("hover",
    function() 
    {
        var position = $(this).offset();
        $('#popup').css({top: position.top - 10, left: position.left + 20}).toggle();
    },
    function()
    {
        $('#popup').toggle();
    }
);

But this:

function show_popup(element)
{
    var position = element.offset();
    $('#popup').css({top: position.top - 10, left: position.left + 20}).toggle();
}
$("#icon").live("hover",
    show_popup($(this)),
    function()
    {
        $('#popup').toggle();
    }
);

errors position is null on the page load.

Why does it run show_popup() on the page load? And what is wrong with that code?

Answer 1

This:

show_popup($(this))

is a function call so it will be executed when live is being set up for execution, you want just a function in there. When show_popup($(this)) gets executed, this will probably be window and window doesn’t have an offset, that means that your position inside show_popup will be null and there’s your error message. Also note that this approach tries to bind the return value of show_popup (which will be undefined) as a jQuery callback and that’s clearly not your intent.

You want something like this:

$("#icon").live("hover",
    function() { show_popup($(this)) },
    function()
    {
        $('#popup').toggle();
    }
);

Or perhaps this:

function show_popup()
{
    var position = $(this).offset();
    $('#popup').css({top: position.top - 10, left: position.left + 20}).toggle();
}
$("#icon").live("hover",
    show_popup,
    function()
    {
        $('#popup').toggle();
    }
);

In this case you always have to supply the appropriate context when calling show_popup so you’ll be doing a lot of things like show_popup.call(some_dom_element) if you want to call show_popup anywhere that isn’t a jQuery callback.