Facebook Twitter Reset

This Tutorial Has Been Viewed 3,206 Times.
1

Context Right Click Menu Using Javascript

By | Published: 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]
Rating: 7.5/10 (8 votes cast)
VN:F [1.9.13_1145]
Rating: +3 (from 3 votes)
Context Right Click Menu Using Javascript , 7.5 out of 10 based on 8 ratings

Incoming search terms:




You will also be interested in ,

Tags: ,

One Response to “Context Right Click Menu Using Javascript”

  1. Reply
    alarroste
    February 19, 2009 at 12:26 am #

    Hello webmaster,
    I would like to share with you a link, write to alarroste@mail.ru

    VA:F [1.9.13_1145]
    Rating: 1.0/5 (1 vote cast)
    VA:F [1.9.13_1145]
    Rating: 0 (from 0 votes)

Leave a Comment

Spam protection by WP Captcha-Free

Affordable Seo PackagesSeo BlogEdu Backlinks
More in PHP (55 of 122 articles)