Topic: JQuery Functions

[ober]

The web isn't being very helpful on this, so here goes:  I have the following which works fine:

Code: [Select]

       var $profile = $("#usermenu"), pos, width;

       var showProfileMenu = function(){
                //get the position of the placeholder element
                pos   = $(this).offset();
                width = $(this).width();
                height = $(this).height();
                $profile.css({ "left": (pos.left - 5) + "px", "top":(pos.top + height + 11) + "px" }).prependTo("#user").show();
        }
        var hideProfileMenu = function() {
            $profile.hide();
        }             

        $("#user").hover(showProfileMenu, hideProfileMenu);

But now I have a series of these so I want to make the function more generic.  So I tried the following, but it isn't working:

Code: [Select]

var $recordfilter = $("#subfmenu"), pos, width;
 function showFilterMenu(menu, id) {
            pos   = $("#"+id).offset();
            width = $("#"+id).width();
            height = $("#"+id).height();
            menu.css({ "left": (pos.left - 5) + "px", "top":(pos.top + height + 11) + "px" }).prependTo("#"+id).show();
        }
       
        function hideFilterMenu(menu) {
            menu.hide();
        }

$("#recordfilter").hover(showFilterMenu($recordfilter, "recordfilter"), hideFilterMenu($recordfilter));

It isn't even doing anything on the hover event and there aren't any JS errors, so I don't know what I'm doing wrong.  Help?

[micah]

this might be grasping at straws, but I've had problems calling functions with parameters in bound jquery functions.

instead of:
$("#recordfilter").hover(showFilterMenu($recordfilter, "recordfilter"), hideFilterMenu($recordfilter));

try:
$("#recordfilter").hover( function(){ showFilterMenu($recordfilter, "recordfilter") }, function(){ hideFilterMenu($recordfilter) });

it might not work either but can't hurt to try

[ober]

Found another site that said to do this right after I posted here (typical):

Code: [Select]

$("#recordfilter").mouseover(function() {
            showFilterMenu($recordfilter, "recordfilter");
        });
       
        $("#recordfilter").mouseout(function() {
            hideFilterMenu($recordfilter);
        });
Which is basically what you have.  It works but my offsets are fucked up for some reason.

[Mike]

I'd make it a plugin and use something like

Code: [Select]

(function($)
{
$.fn.filtermenu = function (options)
{
var settings = $.extend({
menu: '#subfmenu',
}, options);

this.each(function()
{
var $menu = $(settings.menu);

$(this).hover(function()
{
var pos = $(this).offset();
var width = $(this).width();
var height = $(this).height();
$menu.offset({
left: pos.left - 5,
top: pos.top + 11,
});
},
function ()
{
$menu.hide();
}
);
});

return this;
}
})(jQuery);
Use it like

Code: [Select]

$("#recordfilter").filtermenu();
$("#recordfilter").filtermenu({menu: '#someotherid'});

For the offsets make sure the menu is absolutely positioned and attach it to the body.

Edit: Above is untested

[ober]

Eh... that seems like a lot of work.    Plus it's working now

[Mike]

Front loaded work and then dead simple usage.