close a context menu which is created for mozilla browser

[BibhuAshish]

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

function nrc(e) {
    var contextMenu;
 
    document.oncontextmenu = function (evt) {
        var srcElement;
        if (evt && evt.target) {
            srcElement = evt.target;
            if (srcElement.nodeType == 3) {
                 srcElement = srcElement.parentNode;
            }
        } else if (window.event) {
            srcElement = window.event.srcElement;
        }
        if (srcElement) {
            if (typeof contextMenu == 'undefined') {
                contextMenu = createContextMenu('contextMenu');
            }
            if (contextMenu != null) {
                var coords = getPageCoords(evt ? evt : window.event);
                contextMenu.style.left = coords.x;
                contextMenu.style.top = coords.y;
                contextMenu.srcElement = srcElement;
                contextMenu.style.visibility = 'visible';
                if (evt && evt.preventDefault) {
                    evt.preventDefault();
                }
                return false;
            }
        }
    };
}
 
    document.onmousedown = nrc;
    window.onmousedown = nrc;
    if (document.layers) {
        window.captureEvents(Event.MOUSEDOWN);
    }
 
function getPageCoords (evt) {
    var coords = { x: 0, y: 0};
    if (typeof window.pageXOffset != 'undefined') {
        coords.x = window.pageXOffset + evt.clientX;
        coords.y = window.pageYOffset + evt.clientY;
    } else if (document.compatMode && document.compatMode != 'BackCompat') {
        coords.x = document.documentElement.scrollLeft + evt.clientX;
        coords.y = document.documentElement.scrollTop + evt.clientY;
    } else {
        coords.x = document.body.scrollLeft + evt.clientX;
        coords.y = document.body.scrollTop + evt.clientY;
    }
    return coords;
}
 
function createContextMenu (menuId) {
 
    var menu;
    if (document.createElement && (menu = document.createElement('div'))) {
        menu.id = menuId;
        menu.style.position = 'absolute';
        menu.style.backgroundColor = '#E3E0E3';
        menu.style.align='right';
        menu.style.border = '1px outset black';
        menu.style.visibility = 'hidden'
                var link = document.createElement('a');
        menu.link = link;
        link.href = '#';
        link.style.display = 'block';
                link.onclick=somefunc;
                link.appendChild(document.createTextNode('Add item'));
                menu.appendChild(link);
        menu.onmouseout =menuMouseout; // to close context menu
        menu.onclick = menuClick;
        document.body.appendChild(menu);
        return menu;
    } else {
        return null;
    }
}
function menuClick (evt) {
  this.style.visibility = 'hidden';
  return false;
}
 
function menuMouseout (evt) { // on mouse out of the contextmenu this func will be called and context menu will be closed
  if (evt && evt.relatedTarget) {
    if (!contains(this, evt.relatedTarget)) {
      this.style.visibility = 'hidden';
    }
  } else if (window.event && event.toElement) {
    if (!this.contains(event.toElement)) {
      this.style.visibility = 'hidden';
    }
  }
}
 
function contains (container, containee) {
  while (containee) {
    if (container == containee) {
      return true;
    }
    containee = containee.parentNode;
  }
  return false;
}
 

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.

[gits]

hi ...

first replace your line 71 with:

document.onclick = function(event) { closeMenu(event) };

and declare the following method:

function closeMenu(e) {
   var id = 'contextMenu';
 
   if (e.target.id != id) {
       document.getElementById(id).style.visibility = 'hidden';
   }
}
 

this should do the job for mozilla :)

kind regards

[BibhuAshish]

hi ...

first replace your line 71 with:

document.onclick = function(event) { closeMenu(event) };

and declare the following method:

function closeMenu(e) {
   var id = 'contextMenu';
 
   if (e.target.id != id) {
       document.getElementById(id).style.visibility = 'hidden';
   }
}
 

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.

[gits]

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:

closeMenu(evt);

right at the start of your oncontextmenu-handler-function (orig. line 5 of your posted code) ...

kind regards

[BibhuAshish]

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:

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.

[gits]

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?

[BibhuAshish]

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.

      function nrc(e) {
           var contextMenu;
         document.oncontextmenu = function (evt) {
              var srcElement;
             if (evt && evt.target) {
                  srcElement = evt.target;
                  if (srcElement.nodeType == 3) {
                      srcElement = srcElement.parentNode;
                 }
              } else if (window.event) {
                  srcElement = window.event.srcElement;
             }
              if (srcElement) {
                  if (typeof contextMenu == 'undefined') {
                      contextMenu = createContextMenu('contextMenu');
                  }
                  if (contextMenu != null) {
                      var coords = getPageCoords(evt ? evt : window.event);
                      contextMenu.style.left = coords.x;
                      contextMenu.style.top = coords.y;
                      contextMenu.srcElement = srcElement;
                      contextMenu.style.visibility = 'visible';
                       if (evt && evt.preventDefault) {
                          evt.preventDefault();
                     }
                     return false;
                  }
              }
          };
      }
 
          document.onmousedown = nrc;
          window.onmousedown = nrc;
          if (document.layers) {
              window.captureEvents(Event.MOUSEDOWN);
          }
 
      function getPageCoords (evt) {
          var coords = { x: 0, y: 0};
          if (typeof window.pageXOffset != 'undefined') {
              coords.x = window.pageXOffset + evt.clientX;
              coords.y = window.pageYOffset + evt.clientY;
          } else if (document.compatMode && document.compatMode != 'BackCompat') {
              coords.x = document.documentElement.scrollLeft + evt.clientX;
              coords.y = document.documentElement.scrollTop + evt.clientY;
          } else {
              coords.x = document.body.scrollLeft + evt.clientX;
              coords.y = document.body.scrollTop + evt.clientY;
          }
          return coords;
      }
 
      function createContextMenu (menuId) {
          var menu;
         if (document.createElement && (menu = document.createElement('div'))) {
              menu.id = menuId;
              menu.style.position = 'absolute';
              menu.style.backgroundColor = '#E3E0E3';
              menu.style.align='right';
              menu.style.border = '1px outset black';
              menu.style.visibility = 'hidden'
                      var link = document.createElement('a');
              menu.link = link;
              link.href = '#';
              link.style.display = 'block';
                      link.onclick=somefunc;
                      link.appendChild(document.createTextNode('Add item'));
                      menu.appendChild(link);
             //menu.onmouseout =menuMouseout; 
        document.onclick = function(event) { closeMenu(event) }; //this is your line
              menu.onclick = menuClick;
              document.body.appendChild(menu);
              return menu;
          } else {
              return null;
           }
     }
      function menuClick (evt) {
        this.style.visibility = 'hidden';
       return false;
       }
 
    function closeMenu(e) {
    var id = 'contextMenu';
    if (e.target.id != id) {
        document.getElementById(id).style.visibility = 'hidden';
    }
     }
 
 
      function menuMouseout (evt) { // on mouse out of the contextmenu this func will be called and context menu will be closed
        if (evt && evt.relatedTarget) {
         if (!contains(this, evt.relatedTarget)) {
             this.style.visibility = 'hidden';
          }
        } else if (window.event && event.toElement) {
          if (!this.contains(event.toElement)) {
            this.style.visibility = 'hidden';
          }
        }
      }
       function contains (container, containee) {
        while (containee) {
          if (container == containee) {
            return true;
         }
          containee = containee.parentNode;
      }
       return false;
    }
 

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.

[BibhuAshish]

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.

[gits]

hi ...

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

document.onclick = function(event) { 
    alert('test click');
    closeMenu(event); 
};

and do a rightclick in the window?

kind regards

PS: please use code tags when posting source-code

[BibhuAshish]

hi ...

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

document.onclick = function(event) { 
    alert('test click');
    closeMenu(event); 
};

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.

[gits]

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

[BibhuAshish]

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

[gits]

hi ...

in your code try to use:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
    // your further code here
}
 

and put an alert here:

