Re: customized right-click menu based on id

•

•

•

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,632 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,227 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

customized right-click menu based on id

•

•

Join Date: Apr 2006

Posts: 5

Reputation: Razorholt is an unknown quantity at this point

Razorholt is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Razorholt is offline

Offline

Newbie Poster

Re: customized right-click menu based on id

#9

May 1st, 2006

Problem solved! I investigated the "setAttribute()" DOM and I applied it to my scripts.

Thanks tgreer!
- Dan

Here is the code:

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<script type="text/javascript"> 
// no right-click
function clickIE() { if (document.all) { }} function clickNS(e) { if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {}}} if (document.layers) { document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; } else { document.onmouseup=clickNS;document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") 
// popup menu
var menuskin = "skin1";
var display_url = 0;
function showmenuie5(getid) {
var gourl1 = "http:\/\/www.yahoo." + getid;
var gourl2 = "http:\/\/www.google." + getid;
theMenu1=document.getElementById("link1");
theMenu1.setAttribute("url",gourl1);
theMenu2=document.getElementById("link2");
theMenu2.setAttribute("url",gourl2);
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth) {
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth; }
else {
ie5menu.style.left = document.body.scrollLeft + event.clientX; }
if (bottomedge < ie5menu.offsetHeight) {
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; }
else {
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible"; }
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url) {
window.status = event.srcElement.url; }
   }
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
   }
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null) {
window.open(event.srcElement.url, event.srcElement.getAttribute("target")); }
else { window.location = event.srcElement.url; }
   }
}
</SCRIPT> 
<style type="text/css">
<!-- 
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
}
-->
</style>
</head><body bgcolor="#004f00">
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' id='link1'> Yahoo </div>
<div class='menuitems' id='link2'> Google </div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.body.onclick = hidemenuie5;
} </script>
<table id='table1' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('ca'); }"><tr><td valign="middle" id="td1"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 1</b> -   Canada </font></td></tr></table>
<table id='table2' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('com'); }"><tr><td valign="middle" id="td2"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 2</b> -   USA </font></td></tr></table>
<table id='table3' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('fr'); }"><tr><td valign="middle" id="td3"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 3</b> -   France </font></td></tr></table>
</body></html>

<html>
<head>
<script type="text/javascript"> 
// no right-click
function clickIE() { if (document.all) { }} function clickNS(e) { if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {}}} if (document.layers) { document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS; } else { document.onmouseup=clickNS;document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") 
// popup menu
var menuskin = "skin1";
var display_url = 0;
function showmenuie5(getid) {
var gourl1 = "http:\/\/www.yahoo." + getid;
var gourl2 = "http:\/\/www.google." + getid;
theMenu1=document.getElementById("link1");
theMenu1.setAttribute("url",gourl1);
theMenu2=document.getElementById("link2");
theMenu2.setAttribute("url",gourl2);
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth) {
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth; }
else {
ie5menu.style.left = document.body.scrollLeft + event.clientX; }
if (bottomedge < ie5menu.offsetHeight) {
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; }
else {
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible"; }
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url) {
window.status = event.srcElement.url; }
   }
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
   }
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null) {
window.open(event.srcElement.url, event.srcElement.getAttribute("target")); }
else { window.location = event.srcElement.url; }
   }
}
</SCRIPT> 
<style type="text/css">
<!-- 
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-top:5px;
padding-bottom:5px;
padding-right:10px;
}
-->
</style>
</head><body bgcolor="#004f00">
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' id='link1'> Yahoo </div>
<div class='menuitems' id='link2'> Google </div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.body.onclick = hidemenuie5;
} </script>
<table id='table1' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('ca'); }"><tr><td valign="middle" id="td1"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 1</b> -   Canada </font></td></tr></table>
<table id='table2' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('com'); }"><tr><td valign="middle" id="td2"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 2</b> -   USA </font></td></tr></table>
<table id='table3' width="518" height='36' cellpadding="0" cellpadding="0" onmousedown="if(window.event.button==2) { showmenuie5('fr'); }"><tr><td valign="middle" id="td3"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 3</b> -   France </font></td></tr></table>
</body></html>

Reply With Quote

Forum Highlights

Related Features

DANIWEB FEATURE INDEX

Advertisement

Statistics

Members: 423,632

Users Online Now: 3,227

Active IRC Users: 25

Forum Threads: 135,673

Forum Posts: 689,721

Code Snippets: 903

Blogs: 150

Blog Entries: 2,285

Directory Links: 569