

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 10.7</title>
<style rel="stylesheet" id="mainStyle" type="text/css">

html
{background-color:#cccccc}

body
{background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}

h1
{text-align:right; font-size:1.5em; font-weight:bold}

h2
{text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}

.buttons
{margin-top:10px}


</style>
<style type="text/css">

.contextMenus
{position:absolute; background-color:#cfcfcf;
border-style:solid; border-width:1px;
border-color:#EFEFEF #505050 #505050 #EFEFEF;
visibility:hidden}

.menuItem
{cursor:pointer; font-size:9pt;
font-family:Arial, Helvetica, sans-serif;
padding-left:5px; color:black;
background-color:transparent;
text-decoration:none}

.menuItemOn
{cursor:pointer; font-size:9pt;
font-family:Arial, Helvetica, sans-serif;
padding-left:5px; color:red;
background-color:yellow;
text-decoration:underline}

.contextEntry
{font-weight:bold; color:darkred; cursor:pointer}
</style>

<script type="text/javascript">
// context menu data objects
var cMenu = new Object();

cMenu["lookup1"] =
{menuID:"contextMenu1", hrefs:["http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va=sesquipedalian","http://www.m-w.com/cgi-bin/dictionary?book=Thesaurus&va=sesquipedalian"]};

cMenu["lookup2"] =
{menuID:"contextMenu2", hrefs:["http://www.wyomingtourism.org/","http://www.pbs.org/weta/thewest/places/states/wyoming/","http://cnn.looksmart.com/r_search?l&izch&pin=020821x36b42f8a561537f36a1&qc=&col=cnni&qm=0&st=1&nh=10&rf=1&venue=all&keyword=&qp=&search=0&key=wyoming","http://google.com","http://search.yahoo.com"]};

// position and display context menu

function showContextMenu(evt)
{
// hide any existing menu just in case
hideContextMenus();
evt = (evt) ? evt : ((event) ? event : null);

if (evt)
{
var elem = (evt.target) ? evt.target : evt.srcElement;

if (elem.nodeType == 3)
{
elem = elem.parentNode;
}

if (elem.className == "contextEntry")
{
var menu = document.getElementById(cMenu[elem.id].menuID);
// turn on IE mouse capture

if (menu.setCapture)
{
menu.setCapture();
}
// position menu at mouse event location
var left, top;

if (evt.pageX)
{
left = evt.pageX;
top = evt.pageY;

} else if (evt.offsetX || evt.offsetY)
{
left = evt.offsetX;
top = evt.offsetY;

} else if (evt.clientX)
{
left = evt.clientX;
top = evt.clientY;
}
menu.style.left = left + "px";
menu.style.top = top + "px";
menu.style.visibility = "visible";

if (evt.preventDefault)
{
evt.preventDefault();
}
evt.returnValue = false;
}
}
}

// retrieve URL from cMenu object related to chosen item

function getHref(tdElem)
{
var div = tdElem.parentNode.parentNode.parentNode.parentNode;
var index = tdElem.parentNode.rowIndex;

for (var i in cMenu)
{

if (cMenu[i].menuID == div.id)
{
return cMenu[i].hrefs[index];
}
}
return "";
}

// navigate to chosen menu item

function execMenu(evt)
{
evt = (evt) ? evt : ((event) ? event : null);

if (evt)
{
var elem = (evt.target) ? evt.target : evt.srcElement;

if (elem.nodeType == 3)
{
elem = elem.parentNode;
}

if (elem.className == "menuItemOn")
{
location.href = getHref(elem);
}
hideContextMenus();
}
}

// hide all context menus

function hideContextMenus()
{

if (document.releaseCapture)
{
// turn off IE mouse event capture
document.releaseCapture();
}

for (var i in cMenu)
{
var div = document.getElementById(cMenu[i].menuID)
div.style.visibility = "hidden";
}
}

// rollover highlights of context menu items

function toggleHighlight(evt)
{
evt = (evt) ? evt : ((event) ? event : null);

if (evt)
{
var elem = (evt.target) ? evt.target : evt.srcElement;

if (elem.nodeType == 3)
{
elem = elem.parentNode;
}

if (elem.className.indexOf("menuItem") != -1)
{
elem.className = (evt.type == "mouseover") ? "menuItemOn" : "menuItem";
}
}
}

// set tooltips for menu-capable and lesser browsers

function setContextTitles()
{
var cMenuReady = (document.body.addEventListener || typeof document.oncontextmenu != "undefined")
var spans = document.body.getElementsByTagName("span");

for (var i = 0; i < spans.length; i++)
{

if (spans[i].className == "contextEntry")
{

if (cMenuReady)
{
var menuAction = (navigator.userAgent.indexOf("Mac") != -1) ? "Click and hold " : "Right click ";
spans[i].title = menuAction + "to view relevant links"

} else
{
spans[i].title = "Relevant links available with other browsers (IE5+/Windows, Netscape 6+)."
spans[i].style.cursor = "default";
}
}
}
}

// bind events and initialize tooltips

function initContextMenus()
{

if (document.body.addEventListener)
{
// W3C DOM event model
document.body.addEventListener("contextmenu", showContextMenu, true);
document.body.addEventListener("click", hideContextMenus, true);

} else
{
// IE event model
document.body.oncontextmenu = showContextMenu;
}
// set intelligent tooltips
setContextTitles();
}


</script>
</head>
<body onload="initContextMenus()">
<h1>Custom Contextual Menu</h1>
<hr />

<p>This sentence has at least one <span id="lookup1" class="contextEntry">sesquipedalian</span> word
and mention of the state of <span id="lookup2" class="contextEntry">Wyoming</span>, both of which could have additional lookups.</p>

<div id="contextMenu1" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">Merriam-Webster Dictionary</td></tr>
<tr><td class="menuItem">Merriam-Webster Thesaurus</td></tr>
</tbody></table>
</div>

<div id="contextMenu2" class="contextMenus" onclick="hideContextMenus()" onmouseup="execMenu(event)" onmouseover="toggleHighlight(event)" onmouseout="toggleHighlight(event)">
<table><tbody>
<tr><td class="menuItem">Wyoming Tourist Info</td></tr>
<tr><td class="menuItem">State Map</td></tr>
<tr><td class="menuItem">cnn.com</td></tr>
<tr><td class="menuItem">Google</td></tr>
<tr><td class="menuItem">Yahoo Search</td></tr>
</tbody></table>
</div>

</body>
</html>