?
Solved

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

Posted on 2006-03-27
4
Medium Priority
?
1,056 Views
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.
0
Comment
Question by:franco32
  • 2
4 Comments
 
LVL 5

Expert Comment

by:wranlon
ID: 16304923
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);
         }
0
 
LVL 5

Expert Comment

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

Expert Comment

by:Dushan De Silva
ID: 16306902
You can try with Deamveawer inbuild Javascript.

BR Dushan
0
 
LVL 5

Accepted Solution

by:
EduDeveloper earned 375 total points
ID: 16310221
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:

<html>
<head>
<style type="text/css">
<!--
#hidden      {
      display: none;
}
//-->
</style>
</head>
<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>
</body>
</html>
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month16 days, 5 hours left to enroll

850 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