customized right-click menu based on id

Question

Razorholt 0 Newbie Poster

18 Years Ago

Hello everyone,

I'm trying to customize the popup menu based on which table I right-click on. I have disabled the right-click function on the page except for the tables. I did this on purpose. This web page will be called from a python software, using the IE activeX, so no worries here about the browser compatibility.

I just don't know how to get the variable from showmenuie5(getid) and transfer it to the menu

Thank you very much for your help.

- Dan

<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 rowid = getid
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> 
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' url='countrypage.php?id= + rowid + '>Country page</div>
<div class='menuitems' url='add2fav.php?id= + rowid + '>Add to favorite</div>
</div>
<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">
<br><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('1'); }"><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('2'); }"><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('3'); }"><tr><td valign="middle" id="td3"><font onmouseover="cursor:'hand';" face="Arial" color="#cddecc" size=3><b>Row 3</b> -   New Zealand </font></td></tr></table>
</body></html>

javascript

3 Contributors
10 Replies
351 Views
3 Years Discussion Span
Latest Post 14 Years Ago Latest Post by Rajivgandhi

tgreer 189 Made Her Cry

18 Years Ago

You already are... the variable is passed into "getid", and then subsequently into "rowid". I don't know what "menu" you're passing it into. I see a "window.open" command, is your menu a page in a new window? Then simply include your "getid" variable as a querystring parameter in the URL for the new window.

The new window can also refer to variables in the parent window using the "self.parent.getid" syntax.

Your scripts are a bit sloppy: some missing semi-colons, and also, it's good practice to enclose procedure bodies in curly-braces (including your if/else conditional statements).

tgreer 189 Made Her Cry

18 Years Ago

I'm still not seeing/understanding this. DIV elements do not have a "URL" attribute, so your example doesn't make sense to me.

Ignoring all of that, can we "abstract" your question this way:

How do I change the attribute of an element, based on a variable passed into a function?

My answer would be, assuming you have a variable "getid" that corresponds to the ID of the element you wish to modify: document.getElementById(getid).attributeName = "attributeValue"; If that doesn't work, you can try the DOM method "setAttribute()".

tgreer 189 Made Her Cry

18 Years Ago

I still don't understand the question... did my answer not make sense to you?

Since DIV elements do not have a URL attribute, I don't know what to tell you to do.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Razorholt 0 Newbie Poster · Answer 1 · 2006-05-02T02:48:33+00:00

Thanks tgreer for your reply! Ok, here is the scenario I'd like to achieve:

1. When you right-click over one of these tables, the script grabs a value - i.e showmenuie5('1'); - and run the showmenie5() function.
2. The variable grabbed is passed into "getid", then into "rowid". Therefore, rowid = "1";
3. The popup opens :

<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' url='countrypage.php?id= + rowid + '>Country page</div>
<div class='menuitems' url='add2fav.php?id= + rowid + '>Add to favorite</div>
</div>

What I would like to see is

<div class='menuitems' url='countrypage.php?id= + rowid + '>

to become

<div class='menuitems' url='countrypage.php?id=1'>

And I agree, my scripts are a bit sloppy :rolleyes:

- Dan

Razorholt 0 Newbie Poster · Answer 2 · 2006-05-02T03:32:27+00:00

Ohh I see. So, how about:

<div class='menuitems' url='http://www.mywebsite.com/redirect/countrypage.php?id= + rowid + '>Country page</div>

- Dan

Razorholt 0 Newbie Poster · Answer 3 · 2006-05-02T03:54:36+00:00

I agree with you that DIV hasn't got any URL attribute. But this is not a problem since function jumptoie5() will take care of that.

Replace

<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' url='countrypage.php?id= + rowid + '>Country page</div>
<div class='menuitems' url='add2fav.php?id= + rowid + '>Add to favorite</div>
</div>

with

<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class='menuitems' url='http://www.yahoo.com'> Yahoo </div>
<div class='menuitems' url='http://www.msn.com'> MSN </div>
</div>

and you'll see that there is no problem at all.

My problem is that I'd like to customize the "url" based on which table I'm right-clicking on.

Do you see what I mean?

Thanks,
- Dan

tgreer 189 Made Her Cry Team Colleague · Answer 4 · 2006-05-02T04:27:09+00:00

No, sorry. You talk about tables and urls, but show me DIV tags. These DIVs are also located in the HEAD section of your document, which is incorrect... there just is no way to answer the question "how do I change the URL of a DIV tag in the HEAD of my document", because:

1. DIV elements do not go in the HEAD section, and
2. DIV elements do not have a URL attribute.

In any case, the "setAttribute()" DOM method can be used to change/set an element's attributes, or, you can refer to an element's attributes directly, using the syntax I've already shown.

Razorholt 0 Newbie Poster · Answer 5 · 2006-05-02T06:55:25+00:00

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

Thanks tgreer!
- Dan

Here is the code:

<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>

tgreer 189 Made Her Cry Team Colleague · Answer 6 · 2006-05-02T08:42:19+00:00

tgreer 189 Made Her Cry

18 Years Ago

You're welcome.

Rajivgandhi 0 Newbie Poster · Answer 7 · 2009-12-16T17:19:57+00:00

how can I do it by getting the menu items from the database?