Right Click anywhere on page to display data in a <div> tag

Posted on 2006-03-27
Last Modified: 2007-12-19
I would like additional data be displayed in a <div> tag when the user right-clicks anywhere on the WEB page.
The data contained in the <div> tag would be a query that was executed as a result of the user issuing a right-click.
Question by:franco32
    LVL 5

    Expert Comment

    You could use a combination of the oncontextmenu event to show the data item, and the onclick event to hide the data item.  Here is a really basic example in JavaScript.

             var g_info;
             document.oncontextmenu = showInfo;
             document.onclick = hideInfo;
             function hideInfo(){
                if(g_info) = "none";
             function showInfo(){
                // Get the event object from the args, otherwise figure it's IE and use the global event object
                var e = (typeof arguments[0] == "object" ? arguments[0] : event);

                // There's no event object, so just leave
                if(!e) return;
                var o = (typeof e.srcElement == "object" ? e.srcElement :;

                // there's no source object, so don't do anything, just leave
                if(!o) return;

                // there's no info object, so make one
                   g_info = document.createElement("div");
          = "position:absolute;top:0px;left:0px;display:none:background-color:#EFEFEF;border:1px solid #000000;width:200px;height:200px;";
                // Show the info object, and move it relative to the mouse pointer
                var iX = e.clientX;
                var iY = e.clientY;
       = "block";
       = iX + "px";
       = iY + "px";

                // Set some data in the object
                g_info.innerHTML = "You clicked a " + o.nodeName + " on " + (new Date()).toString();

                // cancel the default behavior by returning false;
                return false;
    LVL 5

    Expert Comment

    Woops, my CSS has an error: it should be display:none; not display:none: (note the second :)
    LVL 17

    Expert Comment

    You can try with Deamveawer inbuild Javascript.

    BR Dushan
    LVL 5

    Accepted Solution

    The following is a basic example of how you could hide content in a <div> tag and display the content when the user clicks anywhere on the page. You should be able to easily customise this code for your purposes:

    <style type="text/css">
    #hidden      {
          display: none;
    <body onclick="document.getElementById('hidden').style.display='block'">
    <p>some content...</p>
    <div id="hidden"><p>hidden text</p></div>
    <p>some more content...</p>

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Building “do-it-yourself” web sites has become an epidemic. There are so many blogs, web sites and even books that "teach" you how to build your web site in a few extremely simple and easy steps. Building a web site has become easier than boiling an…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
    The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now