We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now


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

franco32 asked
Medium Priority
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.
Watch Question

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 Architect

You can try with Deamveawer inbuild Javascript.

BR Dushan
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>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.