Show popup menu anywhere in the screen

• Download source code - 1.65 KB

Introduction

In ASP and ASP.NET, web application developers are asked quite often to show descriptions of static text in a small window. To meet this requirement, developers straight can use the JavaScript functions I have written in this article. All you need to do is just copy & paste the JavaScript functions and call it as and when required. To place a window in the vicinity of mouse, it is needless to say that we need to find out the mouse X,Y positions. I have taken care of this too in this article.

Using the code

To show a popup menu or popup window on mouse-click or mouse-over, you need to know the mouse coordinates. I have attached a JavaScript function to the onMouseMove event of the HTML 'document':

// attach getMouseCoordinates function onMouseMove
document.onmousemove = getMouseCoordinates;

Within the function "getMouseCoordinates", the following code snippet will calculate the mouse coordinates dynamically:

// get mouse x,y positions for IE
MOUSE_X = event.clientX - document.body.scrollLeft;// + window.screenLeft; 
MOUSE_Y = event.clientY - document.body.scrollTop; // + window.screenTop;

Now, I will discuss about the popup window. Create a popup window object like:

var oPopup = window.createPopup();

The following code snippet demonstrates the use of the popup object. The code creates a pop-up window and displays it.

function openWondow(id)
{
    var val = id.innerText 
    var PopBody = oPopup.document.body; 
    PopBody.style.backgroundColor = "lightcyan"; 
    PopBody.style.border = "solid black 1px"; 
    var text = val + " - Use it anywhere you want"; 
    PopBody.innerHTML = "<font color=red size=2pt face=verdana>" + 
                        text + "</font>"
    oPopup.show(MOUSE_X + 5, MOUSE_Y -5,300,20, document.body); 
}

If you want to show a static menu window on any mouse event, you can follow the same way as I did in my code. I have taken a <DIV> whose ID is oContextHTML and STYLE="display:none;", within which I have created an HTML menu. The inner-html of this hidden <DIV> would be the body of the popup menu window. The following code will show the popup menu:

<DIV id="oContextHTML" ......>
</DIV>

function showMenu()
{
    var innerHTML = oContextHTML.innerHTML;
    var leftX = MOUSE_X+5;
    var topY = MOUSE_Y+5;
    oPopup.document.body.style.backgroundColor = "lightcyan";
    oPopup.document.body.innerHTML = innerHTML;
    oPopup.show(leftX, topY, 300, 87, document.body);
}

This is a very simple and easy to use code.