close a context menu which is created for mozilla browser

[BibhuAshish]

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

[CODE=javascript]function nrc(e) {
var contextMenu;

document.oncont extmenu = function (evt) {
var srcElement;
if (evt && evt.target) {
srcElement = evt.target;
if (srcElement.nod eType == 3) {
srcElement = srcElement.pare ntNode;
}
} else if (window.event) {
srcElement = window.event.sr cElement;
}
if (srcElement) {
if (typeof contextMenu == 'undefined') {
contextMenu = createContextMe nu('contextMenu ');
}
if (contextMenu != null) {
var coords = getPageCoords(e vt ? evt : window.event);
contextMenu.sty le.left = coords.x;
contextMenu.sty le.top = coords.y;
contextMenu.src Element = srcElement;
contextMenu.sty le.visibility = 'visible';
if (evt && evt.preventDefa ult) {
evt.preventDefa ult();
}
return false;
}
}
};
}

document.onmous edown = nrc;
window.onmoused own = nrc;
if (document.layer s) {
window.captureE vents(Event.MOU SEDOWN);
}

function getPageCoords (evt) {
var coords = { x: 0, y: 0};
if (typeof window.pageXOff set != 'undefined') {
coords.x = window.pageXOff set + evt.clientX;
coords.y = window.pageYOff set + evt.clientY;
} else if (document.compa tMode && document.compat Mode != 'BackCompat') {
coords.x = document.docume ntElement.scrol lLeft + evt.clientX;
coords.y = document.docume ntElement.scrol lTop + evt.clientY;
} else {
coords.x = document.body.s crollLeft + evt.clientX;
coords.y = document.body.s crollTop + evt.clientY;
}
return coords;
}

function createContextMe nu (menuId) {

var menu;
if (document.creat eElement && (menu = document.create Element('div')) ) {
menu.id = menuId;
menu.style.posi tion = 'absolute';
menu.style.back groundColor = '#E3E0E3';
menu.style.alig n='right';
menu.style.bord er = '1px outset black';
menu.style.visi bility = 'hidden'
var link = document.create Element('a');
menu.link = link;
link.href = '#';
link.style.disp lay = 'block';
link.onclick=so mefunc;
link.appendChil d(document.crea teTextNode('Add item'));
menu.appendChil d(link);
menu.onmouseout =menuMouseout; // to close context menu
menu.onclick = menuClick;
document.body.a ppendChild(menu );
return menu;
} else {
return null;
}
}
function menuClick (evt) {
this.style.visi bility = '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.relatedTarg et) {
if (!contains(this , evt.relatedTarg et)) {
this.style.visi bility = 'hidden';
}
} else if (window.event && event.toElement ) {
if (!this.contains (event.toElemen t)) {
this.style.visi bility = 'hidden';
}
}
}

function contains (container, containee) {
while (containee) {
if (container == containee) {
return true;
}
containee = containee.paren tNode;
}
return false;
}
[/CODE]

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:

[CODE=javascript]document.onclic k = function(event) { closeMenu(event ) };[/CODE]
and declare the following method:

[CODE=javascript]function closeMenu(e) {
var id = 'contextMenu';

if (e.target.id != id) {
document.getEle mentById(id).st yle.visibility = 'hidden';
}
}
[/CODE]
this should do the job for mozilla :)

kind regards

[BibhuAshish]

close a context menu which is created for mozilla browser

hi ...

first replace your line 71 with:

[CODE=javascript]document.onclic k = function(event) { closeMenu(event ) };[/CODE]
and declare the following method:

[CODE=javascript]function closeMenu(e) {
var id = 'contextMenu';

if (e.target.id != id) {
document.getEle mentById(id).st yle.visibility = 'hidden';
}
}
[/CODE]
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:

[CODE=javascript]closeMenu(evt);[/CODE]
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:

[CODE=javascript]closeMenu(evt);[/CODE]
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.

[CODE=javascript] function nrc(e) {
var contextMenu;
document.oncont extmenu = function (evt) {
var srcElement;
if (evt && evt.target) {
srcElement = evt.target;
if (srcElement.nod eType == 3) {
srcElement = srcElement.pare ntNode;
}
} else if (window.event) {
srcElement = window.event.sr cElement;
}
if (srcElement) {
if (typeof contextMenu == 'undefined') {
contextMenu = createContextMe nu('contextMenu ');
}
if (contextMenu != null) {
var coords = getPageCoords(e vt ? evt : window.event);
contextMenu.sty le.left = coords.x;
contextMenu.sty le.top = coords.y;
contextMenu.src Element = srcElement;
contextMenu.sty le.visibility = 'visible';
if (evt && evt.preventDefa ult) {
evt.preventDefa ult();
}
return false;
}
}
};
}

document.onmous edown = nrc;
window.onmoused own = nrc;
if (document.layer s) {
window.captureE vents(Event.MOU SEDOWN);
}

function getPageCoords (evt) {
var coords = { x: 0, y: 0};
if (typeof window.pageXOff set != 'undefined') {
coords.x = window.pageXOff set + evt.clientX;
coords.y = window.pageYOff set + evt.clientY;
} else if (document.compa tMode && document.compat Mode != 'BackCompat') {
coords.x = document.docume ntElement.scrol lLeft + evt.clientX;
coords.y = document.docume ntElement.scrol lTop + evt.clientY;
} else {
coords.x = document.body.s crollLeft + evt.clientX;
coords.y = document.body.s crollTop + evt.clientY;
}
return coords;
}

function createContextMe nu (menuId) {
var menu;
if (document.creat eElement && (menu = document.create Element('div')) ) {
menu.id = menuId;
menu.style.posi tion = 'absolute';
menu.style.back groundColor = '#E3E0E3';
menu.style.alig n='right';
menu.style.bord er = '1px outset black';
menu.style.visi bility = 'hidden'
var link = document.create Element('a');
menu.link = link;
link.href = '#';
link.style.disp lay = 'block';
link.onclick=so mefunc;
link.appendChil d(document.crea teTextNode('Add item'));
menu.appendChil d(link);
//menu.onmouseout =menuMouseout;
document.onclic k = function(event) { closeMenu(event ) }; //this is your line
menu.onclick = menuClick;
document.body.a ppendChild(menu );
return menu;
} else {
return null;
}
}
function menuClick (evt) {
this.style.visi bility = 'hidden';
return false;
}

function closeMenu(e) {
var id = 'contextMenu';
if (e.target.id != id) {
document.getEle mentById(id).st yle.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.relatedTarg et) {
if (!contains(this , evt.relatedTarg et)) {
this.style.visi bility = 'hidden';
}
} else if (window.event && event.toElement ) {
if (!this.contains (event.toElemen t)) {
this.style.visi bility = 'hidden';
}
}
}
function contains (container, containee) {
while (containee) {
if (container == containee) {
return true;
}
containee = containee.paren tNode;
}
return false;
}
[/CODE]
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:

[CODE=javascript]document.onclic k = function(event) {
alert('test click');
closeMenu(event );
};[/CODE]
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:

[CODE=javascript]document.onclic k = function(event) {
alert('test click');
closeMenu(event );
};[/CODE]
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:

[CODE=javascript]document.oncont extmenu = function (evt) {
closeMenu(evt);
// your further code here
}
[/CODE]
and put an alert here:

[CODE=javascript]function closeMenu(e) {
var id = 'contextMenu';

alert(e.target. nodeName);

if (e.target.id != id) {
document.getEle mentById(id).st yle.visibility = 'hidden';
}
}
[/CODE]
post what the alert says :)

kind regards

[BibhuAshish]

hi ...

in your code try to use:

[CODE=javascript]document.oncont extmenu = function (evt) {
closeMenu(evt);
// your further code here
}
[/CODE]
and put an alert here:

[CODE=javascript]function closeMenu(e) {
var id = 'contextMenu';

alert(e.target. nodeName);

if (e.target.id != id) {
document.getEle mentById(id).st yle.visibility = 'hidden';
}
}
[/CODE]
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 :)