Link to home
Create AccountLog in
Avatar of franco32
franco32

asked on

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.
Avatar of wranlon
wranlon

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
            if(!g_info){
               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;";
               document.body.appendChild(g_info);
            }
           
            // 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;
            //alert(o);
         }
Woops, my CSS has an error: it should be display:none; not display:none: (note the second :)
You can try with Deamveawer inbuild Javascript.

BR Dushan
ASKER CERTIFIED SOLUTION
Avatar of EduDeveloper
EduDeveloper

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer