Topic: JQuery Help again

[ober]

I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:

Code: [Select]

$(document).ready(function(){ 
        $("#userlink").mouseover( showMenu );
    });

    // cache the menu object for optimum performance
    var $menu = $("#menu"), pos, width;
   
   
   
    var showMenu = function(){
        //get the position of the placeholder element
        pos   = $(this).offset();
        width = $(this).width();
        //show the menu directly over the placeholder
        $menu.css({ "left": (pos.left + width) + "px", "top":pos.top + "px" }).show();
    }

I'm using that, but the div "menu" doesn't ever show up.  I know it's triggering the function because I can get an alert to fire, but the rest apparently isn't working. 

Code: [Select]

<div style="position: absolute; display: none;float:left;" id="menu">
            <a href="#">Settings</a>
            <a href="#">Logout</a>
        </div>
        <div style="float:left;" id="userlink">John Smith</div>

What am I doing wrong??

[micah]

you could try using hover() instead of mouseover


like:

$("#userlink").hover( function(){ /* mouseover stuff goes here */ }, function(){ /* mouseout goes here */ });


edit: also, considering including the hover intent plugin.  Helps keep annoying popup divs from displaying when the user is just trying to move their mouse around the screen and doesn't want to see your dumb popup.  It works by adding a configurable delay to the trigger.  Usage: the function becomes  $("#userlink").hoverIntent();

edit2: i'm working on a project right now that does this if you want to look at some live code:

Code: [Select]

http://dev71.thepitagroup.com/portfolio/properties/... the function for the mouseover starts at or around line 954 (ctrl+F and paste: "tooltip" display )

[micah]

also, is there a reason why you're making your function a var?

var showMenu = function(){ }

instead of the more simple:
function showMenu(){ }

[ober]

Well, I'm trying to use this as a menu system.  Multiple links will link to different 'dropdowns' which are just divs.

I guess I'm not sure why hover would work any different than mouseover?

[ober]

I'm basing it off of this (in response to the var question):

http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another

[ober]

Your menu system for that site is exactly what I'm looking for... I have to check that out.

[micah]

I'm basing it off of this (in response to the var question): http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another

ok.  thats probably fine, I just never do it that way; I wonder which is better? I've probably been wrong all along

[Mike]

I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:

Good god, why?  Those are annoying as hell.

[micah]

I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:

Good god, why?  Those are annoying as hell.

again, hoverIntent 

sometimes they make sense.. check out the link i posted an mouseover content in the giant datatable.

[ober]

I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:

Good god, why?  Those are annoying as hell.

Maybe I'm not explaining myself.  All I want to do is have a link (like to a username), and when they mouseover it, a div appears just below it with links to the user settings and logout.  Nothing insane.

[Mike]

I'm trying to make it so that when you mouseover a link, it brings up a div that I manage:

Good god, why?  Those are annoying as hell.

Maybe I'm not explaining myself.  All I want to do is have a link (like to a username), and when they mouseover it, a div appears just below it with links to the user settings and logout.  Nothing insane.

You may live.

[ober]

Might have to try this: http://users.tpg.com.au/j_birch/plugins/superfish/#examples

[-KEN-]

You're caching the $("#menu") object before $(document).ready() fires -- could that be it? Try moving it into .ready() function.

Since JS is asynchronous, what's really happening is that you're defining a function to fire on ready, then trying to grab the menu div as a jQuery object, then defining the showMenu function. The trick is, the 'ready' won't fire until the DOM has fully loaded, but the call to grab $("#menu") could happen well before that since you've defined it outside of .ready().

This shit bites me in the ass all the time.

[ober]

I'm basing it off of this (in response to the var question):

http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another

If anyone can get the stuff from that link to work, I want to see the actual code you used.  I don't get it.

[-KEN-]

I'm basing it off of this (in response to the var question):

http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another

If anyone can get the stuff from that link to work, I want to see the actual code you used.  I don't get it.

I'm tellin' you, you just have to move it into .ready():

Code: [Select]

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            // cache the menu object for optimum performance
            var $menu = $("#menu"), pos, width;
           
            var showMenu = function(){
                //get the position of the placeholder element
                pos   = $(this).offset();
                width = $(this).width();
                //show the menu directly over the placeholder
                $menu.css({ "left": (pos.left + width) + "px", "top":pos.top + "px" }).show();
            }

            $("#userlink").mouseover( showMenu );
        });


    </script>
    </head>
    <body>
        <div style="position: absolute; display: none;float:left;" id="menu">
            <a href="#">Settings</a>
            <a href="#">Logout</a>
        </div>
        <div style="float:left;" id="userlink">John Smith</div>
    </body>
</html>