function closeMenu(e) {
    var id = 'contextMenu';
 
    alert(e.target.nodeName);
 
    if (e.target.id != id) {
        document.getElementById(id).style.visibility = 'hidden';
    }
}
 

post what the alert says :)

kind regards

[BibhuAshish]

hi ...

in your code try to use:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
    // your further code here
}
 

and put an alert here:

function closeMenu(e) {
    var id = 'contextMenu';
 
    alert(e.target.nodeName);
 
    if (e.target.id != id) {
        document.getElementById(id).style.visibility = 'hidden';
    }
}
 

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..

[gits]

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 :)

[gits]

ok ... i checked it again ... we should slightly adapt the closeMenu() method:

function closeMenu(e) {
    var id = 'contextMenu';
 
    if (e.target.id != id) {
        var node = document.getElementById(id);
 
        if (node != null) {
            node.style.visibility = 'hidden';
        }
    }
}
 

this avoids an error in case no node with id is present. now use this:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
    // your further code here
}
 

i guess it will work now :)

kind regards

[BibhuAshish]

ok ... i checked it again ... we should slightly adapt the closeMenu() method:

function closeMenu(e) {
    var id = 'contextMenu';
 
    if (e.target.id != id) {
        var node = document.getElementById(id);
 
        if (node != null) {
            node.style.visibility = 'hidden';
        }
    }
}
 

this avoids an error in case no node with id is present. now use this:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
    // your further code here
}
 

i guess it will work now :)

kind regards

Hi gits,
I wrote the following code in my closeMenu func, with

document.onclick=function (evt) {
    closeMenu(evt);
}
 

function closeMenu(e) {
    var id = 'contextMenu';
    if (e.target.id != id) {
        var node = document.getElementById(id);
        if (node != null) {
            node.style.visibility = 'hidden';
        }
    }
}
 

only left is working.

But when i wrote like the following:

document.oncontextmenu=function (evt) {
    closeMenu(evt);
}
 

function closeMenu(e) {
    var id = 'contextMenu';
    if (e.target.id != id) {
        var node = document.getElementById(id);
        if (node != null) {
            node.style.visibility = 'hidden';
        }
    }
}
 

neither left click nor right click is working.

Regards,
Bibhu

[gits]

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:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
 
    var srcElement;
 
    if (evt && evt.target) {
        srcElement = evt.target;
 
        if (srcElement.nodeType == 3) {
            srcElement = srcElement.parentNode;
        } else if (window.event) {
            srcElement = window.event.srcElement;
        }
 
        if (srcElement) {
            if (typeof contextMenu == 'undefined') {
                contextMenu = createContextMenu('contextMenu');
            }
 
            if (contextMenu != null) {
                var coords = getPageCoords(evt ? evt : window.event);
 
                contextMenu.style.left = coords.x;
                contextMenu.style.top = coords.y;
                contextMenu.srcElement = srcElement;
                contextMenu.style.visibility = 'visible';
 
                if (evt && evt.preventDefault) {
                    evt.preventDefault();
                }
 
                return false;
            }
        }
    }
}
 

... don't forget our latest adaption to the closeMenu()-function ... it worked for me in all test-cases (FF win/mac)

kind regards

[BibhuAshish]

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:

document.oncontextmenu = function (evt) {
    closeMenu(evt);
 
    var srcElement;
 
    if (evt && evt.target) {
        srcElement = evt.target;
 
        if (srcElement.nodeType == 3) {
            srcElement = srcElement.parentNode;
        } else if (window.event) {
            srcElement = window.event.srcElement;
        }
 
        if (srcElement) {
            if (typeof contextMenu == 'undefined') {
                contextMenu = createContextMenu('contextMenu');
            }
 
            if (contextMenu != null) {
                var coords = getPageCoords(evt ? evt : window.event);
 
                contextMenu.style.left = coords.x;
                contextMenu.style.top = coords.y;
                contextMenu.srcElement = srcElement;
                contextMenu.style.visibility = 'visible';
 
                if (evt && evt.preventDefault) {
                    evt.preventDefault();
                }
 
                return false;
            }
        }
    }
}
 

... 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

[gits]

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