Copy and paste the following code in notepad and save it as TestContextMenu.html and test it.
=============================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>¦¦-Browser Compatible Context Menu-¦¦</TITLE>
<META NAME='Generator' CONTENT='Javascript Context Menu'>
<META NAME='Author' CONTENT='Context Menu on Mouse Right Click'>
<META NAME='Keywords' CONTENT='Browser compatible context menu'>
<META NAME='Description' CONTENT='Internet Explorer IE, FireFox, Safari compatible context menu'>
<style>
<!–
.skin0
{
position:absolute;
width:165px;
border:2px solid black;
background-color:#eeddee;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
}
.menuitems
{
padding-left:10px;
padding-right:10px;
}
–>
</style>
<script language=javascript>
//Following function will fired when we click on the right click menu option.
function getSelText(obj)
{
menuobj.style.visibility='hidden'
alert(obj);
}
</script>
</HEAD>
<BODY><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER>
<P><B>
<H2>Right Click on the document and select an option from the context menu. <BR>This example is tested in Internet Explorer 6.0, Mozila Firefox 2.0 and Safari 3.0. Its working fine in all these browser.<B> </H2><BR><H1>Hurrey…..</H1>
</P></CENTER>
<div id='ie5menu' class='skin0' onMouseover='highlightie5(event)' onMouseout='lowlightie5(event)' onClick='jumptoie5(event)' display:none>
<div class='menuitems' url='#' onmousedown=getSelText('Copy');>Copy</div>
<div class='menuitems' url='#' onmousedown=getSelText('Cut');>Cut</div>
<div class='menuitems' url='#' onmousedown=getSelText('Paste');>Paste</div>
<div class='menuitems' url='#' onmousedown=getSelText('New');>New</div>
<div class='menuitems' url='#' onmousedown=getSelText('Edit');>Edit</div>
<div class='menuitems' url='#' onmousedown=getSelText('Submit');>Submit</div>
</div>
<script language='JavaScript1.2'>
//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById('ie5menu')
function showmenuie5(e)
{
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
//same concept with the vertical position
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility='visible'
return false
}
function hidemenuie5(e)
{
menuobj.style.visibility='hidden'
}
function highlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=='menuitems'||ns6&&firingobj.parentNode.className=='menuitems')
{
if (ns6&&firingobj.parentNode.className=='menuitems') firingobj=firingobj.parentNode //up one node
firingobj.style.backgroundColor='#00AAff'
firingobj.style.color='white'
if (display_url==1)
window.status=event.srcElement.url
}
}
function lowlightie5(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=='menuitems'||ns6&&firingobj.parentNode.className=='menuitems')
{
if (ns6&&firingobj.parentNode.className=='menuitems')
{
firingobj=firingobj.parentNode;
}
firingobj.style.backgroundColor='' ;
firingobj.style.color='black' ;
window.status='';
}
}
function jumptoie5(e)
{
var firingobj=ie5? event.srcElement : e.target;
if (firingobj.className=='menuitems'||ns6&&firingobj.parentNode.className=='menuitems')
{
if (ns6&&firingobj.parentNode.className=='menuitems') firingobj=firingobj.parentNode;
if (firingobj.getAttribute('target'))
window.open(firingobj.getAttribute('url'),firingobj.getAttribute('target'));
else
window.location=firingobj.getAttribute('url');
}
}
if (ie5||ns6)
{
menuobj.style.display='';
document.oncontextmenu=showmenuie5 ;
document.onclick=hidemenuie5;
}
</script>
</BODY>
</HTML>
==============================================================
Note: I came to know from some comments that the Code is not working. I here note that the code was not working due to the problem with " character. I don't know but it was encrypted. I retype the code here and think that it will work. Let me know if you found any problem. Thank you...
Enjoy this......
Reference: http://www.dynamicdrive.com
No comments:
Post a Comment