Javascript mouseoffset problem - Box that is offset stays in the same place

[as4s1n]

I am making a hover-offset menu and I got it mostly working. However, when you hover over the roots (links for each menu) the menu pops up, but unforutnately, the same place which is fine for root1, but when you get to root3 you can't get to the menu. I think the coordinates I get are of the parent element of the roots and displays it in the same place for all of them. Please help.

HTML:

<!-- ... -->
<ol>
    <li>
        <a href="javascript:void(0)">Root 1</a>
            <ol>
                <li>
                    <a href="javascript:void(0)">Root 1 Child 1</a>
                    <a href="javascript:void(0)">Root 1 Child 2</a>
                </li>
             </ol>
    </li>
    <li>
        <a href="javascript:void(0)">Root 2</a>
            <ol>
                <li>
                    <a href="javascript:void(0)">Root 2 Child 1</a>
                    <a href="javascript:void(0)">Root 2 Child 2</a>
                 </li>
             </ol>
    </li>
    <li>
        <a href="javascript:void(0)">Root 3</a>
            <ol>
                <li>
                    <a href="javascript:void(0)">Root 3 Child 1</a>
                    <a href="javascript:void(0)">Root 3 Child 2</a>
                 </li>
             </ol>
    </li>
</ol>

Javascript:

$(document).ready(function() {
    $("#hoverEvent li").find("ol").css({'display' : 'none', 'position' : 'absolute', 'width' : '100px'});
    $("#hoverEvent li").hover(
        function() {
            mouseCoords;
            $(this).find("ol").css({'display' : 'block'});
            $(this).find("ol").offset({'top' : posy, 'left' : posx});
        },
        function() {
            $(this).find("ol").css({'display' : 'none'});
        });
});

// Get the coordinates of the mouse
function mouseCoords(e) {
        var
            posy =0,
            posx =0;
            
        if(!e) {var e = window.event;}
        if(e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if(e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        
        else {
            document.getElementById("help").innerHTML = "You cannot run this";
        }
        

    return posx,posy;
}

Here is a link to a live site.

Also, a side note: I noticed that Google Chrome 5 doesn't like the li display:inline; as it always displays as a block list. Is there any fix for that?

 

[dlukin]

$(document).ready(function() {
    $("#hoverEvent li").find("ol").css({'display' : 'none', 'position' : 'absolute', 'width' : '100px'});
    $("#hoverEvent li").hover(
        function() {
            ????? = mouseCoords() ;
            $(this).find("ol").css({'display' : 'block'});
            $(this).find("ol").offset({'top' : posy, 'left' : posx});
        },
        function() {
            $(this).find("ol").css({'display' : 'none'});
        });
});

Misprint or what? You never set posx and posy in that function.

 

[misson]

$(document).ready(function() {
    $("#hoverEvent li").find("ol").css({'display' : 'none', 'position' : 'absolute', 'width' : '100px'});
    $("#hoverEvent li").hover(
        function() {
            mouseCoords;

You're not calling mouseCoords, you're simply referring to it. An interactive debugger would have revealed this in short order. If code isn't doing what you expect, your first step should be to use a debugger.

            $(this).find("ol").css({'display' : 'block'});
            $(this).find("ol").offset({'top' : posy, 'left' : posx});

posx and posy aren't defined here.

// Get the coordinates of the mouse
function mouseCoords(e) {
        [...]
        if(!e) {var e = window.event;}

There's no need to declare e as a variable. Since it's a parameter, it's already local.

    return posx,posy;
}

You can't return multiple values this way in JS. You either have to use an array or (better in this case) an object:

function mouseCoords(e) {
    var pos = {x: 0, y: 0};
    ...
    return pos;
}

However, none of that matters. You don't need mouseCoords(). jQuery provides a consistent interface for mouse position. Remember, one of the two main reasons for using a JS library is to write browser agnostic code. If you find yourself coding for specific browsers, you're probably missing something.

Another option (one that doesn't require getting the mouse position) is to give the <li> relative positioning and set the <ol>'s position to {top: 1em; left: 0;}, placing them below the #hoverEvent li a. Then all the #hoverEvent li hover handlers need to do is show and hide the <ol>.

Also, a side note: I noticed that Google Chrome 5 doesn't like the li display:inline; as it always displays as a block list. Is there any fix for that?

Safari is the same way. It's not the inline display (the <li> actualy are inline, believe it or not), it's because the #hoverEvent element isn't wide enough. Try giving #hoverEvent a width, or try floating the <li>.