Posted by admin on December 31, 2008
Context Right Click Menu Using Javascript its a very simple script.
Below is the index.html file you need
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tutorialz.tk</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="menu.css" />
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
SimpleContextMenu.attach('container1', 'CM1');
SimpleContextMenu.attach('container2', 'CM2');
SimpleContextMenu.attach('container3', 'CM3');
</script>
</head>
<body>
<div id="container"><ul id="CM1" class="SimpleContextMenu">
<li><a href="http://www.tutorials.c-o.in/">AAA1</a></li>
<li><a href="http://www.tutorials.c-o.in/">AAA2</a></li>
<li><a href="http://www.tutorials.c-o.in/">AAA3</a></li>
</ul>
<ul id="CM2" class="SimpleContextMenu">
<li><a href="http://www.tutorials.c-o.in/">BBB1</a></li>
<li><a href="http://www.tutorials.c-o.in/">BBB2</a></li>
<li><a href="http://www.tutorials.c-o.in/">BBB3</a></li>
</ul>
<ul id="CM3" class="SimpleContextMenu">
<li><a href="http://www.tutorials.c-o.in/">cccc1</a></li>
<li><a href="http://www.tutorials.c-o.in/">ccc2</a></li>
<li><a href="http://www.tutorials.c-o.in/">ccc3</a></li>
</ul>
<div class="container1" style="border: 1px dashed red; margin-top: 30px; height: 50px; background: #f2f2f2;"></div>
<div class="container2" style="border: 1px dashed blue; margin-top: 30px; height: 50px; background: #f2f2f2;"></div>
<div class="container3" style="border: 1px dashed blue; margin-top: 30px; height: 50px; background: #f2f2f2;"></div>
<p><br /></p>
<p><br /></p>
<p><a href="http://www.tutorials.c-o.in/">All Web Tutorials</a></p>
<div class="clearfix" style="position: absolute; left: 60px; top: 40px">
</div>
</html>
Now our menu.js file
var SimpleContextMenu = {// private attributes
_menus : new Array,
_attachedElement : null,
_menuElement : null,
_preventDefault : true,
_preventForms : true,
// public method. Sets up whole context menu stuff..
setup : function (conf) {
if ( document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.IE = true;
}
if ( !document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.FF = true;
}
if ( document.all && document.getElementById && window.opera ) {
SimpleContextMenu.OP = true;
}
if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {
document.oncontextmenu = SimpleContextMenu._show;
document.onclick = SimpleContextMenu._hide;
if (conf && typeof(conf.preventDefault) != "undefined") {
SimpleContextMenu._preventDefault = conf.preventDefault;
}
if (conf && typeof(conf.preventForms) != "undefined") {
SimpleContextMenu._preventForms = conf.preventForms;
}
}
},
// public method. Attaches context menus to specific class names
attach : function (classNames, menuId) {
if (typeof(classNames) == "string") {
SimpleContextMenu._menus[classNames] = menuId;
}
if (typeof(classNames) == "object") {
for (x = 0; x < classNames.length; x++) {
SimpleContextMenu._menus[classNames[x]] = menuId;
}
}
},
// private method. Get which context menu to show
_getMenuElementId : function (e) {
if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = event.srcElement;
} else {
SimpleContextMenu._attachedElement = e.target;
}
while(SimpleContextMenu._attachedElement != null) {
var className = SimpleContextMenu._attachedElement.className;
if (typeof(className) != "undefined") {
className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
var classArray = className.split(/[ ]+/g);
for (i = 0; i < classArray.length; i++) {
if (SimpleContextMenu._menus[classArray[i]]) {
return SimpleContextMenu._menus[classArray[i]];
}
}
}
if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
} else {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
}
}
return null;
},
// private method. Shows context menu
_getReturnValue : function (e) {
var returnValue = true;
var evt = SimpleContextMenu.IE ? window.event : e;
if (evt.button != 1) {
if (evt.target) {
var el = evt.target;
} else if (evt.srcElement) {
var el = evt.srcElement;
}
var tname = el.tagName.toLowerCase();
if ((tname == "input" || tname == "textarea")) {
if (!SimpleContextMenu._preventForms) {
returnValue = true;
} else {
returnValue = false;
}
} else {
if (!SimpleContextMenu._preventDefault) {
returnValue = true;
} else {
returnValue = false;
}
}
}
return returnValue;
},
// private method. Shows context menu
_show : function (e) {
SimpleContextMenu._hide();
var menuElementId = SimpleContextMenu._getMenuElementId(e);
if (menuElementId) {
var m = SimpleContextMenu._getMousePosition(e);
var s = SimpleContextMenu._getScrollPosition(e);
SimpleContextMenu._menuElement = document.getElementById(menuElementId);
SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
SimpleContextMenu._menuElement.style.display = 'block';
return false;
}
return SimpleContextMenu._getReturnValue(e);
},
// private method. Hides context menu
_hide : function () {
if (SimpleContextMenu._menuElement) {
SimpleContextMenu._menuElement.style.display = 'none';
}
},
// private method. Returns mouse position
_getMousePosition : function (e) {
e = e ? e : window.event;
var position = {
'x' : e.clientX,
'y' : e.clientY
}
return position;
},
// private method. Get document scroll position
_getScrollPosition : function () {
var x = 0;
var y = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
var position = {
'x' : x,
'y' : y
}
return position;
}
}
Our Final file the menu.css
ul.SimpleContextMenu {
display: none;
position: absolute;
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 12px;
list-style-type: none;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}ul.SimpleContextMenu li {
border-bottom: 1px solid #000000;
}
ul.SimpleContextMenu li a {
display: block;
width: 100px;
padding: 2px 10px 3px 10px;
text-decoration: none;
color: #ff0000;
background: #eeeeee;
}
ul.SimpleContextMenu li a:hover {
text-decoration: none;
color: #ffffff;
background: #ff0000;
}
So now all you have to do is to implement all the 3 files with there names as given and enjoy
This is my last post for the year 2008, now we are stepping in to 2009
I wish all my visitors a Very Happy and Prosperous New Year.
VN:F [1.9.13_1145]
please wait…
Rating: 7.5/10 (8 votes cast)
VN:F [1.9.13_1145]
Rating: +3 (from 3 votes)
Incoming search terms:
javascript right click menu (139)
right click menu javascript (52)
right click menu in javascript (38)
right click menu js (7)
right click javascript menu (6)
javascript rightclick menu (6)
context menu using javascript (6)
js right click menu (5)
how to use context menu in pdf file using javascript with c# (5)
rightclickmenu js (4)
SimpleContextMenu attach (4)
change right click menu using javascript (4)
attach popup menu in right click in java script (4)
javascript right click menu tutorial (3)
document expired firefox (3)
javascript code for rightclick menu (3)
javascript context menu in HTML table (3)
javascript right-click menu (3)
menu tip using javascript (3)
right click menu javascript css (3)
how to create contextmenu using javascript with c# (3)
how to create context menu using javascript with c# (3)
javascript change right click menu (2)
right click menus javascript (2)
right click menu in javascript mozilla (2)
right click menu java script (2)
Document Expired firefox 10 (2)
right click context menu in javascript (2)
right click menu javascript simple (2)
firefox back button document expired (2)
how to open popup on right click (2)
right click menu using javascript (2)
right click menu with javascript (2)
menu on right click in javascript (2)
html <li> right click (2)
context menu javascript tutorial (2)
change right click menu javascript (2)
javascript code to show popup menu with element class (2)
document expired in firefox (2)
context menu right click javascript (2)
