Entry
How can I replace the context menu with my own where links in the menu are context sensitive?
How can I replace the context menu with my own where links in the menu are context sensitive?
Mar 24th, 2009 20:02
chat alarab, Martin Honnen,
There is no standard event associated with the context menu but IE 5
introduced the event with the name 'contextmenu' respectively the
oncontextmenu event handler and other browsers like Netscape 7,
Mozilla, Firefox have followed to implement that.
Thus in those browsers you can prevent the browser's context menu to be
shown by returning false in the oncontextmenu event handler, at least as
long as the browser is not configured to disallow scripts that.
You can then show your own "context menu" by showing an absolutely
positioned HTML element like a <div> element with the proper content
(some links for instance).
To have that "context menu" depend on the context, that is the element
clicked, you need to read out the srcElement (IE) respectively the
target (Mozilla and other W3C DOM compliant browsers) property of the
event object.
Below follows an example that displays its own "context menu" allowing
you to show the innerHTML of the element clicked. The example has been
tested with Netscape 7.2 and IE 6 but should work with Netscape 7,
Mozilla 1.x, Firefox, and
IE 5/5.5 too:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>context menu displaying the tag name of the element clicked</title>
<style type="text/css">
div#contextMenu a:link, div#contextMenu a:active, div#contextMenu
a:visited {
color: black;
text-decoration: none;
margin: 1px 1px;
}
div#contextMenu a:hover {
background-color: darkblue;
color: white;
}
</style>
<script type="text/javascript">
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 + 'px';
contextMenu.style.top = coords.y + 'px';
contextMenu.srcElement = srcElement;
contextMenu.link.firstChild.nodeValue = 'innerHTML of ' +
srcElement.tagName.toLowerCase();
contextMenu.style.visibility = 'visible';
if (evt && evt.preventDefault) {
evt.preventDefault();
}
return false;
}
}
};
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 = 'white';
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 = showInnerHTML;
menu.onmouseout = menuMouseout;
menu.onclick = menuClick;
link.appendChild(document.createTextNode(' '));
menu.appendChild(link);
document.body.appendChild(menu);
return menu;
}
else {
return null;
}
}
function showInnerHTML (evt) {
alert(this.parentNode.srcElement.innerHTML);
return false;
}
function menuClick (evt) {
this.style.visibility = 'hidden';
return false;
}
function menuMouseout (evt) {
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;
}
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with a
<a href="http://www.kibo.com/">link</a>
and an image: <img alt="Kibo inside" src="kiboInside.gif">
</p>
</body>
</html>
http://www.ksa-123.com
http://www.ksa-2000.com
http://www.chat-kuwait.com
http://www.vip-kuwait.com
http://www.chat-3rb.com
http://www.vip-3rb.com
http://www.3rb-chat.com
http://www.vipgulf.com
http://www.chat-gulf.com
http://www.vip-gulf.com
