Hover a menu at a certain position

Question

0.00/5 (No votes)

See more:

Hi all,

I have got a hover menu(using javascript) that is getting displayed when ever i mouseover on any of the tree node.

But the position of the menu is not correct...

Can any body tell me how do i pop up the hover menu at the position where my mouse cursor is.... Provided I have the X & Y co-ordinates of the cursor position.

So specifically, i want to know how to position a hover menu at some particular co-cordinates[x,y].

Please help me out. It's urgent!!

Snigdharani Behera

Posted 7-Apr-10 23:43pm

sargamlucy

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sargamlucy · Answer 1 · 2010-04-08T00:09:00

Hi All,

Just now found the correct answer.
It goes like this:

C#

function ShowPopup(hoveritem, arg)
        {
            hp = document.getElementById("hoverpopup");
            // Set position of hover-over popup
            hp.style.position = "absolute";
            hp.style.top = getPosition(event).y - 5;
            hp.style.left = getPosition(event).x - 5;
            // Set popup to visible
            hp.style.visibility = "Visible";
        }

        function HidePopup()
        {
            hp = document.getElementById("hoverpopup");
            hp.style.visibility = "Hidden";
        }

        function getPosition(e)
        {
            e = e || window.event;
            var cursor = {x:0, y:0};
            if (e.pageX || e.pageY)
            {
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            }
            else
            {
                var de = document.documentElement;
                var b = document.body;
                cursor.x = e.clientX +
                    (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
                cursor.y = e.clientY +
                    (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
            }
            return cursor;
        }

But now i have one problem, that is I am not able to select a menu item.
Because as soon as i try to select a menu item, the mouseout even fires, n the menu dissapears.

Can somebody help!!

Snigdharani Behera

sargamlucy · Answer 2 · 2010-04-11T19:27:00

Hi,

Though I am not getting any response, still i would like to post more answers, so that others can be benefited.

I found a solution to my problem, stated earlier.

Try this code:

C#

//#############New Code###############
        var menuArray = new Array();
        menuArray[0] = 'hoverpopup';
        //menuArray[1] = 'submenu2';
        var globalObject = '';
        var isActive = false;
        var ourTimer;

        function showhide(obj,onlink,arg)
        {
            targetObject = document.getElementById(obj).style;

            globalObject = targetObject;
            if(onlink)
            {
                clearTimeout(ourTimer);

                for (i=0; i < menuArray.length; i++)
                {
                    var tempObject = document.getElementById(menuArray[i]).style;
                    tempObject.visibility = "hidden";
                }

                targetObject.visibility = 'visible';
                targetObject.position = "absolute";
                targetObject.top = getPosition(event).y;
                targetObject.left = getPosition(event).x;
                isActive = true;
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }

        function layerTimer()
        {
            ourTimer = setTimeout("hideMenu()",0750);
        }

        function hideMenu()
        {
            if( !isActive )
            {
                globalObject.visibility = 'hidden';
            }
        }

        function layerCheck(flag)
        {
            if(flag)
            {
                isActive = true;
                clearTimeout(ourTimer);
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }
        window.onload = function()
        {
            for(var i=0;i<menuArray.length;i++)
            {
                var id = menuArray[i];
                var e = document.getElementById(id);
                e.onmouseover = function(e)
                {
                    layerCheck(true);
                }
                e.onmouseout = function(e)
                {
                    layerCheck(false);
                }
            }
        }
        //############################

XML

<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table bgcolor="#0000FF">
            <tr><td><font color="#FFFFFF">Option 1</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 2</td></tr>
            <tr><td><font color="#FFFFFF">Option 3</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 4</td></tr>
            <tr><td><font color="#FFFFFF">Option 5</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 6</td></tr>
        </table>
    </div>

Hope it helps others!!

Snigdharani Behera

Hover a menu at a certain position

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0