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

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.
Who is Participating?
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>
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) g_info.style.display = "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 : e.target);

            // 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");
               g_info.style.cssText = "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;
            g_info.style.display = "block";
            g_info.style.left = iX + "px";
            g_info.style.top = 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;
Woops, my CSS has an error: it should be display:none; not display:none: (note the second :)
Dushan De SilvaTechnology ArchitectCommented:
You can try with Deamveawer inbuild Javascript.

BR Dushan
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.