469,926 Members | 1,524 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,926 developers. It's quick & easy.

close a context menu which is created for mozilla browser

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 2682
gits
5,390 Expert Mod 4TB
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
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 Expert Mod 4TB
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
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 Expert Mod 4TB
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
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
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 Expert Mod 4TB
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
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
gits
5,390 Expert Mod 4TB
does the linux-moz have any extension installed? i think its a problem with the moz itself not the os? ... i could test it on a mac when i'm at home again :)

kind regards
Dec 19 '07 #11
does the linux-moz have any extension installed? i think its a problem with the moz itself not the os? ... i could test it on a mac when i'm at home again :)

kind regards
I found one extension which is DOM Inspector 1.1.1.8.
I disabled that one still right click is not working.
Is there any way to know extensions and what is the solutions for my problem.

Regards,
Bibhu
Dec 20 '07 #12
gits
5,390 Expert Mod 4TB
hi ...

in your code try to use:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.     // your further code here
  4. }
  5.  
and put an alert here:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.  
  4.     alert(e.target.nodeName);
  5.  
  6.     if (e.target.id != id) {
  7.         document.getElementById(id).style.visibility = 'hidden';
  8.     }
  9. }
  10.  
post what the alert says :)

kind regards
Dec 20 '07 #13
hi ...

in your code try to use:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.     // your further code here
  4. }
  5.  
and put an alert here:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.  
  4.     alert(e.target.nodeName);
  5.  
  6.     if (e.target.id != id) {
  7.         document.getElementById(id).style.visibility = 'hidden';
  8.     }
  9. }
  10.  
post what the alert says :)

kind regards

Hi gits,
I am getting "TD" for left click. But for right click i am not getting anything.
Whenever i am doing right click, i think that closeMenu function is not called for which i am not getting any alert message..
Dec 20 '07 #14
gits
5,390 Expert Mod 4TB
in case you get a new contextmenu at the new rightclick position the closeMenu()-method has to be called ... how should the contextmenu be created otherwise? i don't get it ;( ... let me check something and i come back this evening with something new :)
Dec 20 '07 #15
gits
5,390 Expert Mod 4TB
ok ... i checked it again ... we should slightly adapt the closeMenu() method:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.  
  4.     if (e.target.id != id) {
  5.         var node = document.getElementById(id);
  6.  
  7.         if (node != null) {
  8.             node.style.visibility = 'hidden';
  9.         }
  10.     }
  11. }
  12.  
this avoids an error in case no node with id is present. now use this:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.     // your further code here
  4. }
  5.  
i guess it will work now :)

kind regards
Dec 20 '07 #16
ok ... i checked it again ... we should slightly adapt the closeMenu() method:

Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.  
  4.     if (e.target.id != id) {
  5.         var node = document.getElementById(id);
  6.  
  7.         if (node != null) {
  8.             node.style.visibility = 'hidden';
  9.         }
  10.     }
  11. }
  12.  
this avoids an error in case no node with id is present. now use this:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.     // your further code here
  4. }
  5.  
i guess it will work now :)

kind regards
Hi gits,
I wrote the following code in my closeMenu func, with
Expand|Select|Wrap|Line Numbers
  1. document.onclick=function (evt) {
  2.     closeMenu(evt);
  3. }
  4.  
Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.     if (e.target.id != id) {
  4.         var node = document.getElementById(id);
  5.         if (node != null) {
  6.             node.style.visibility = 'hidden';
  7.         }
  8.     }
  9. }
  10.  
only left is working.

But when i wrote like the following:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu=function (evt) {
  2.     closeMenu(evt);
  3. }
  4.  
Expand|Select|Wrap|Line Numbers
  1. function closeMenu(e) {
  2.     var id = 'contextMenu';
  3.     if (e.target.id != id) {
  4.         var node = document.getElementById(id);
  5.         if (node != null) {
  6.             node.style.visibility = 'hidden';
  7.         }
  8.     }
  9. }
  10.  
