 | |
| Razorholt | Apr 30th, 2006 11:52 pm | |
| customized right-click menu based on id
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> |
| tgreer | May 1st, 2006 3:46 pm | |
| Re: customized right-click menu based on id
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). |
| Razorholt | May 1st, 2006 4:48 pm | |
| Re: customized right-click menu based on id
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 :
Quote:
<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
Quote:
<div class='menuitems' url='countrypage.php?id= + rowid + '>
|
to become
Quote:
<div class='menuitems' url='countrypage.php?id=1'>
|
And I agree, my scripts are a bit sloppy :rolleyes:
- Dan |
| tgreer | May 1st, 2006 5:26 pm | |
| Re: customized right-click menu based on id
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()". |
| Razorholt | May 1st, 2006 5:32 pm | |
| Re: customized right-click menu based on id
Ohh I see. So, how about :
Quote:
<div class='menuitems' url='http://www.mywebsite.com/redirect/countrypage.php?id= + rowid + '>Country page</div>
|
- Dan |
| tgreer | May 1st, 2006 5:45 pm | |
| Re: customized right-click menu based on id
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. |
| Razorholt | May 1st, 2006 5:54 pm | |
| Re: customized right-click menu based on id
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
Quote:
<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
Quote:
<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 | May 1st, 2006 6:27 pm | |
| Re: customized right-click menu based on id
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 | May 1st, 2006 8:55 pm | |
| Re: customized right-click menu based on id
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 | May 1st, 2006 10:42 pm | |
| Re: customized right-click menu based on id
You're welcome. |
| All times are GMT -4. The time now is 7:42 pm. | |
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC