473,748 Members | 2,320 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

close a context menu which is created for mozilla browser

34 New Member
Hello,
I have created a context menu in mozilla by using following code:

Expand|Select|Wrap|Line Numbers
  1. function nrc(e) {
  2.     var contextMenu;
  3.  
  4.     document.oncontextmenu = function (evt) {
  5.         var srcElement;
  6.         if (evt && evt.target) {
  7.             srcElement = evt.target;
  8.             if (srcElement.nodeType == 3) {
  9.                  srcElement = srcElement.parentNode;
  10.             }
  11.         } else if (window.event) {
  12.             srcElement = window.event.srcElement;
  13.         }
  14.         if (srcElement) {
  15.             if (typeof contextMenu == 'undefined') {
  16.                 contextMenu = createContextMenu('contextMenu');
  17.             }
  18.             if (contextMenu != null) {
  19.                 var coords = getPageCoords(evt ? evt : window.event);
  20.                 contextMenu.style.left = coords.x;
  21.                 contextMenu.style.top = coords.y;
  22.                 contextMenu.srcElement = srcElement;
  23.                 contextMenu.style.visibility = 'visible';
  24.                 if (evt && evt.preventDefault) {
  25.                     evt.preventDefault();
  26.                 }
  27.                 return false;
  28.             }
  29.         }
  30.     };
  31. }
  32.  
  33.     document.onmousedown = nrc;
  34.     window.onmousedown = nrc;
  35.     if (document.layers) {
  36.         window.captureEvents(Event.MOUSEDOWN);
  37.     }
  38.  
  39. function getPageCoords (evt) {
  40.     var coords = { x: 0, y: 0};
  41.     if (typeof window.pageXOffset != 'undefined') {
  42.         coords.x = window.pageXOffset + evt.clientX;
  43.         coords.y = window.pageYOffset + evt.clientY;
  44.     } else if (document.compatMode && document.compatMode != 'BackCompat') {
  45.         coords.x = document.documentElement.scrollLeft + evt.clientX;
  46.         coords.y = document.documentElement.scrollTop + evt.clientY;
  47.     } else {
  48.         coords.x = document.body.scrollLeft + evt.clientX;
  49.         coords.y = document.body.scrollTop + evt.clientY;
  50.     }
  51.     return coords;
  52. }
  53.  
  54. function createContextMenu (menuId) {
  55.  
  56.     var menu;
  57.     if (document.createElement && (menu = document.createElement('div'))) {
  58.         menu.id = menuId;
  59.         menu.style.position = 'absolute';
  60.         menu.style.backgroundColor = '#E3E0E3';
  61.         menu.style.align='right';
  62.         menu.style.border = '1px outset black';
  63.         menu.style.visibility = 'hidden'
  64.                 var link = document.createElement('a');
  65.         menu.link = link;
  66.         link.href = '#';
  67.         link.style.display = 'block';
  68.                 link.onclick=somefunc;
  69.                 link.appendChild(document.createTextNode('Add item'));
  70.                 menu.appendChild(link);
  71.         menu.onmouseout =menuMouseout; // to close context menu
  72.         menu.onclick = menuClick;
  73.         document.body.appendChild(menu);
  74.         return menu;
  75.     } else {
  76.         return null;
  77.     }
  78. }
  79. function menuClick (evt) {
  80.   this.style.visibility = 'hidden';
  81.   return false;
  82. }
  83.  
  84. function menuMouseout (evt) { // on mouse out of the contextmenu this func will be called and context menu will be closed
  85.   if (evt && evt.relatedTarget) {
  86.     if (!contains(this, evt.relatedTarget)) {
  87.       this.style.visibility = 'hidden';
  88.     }
  89.   } else if (window.event && event.toElement) {
  90.     if (!this.contains(event.toElement)) {
  91.       this.style.visibility = 'hidden';
  92.     }
  93.   }
  94. }
  95.  
  96. function contains (container, containee) {
  97.   while (containee) {
  98.     if (container == containee) {
  99.       return true;
  100.     }
  101.     containee = containee.parentNode;
  102.   }
  103.   return false;
  104. }
  105.  
This code is working perfectly.
Now my context menu is closed when i am moving my mouse out from that window. But what i want is i want to close my contextmenu by clicking any where in window not on mouse out of that context menu.

Do anybody has any solution kindly help me.
Do anybody has any other way to create a context menu. If it is help me.
Dec 18 '07 #1
19 3305
gits
5,390 Recognized Expert Moderator Expert
hi ...

first replace your line 71 with:

Expand|Select|Wrap|Line Numbers
  1. document.onclick = function(event) { closeMenu(event) };
and declare the following method:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.    var id = 'contextMenu';
  3.  
  4.    if (e.target.id != id) {
  5.        document.getElementById(id).style.visibility = 'hidden';
  6.    }
  7. }
  8.  
this should do the job for mozilla :)

kind regards
Dec 18 '07 #2
BibhuAshish
34 New Member
hi ...

first replace your line 71 with:

Expand|Select|Wrap|Line Numbers
  1. document.onclick = function(event) { closeMenu(event) };
and declare the following method:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.    var id = 'contextMenu';
  3.  
  4.    if (e.target.id != id) {
  5.        document.getElementById(id).style.visibility = 'hidden';
  6.    }
  7. }
  8.  
this should do the job for mozilla :)

kind regards
Hi gits,
Thanks a lot.
But when i am doing left click in the window that context menu is closed but not by the right click of mouse, as default context menu of each window.

When i am doing right click after getting context menu again one context menu is created. Then if i am doing left click the latest menu is closed and the previous one still opened.
Do you have any solution for that.
Dec 19 '07 #3
gits
5,390 Recognized Expert Moderator Expert
nope ... i tested it again in FF 2.0.0.11 ... and when you right-click in the window a new context-menu is created at the mous-pos while the old one is closed ... the right-click is a click too so the click-handler will be called and then the oncontext-menu appears and creates a new one ...

in case you want to ensure that only one contextMenu will be visible then put:

Expand|Select|Wrap|Line Numbers
  1. closeMenu(evt);
right at the start of your oncontextmenu-handler-function (orig. line 5 of your posted code) ...

kind regards
Dec 19 '07 #4
BibhuAshish
34 New Member
nope ... i tested it again in FF 2.0.0.11 ... and when you right-click in the window a new context-menu is created at the mous-pos while the old one is closed ... the right-click is a click too so the click-handler will be called and then the oncontext-menu appears and creates a new one ...

in case you want to ensure that only one contextMenu will be visible then put:

Expand|Select|Wrap|Line Numbers
  1. closeMenu(evt);
right at the start of your oncontextmenu-handler-function (orig. line 5 of your posted code) ...

kind regards
Whatever you have written that is correct. But it is not working. I tried your last solution also.
For each right click i am getting one context menu. Mail me some other way.
Dec 19 '07 #5
gits
5,390 Recognized Expert Moderator Expert
nope ... i don't :) ... you should post your code so that i could trace for the error ... as i said the code i used here works for me ... so may be you did something additionally?
Dec 19 '07 #6
BibhuAshish
34 New Member
nope ... i don't :) ... you should post your code so that i could trace for the error ... as i said the code i used here works for me ... so may be you did something additionally?
My whole code i am sending you.

Expand|Select|Wrap|Line Numbers
  1.       function nrc(e) {
  2.            var contextMenu;
  3.          document.oncontextmenu = function (evt) {
  4.               var srcElement;
  5.              if (evt && evt.target) {
  6.                   srcElement = evt.target;
  7.                   if (srcElement.nodeType == 3) {
  8.                       srcElement = srcElement.parentNode;
  9.                  }
  10.               } else if (window.event) {
  11.                   srcElement = window.event.srcElement;
  12.              }
  13.               if (srcElement) {
  14.                   if (typeof contextMenu == 'undefined') {
  15.                       contextMenu = createContextMenu('contextMenu');
  16.                   }
  17.                   if (contextMenu != null) {
  18.                       var coords = getPageCoords(evt ? evt : window.event);
  19.                       contextMenu.style.left = coords.x;
  20.                       contextMenu.style.top = coords.y;
  21.                       contextMenu.srcElement = srcElement;
  22.                       contextMenu.style.visibility = 'visible';
  23.                        if (evt && evt.preventDefault) {
  24.                           evt.preventDefault();
  25.                      }
  26.                      return false;
  27.                   }
  28.               }
  29.           };
  30.       }
  31.  
  32.           document.onmousedown = nrc;
  33.           window.onmousedown = nrc;
  34.           if (document.layers) {
  35.               window.captureEvents(Event.MOUSEDOWN);
  36.           }
  37.  
  38.       function getPageCoords (evt) {
  39.           var coords = { x: 0, y: 0};
  40.           if (typeof window.pageXOffset != 'undefined') {
  41.               coords.x = window.pageXOffset + evt.clientX;
  42.               coords.y = window.pageYOffset + evt.clientY;
  43.           } else if (document.compatMode && document.compatMode != 'BackCompat') {
  44.               coords.x = document.documentElement.scrollLeft + evt.clientX;
  45.               coords.y = document.documentElement.scrollTop + evt.clientY;
  46.           } else {
  47.               coords.x = document.body.scrollLeft + evt.clientX;
  48.               coords.y = document.body.scrollTop + evt.clientY;
  49.           }
  50.           return coords;
  51.       }
  52.  
  53.       function createContextMenu (menuId) {
  54.           var menu;
  55.          if (document.createElement && (menu = document.createElement('div'))) {
  56.               menu.id = menuId;
  57.               menu.style.position = 'absolute';
  58.               menu.style.backgroundColor = '#E3E0E3';
  59.               menu.style.align='right';
  60.               menu.style.border = '1px outset black';
  61.               menu.style.visibility = 'hidden'
  62.                       var link = document.createElement('a');
  63.               menu.link = link;
  64.               link.href = '#';
  65.               link.style.display = 'block';
  66.                       link.onclick=somefunc;
  67.                       link.appendChild(document.createTextNode('Add item'));
  68.                       menu.appendChild(link);
  69.              //menu.onmouseout =menuMouseout; 
  70.         document.onclick = function(event) { closeMenu(event) }; //this is your line
  71.               menu.onclick = menuClick;
  72.               document.body.appendChild(menu);
  73.               return menu;
  74.           } else {
  75.               return null;
  76.            }
  77.      }
  78.       function menuClick (evt) {
  79.         this.style.visibility = 'hidden';
  80.        return false;
  81.        }
  82.  
  83.     function closeMenu(e) {
  84.     var id = 'contextMenu';
  85.     if (e.target.id != id) {
  86.         document.getElementById(id).style.visibility = 'hidden';
  87.     }
  88.      }
  89.  
  90.  
  91.       function menuMouseout (evt) { // on mouse out of the contextmenu this func will be called and context menu will be closed
  92.         if (evt && evt.relatedTarget) {
  93.          if (!contains(this, evt.relatedTarget)) {
  94.              this.style.visibility = 'hidden';
  95.           }
  96.         } else if (window.event && event.toElement) {
  97.           if (!this.contains(event.toElement)) {
  98.             this.style.visibility = 'hidden';
  99.           }
  100.         }
  101.       }
  102.        function contains (container, containee) {
  103.         while (containee) {
  104.           if (container == containee) {
  105.             return true;
  106.          }
  107.           containee = containee.parentNode;
  108.       }
  109.        return false;
  110.     }
  111.  
With the above i am able to close my context menu by left click.
But after getting one context menu if i am doing right click then again one window is coming. Now if you will do left click then the latest window be closed and the first window is still there.
Check my code and tell me what to do.
Dec 19 '07 #7
BibhuAshish
34 New Member
Hi gits,
I am working in linux platform. Now i came to know When i am running my code in mozilla of linux platform it is not working means (close the context menu right click is not working). But when i tried it in mozilla of XP it is working.
can you please tell me why it is like this and what to do.
Dec 19 '07 #8
gits
5,390 Recognized Expert Moderator Expert
hi ...

could you see the alert when you change the line to this:

Expand|Select|Wrap|Line Numbers
  1. document.onclick = function(event) { 
  2.     alert('test click');
  3.     closeMenu(event); 
  4. };
and do a rightclick in the window?

kind regards

PS: please use code tags when posting source-code
Dec 19 '07 #9
BibhuAshish
34 New Member
hi ...

could you see the alert when you change the line to this:

Expand|Select|Wrap|Line Numbers
  1. document.onclick = function(event) { 
  2.     alert('test click');
  3.     closeMenu(event); 
  4. };
and do a rightclick in the window?

kind regards

PS: please use code tags when posting source-code

for only left click i am getting alert message. But when trying to close context menu by using right click i am not getting alert.

And one thing that code is working perfectly, according your last post, in mozilla of XP OS not in linux.
Dec 19 '07 #10

Sign in to post your reply or Sign up for a free account.

Similar topics
10
38010
close current window using window.close()
by: Shang Wenbin | last post by:
Hi, When I want to close the current window using window.close() in IE6.0, there will be a confirm box that: The web page you are viewing is trying to close the window. Do you want to close this window? I have to click yes to close the window. How can I close the current window directly without this dialog box? Thank you.
Javascript
7
2703
Unhandled Exception in ASP.NET 2 asp:Menu control
by: Chuck Hartman | last post by:
I have a Windows service that requests web pages from a site using an HttpWebRequest object. When I try to request a page from an ASP.NET 2 site, I get a WebException with message "The remote server returned an error: (500) Internal Server Error." I found a post that suggested to catch the WebException to retrieve the actual HttpWebResponse object for more information. The response returned is shown below. At first I thought this was a...
ASP.NET
22
130345
<body onload="window.print(); window.close();">
by: stephen | last post by:
I have created an order form that users javascript to create a new html document when the customers clicks the "print page" button. Once the new document has been created it then prints the document and closes it with the following code: <body onload="window.print(); window.close();"> This works correctly (or at least the way I expect it to work under MS Internet Explorer, but it cuases Netscape to "crash"
Javascript
0
9528
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
C / C++
0
9359
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
0
9236
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
General
0
8235
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
Career Advice
1
6792
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
6072
Couldn’t get equations in html when convert word .docx file to html file in C#.
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
C# / C Sharp
0
4863
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
1
3298
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
C# / C Sharp
2
2774
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us