neither left click nor right click is working.

Regards,
Bibhu
Dec 21 '07 #17
gits
5,390 Expert Mod 4TB
hi ...

of course you should have added the closeMenu(evt);-call to the top of the oncontextmenu-handler ... not only replace the code :) ... my comment said that your further code should follow there ... the following is how your oncontextmenu-handler should look like:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.  
  4.     var srcElement;
  5.  
  6.     if (evt && evt.target) {
  7.         srcElement = evt.target;
  8.  
  9.         if (srcElement.nodeType == 3) {
  10.             srcElement = srcElement.parentNode;
  11.         } else if (window.event) {
  12.             srcElement = window.event.srcElement;
  13.         }
  14.  
  15.         if (srcElement) {
  16.             if (typeof contextMenu == 'undefined') {
  17.                 contextMenu = createContextMenu('contextMenu');
  18.             }
  19.  
  20.             if (contextMenu != null) {
  21.                 var coords = getPageCoords(evt ? evt : window.event);
  22.  
  23.                 contextMenu.style.left = coords.x;
  24.                 contextMenu.style.top = coords.y;
  25.                 contextMenu.srcElement = srcElement;
  26.                 contextMenu.style.visibility = 'visible';
  27.  
  28.                 if (evt && evt.preventDefault) {
  29.                     evt.preventDefault();
  30.                 }
  31.  
  32.                 return false;
  33.             }
  34.         }
  35.     }
  36. }
  37.  
... don't forget our latest adaption to the closeMenu()-function ... it worked for me in all test-cases (FF win/mac)

kind regards
Dec 21 '07 #18
hi ...

of course you should have added the closeMenu(evt);-call to the top of the oncontextmenu-handler ... not only replace the code :) ... my comment said that your further code should follow there ... the following is how your oncontextmenu-handler should look like:

Expand|Select|Wrap|Line Numbers
  1. document.oncontextmenu = function (evt) {
  2.     closeMenu(evt);
  3.  
  4.     var srcElement;
  5.  
  6.     if (evt && evt.target) {
  7.         srcElement = evt.target;
  8.  
  9.         if (srcElement.nodeType == 3) {
  10.             srcElement = srcElement.parentNode;
  11.         } else if (window.event) {
  12.             srcElement = window.event.srcElement;
  13.         }
  14.  
  15.         if (srcElement) {
  16.             if (typeof contextMenu == 'undefined') {
  17.                 contextMenu = createContextMenu('contextMenu');
  18.             }
  19.  
  20.             if (contextMenu != null) {
  21.                 var coords = getPageCoords(evt ? evt : window.event);
  22.  
  23.                 contextMenu.style.left = coords.x;
  24.                 contextMenu.style.top = coords.y;
  25.                 contextMenu.srcElement = srcElement;
  26.                 contextMenu.style.visibility = 'visible';
  27.  
  28.                 if (evt && evt.preventDefault) {
  29.                     evt.preventDefault();
  30.                 }
  31.  
  32.                 return false;
  33.             }
  34.         }
  35.     }
  36. }
  37.  
... don't forget our latest adaption to the closeMenu()-function ... it worked for me in all test-cases (FF win/mac)

kind regards

Hi gits,

Thanks a lot. That one is working perfectly.
What i had done that i called that function at last of my context menu handler.
Now it is working perfectly.

But like other default context menu cant it be closed on right click means after getting context menu if i am doing right click new one is generated and the first one is closed.

I am very happy that it is working.
If you any idea for the above case then mail me. But it is very good.
Thanks a lot.

Regards,
Bibhu
Dec 21 '07 #19
gits
5,390 Expert Mod 4TB
hi ...

glad to hear that ... in case you call it first (the closeMenu) then it should work as you intended ... it closes the eventually open contextmenu and creates a new one ...

kind regards
Dec 21 '07 #20

Post your reply

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

By using this site, you agree to our Privacy Policy and Terms of Use.