Click here to Skip to main content
11,576,692 members (59,607 online)
Click here to Skip to main content

Show popup menu anywhere in the screen

, 11 May 2007 27.8K 506 12
Rate this:
Please Sign up or sign in to vote.
A very useful thing for web developers.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Chakrabarty Rajib
Web Developer
United States United States
Rajib is one of the many altruist guy working with Cognizant Technology Solution ... Smile | :)

You may also be interested in...

Comments and Discussions

 
QuestionHelp Pin
Adawi5-Sep-07 4:55
memberAdawi5-Sep-07 4:55 
Questionwindow.createPopup ? Pin
volkan.ozcelik17-May-07 12:10
membervolkan.ozcelik17-May-07 12:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 11 May 2007
Article Copyright 2007 by Chakrabarty Rajib
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid