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 (141)
right click menu javascript (52)
right click menu in javascript (38)
document expired firefox (8)
right click menu js (7)
right click javascript menu (6)
context menu using javascript (6)
javascript rightclick menu (6)
how to use context menu in pdf file using javascript with c# (5)
js right click menu (5)
rightclickmenu js (4)
change right click menu using javascript (4)
attach popup menu in right click in java script (4)
SimpleContextMenu attach (4)
javascript context menu in HTML table (3)
javascript right click menu tutorial (3)
javascript code for rightclick menu (3)
javascript right-click menu (3)
menu tip using javascript (3)
how to create contextmenu using javascript with c# (3)
how to create context menu using javascript with c# (3)
right click menu javascript css (3)
right click menu with javascript (2)
html <li> right click (2)
right click menu in javascript mozilla (2)
document expired back button firefox (2)
document expired in firefox (2)
Document Expired firefox 10 (2)
right click menu javascript simple (2)
how to open popup on right click (2)
right click menus javascript (2)
javascript change right click menu (2)
javascript rightclick menu div (2)
right click menu java script (2)
firefox back button document expired (2)
menu on right click in javascript (2)
java script right click menu (2)
java script ahref on right click diplay menu (2)
context menu javascript tutorial (2)
change right click menu javascript (2)
