•
•
•
•
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 361,914 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 2,571 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.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2589 | Replies: 9 | Solved
 |
•
•
Join Date: Apr 2006
Posts: 5
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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>
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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).
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).
Last edited by tgreer : May 1st, 2006 at 4:32 pm.
•
•
Join Date: Apr 2006
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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 :
What I would like to see is
to become
And I agree, my scripts are a bit sloppy :rolleyes:
- Dan
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>
•
•
•
•
<div class='menuitems' url='countrypage.php?id= + rowid + '>
•
•
•
•
<div class='menuitems' url='countrypage.php?id=1'>
And I agree, my scripts are a bit sloppy :rolleyes:
- Dan
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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:
If that doesn't work, you can try the DOM method "setAttribute()".
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()".
•
•
Join Date: Apr 2006
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Ohh I see. So, how about:
- Dan
•
•
•
•
<div class='menuitems' url='http://www.mywebsite.com/redirect/countrypage.php?id= + rowid + '>Country page</div>
- Dan
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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.
Since DIV elements do not have a URL attribute, I don't know what to tell you to do.
•
•
Join Date: Apr 2006
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
with
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
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>
•
•
•
•
<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>
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
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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.
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.
•
•
Join Date: Apr 2006
Posts: 5
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Problem solved! I investigated the "setAttribute()" DOM and I applied it to my scripts.
Thanks tgreer!
- Dan
Here is the code:
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> |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Mouse Right Click Menu (Windows NT / 2000 / XP / 2003)
- menu-based program (Java)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: tag that shows hand on mouseover
- Next Thread: database application on cd
