Grailman
asked on
Put a link in a drop-down...?
How would you go about putting an anchor link in a drop-down box? I tried to use the following didn't work:
<SELECT>
<OPTION><a HREF="mailto:My@Hotmail.co
<OPTION><a HREF="mailto:My@Hotmail.co
<OPTION><a HREF="mailto:My@Hotmail.co
</SELECT>
Thanks in advance!
Grailman
<SELECT>
<OPTION><a HREF="mailto:My@Hotmail.co
<OPTION><a HREF="mailto:My@Hotmail.co
<OPTION><a HREF="mailto:My@Hotmail.co
</SELECT>
Thanks in advance!
Grailman
Go like that:
<html>
<script language="javascript" type="text/javascript">
arLinks = new Array("mailto:1@Hotmail.co
function openLink(selectBox) {
var iCtr = 0;
for (iCtr = 0; iCtr < selectBox.options.length; iCtr++) {
if (selectBox.options[iCtr].s
self.location.href = arLinks[iCtr];
}
}
}
</script>
<body>
<select onchange="openLink(this);"
<option value="0">Page 1</OPTION>
<option value="1">Page 2</OPTION>
<option value="2">Page 3</OPTION>
</SELECT>
</body>
</html>
<html>
<script language="javascript" type="text/javascript">
arLinks = new Array("mailto:1@Hotmail.co
function openLink(selectBox) {
var iCtr = 0;
for (iCtr = 0; iCtr < selectBox.options.length; iCtr++) {
if (selectBox.options[iCtr].s
self.location.href = arLinks[iCtr];
}
}
}
</script>
<body>
<select onchange="openLink(this);"
<option value="0">Page 1</OPTION>
<option value="1">Page 2</OPTION>
<option value="2">Page 3</OPTION>
</SELECT>
</body>
</html>
How about using some JavaScript to go to a certain url when the element is clicked:
***THIS WOULD BE YOUR LIST***
<select name="NameOfTheList" OnChange="Go()">
<option value="http://www.hotmail.com">Go to hotmail</option>
<option value="http://www.google.com">Go to Google!</option>
</select>
***THIS WOULD BE THE JAVASCRIPT (place it on the head)***
<script language=javascript>
function Go(){
window.navigate (NameOfTheList.value);
}
</script>
This will act like the list had links to it, just the way you wanted.
I don't know why everyone wants to make this so complicated. The link dorward posted isn't bad, but they don't look like links with that. You certainly don't need all the scripting, just set the location off the change event:
<html>
<head>
<title> select links </title>
</head>
<body>
<form>
<select onChange="location.href=th
<option value="www.yahoo.com">Go Yahoo</option>
<option value="www.amazon.com"> Go Amazon</option>
<option value="www.ebay.com">Go Ebay</option>
<option value="https://www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>
Cd&
<html>
<head>
<title> select links </title>
</head>
<body>
<form>
<select onChange="location.href=th
<option value="www.yahoo.com">Go Yahoo</option>
<option value="www.amazon.com"> Go Amazon</option>
<option value="www.ebay.com">Go Ebay</option>
<option value="https://www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>
Cd&
Totally true, COBOLdinosaur. Youre a veteran of optimization probably. Your way is really the most acceptable one.
ASKER
Strange but for some reason EE did not post my last comment...
I guess I didn't really specify what I wanted before. I want the user to be able to select an item in the drop-down box but not activate the item just by selection. I really want the drop-down box to act like it has links:
If the user clicks the area just above, beside or below the "link", then the box drops down just as if the user pressed the down arrow. And when the selection is made from the other items in the box, no action is taken: just the new "link" appears in the window. If the user actually clicks on the "link" shown, then it acts like a link.
I'm starting to think that it may not be possible w/o a seperate ActiveX compnonent. I could just put a button next to the boxes to activate the "link" in the box but it would be much cooler to do what I want. Of course we don't always get what we want... :-(
Thanks!
Grailman
I guess I didn't really specify what I wanted before. I want the user to be able to select an item in the drop-down box but not activate the item just by selection. I really want the drop-down box to act like it has links:
If the user clicks the area just above, beside or below the "link", then the box drops down just as if the user pressed the down arrow. And when the selection is made from the other items in the box, no action is taken: just the new "link" appears in the window. If the user actually clicks on the "link" shown, then it acts like a link.
I'm starting to think that it may not be possible w/o a seperate ActiveX compnonent. I could just put a button next to the boxes to activate the "link" in the box but it would be much cooler to do what I want. Of course we don't always get what we want... :-(
Thanks!
Grailman
I barely understand what your intentions are Grailman, I guess I am going to wait for COBOLdinosaur's aproach to learn some. :-)
It's a bit of a hack, and ugly as sin; but it will work this way for at least IE5.5+ Mozilla based browser should be able to digest it, but outside of that I suspect we will find browsers that do not like it. I left the styling the way it was, but you can remove it. There is no way to make one option look like a link unless they all look like links because text decoration cannot be appied to options, only the whole select.
<html>
<head>
<title> select links </title>
</head>
<body>
<form>
<select cenable="no" ready="no"
onClick="if(cenabled=='yes
onChange="this.cenabled='y
style="color:blue;text-dec
<option value="www.yahoo.com">Go Yahoo</option>
<option value="www.amazon.com"> Go Amazon</option>
<option value="www.ebay.com">Go Ebay</option>
<option value="https://www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>
Cd&
<html>
<head>
<title> select links </title>
</head>
<body>
<form>
<select cenable="no" ready="no"
onClick="if(cenabled=='yes
onChange="this.cenabled='y
style="color:blue;text-dec
<option value="www.yahoo.com">Go Yahoo</option>
<option value="www.amazon.com"> Go Amazon</option>
<option value="www.ebay.com">Go Ebay</option>
<option value="https://www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>
Cd&
BTW,
The comment may show the onchange event wrapped, but it MUST all be on one line.
Cd&
The comment may show the onchange event wrapped, but it MUST all be on one line.
Cd&
Grailman,
You can try this one... using onchnage event...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="Javascript">
function doSel(obj)
{
for (i = 0; i < obj.length; i++)
if (obj[i].selected == true)
eval(obj[i].value);
}
</script>
<select name="Ref_ID" onchange="doSel(this)">
<option value="">Please select</option>
<option value="location.href='mail
<option value="location.href='mail
<option value="location.href='mail
</select>
</body>
</html>
HTH...
HAppy programming...
You can try this one... using onchnage event...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="Javascript">
function doSel(obj)
{
for (i = 0; i < obj.length; i++)
if (obj[i].selected == true)
eval(obj[i].value);
}
</script>
<select name="Ref_ID" onchange="doSel(this)">
<option value="">Please select</option>
<option value="location.href='mail
<option value="location.href='mail
<option value="location.href='mail
</select>
</body>
</html>
HTH...
HAppy programming...
Um, I'm not sure, but it seems to be as if the answers suggested are still not what Grailman wants...do you not want to activate the link until the link shown in the little section is clicked? If so, I don't think it's possible with straight javascript, since if you click anywhere on the drop-down menu, it will drop down, so I don't think you can specify areas. However, the effect may be achieved using layers to give the effect of a drop-down menu when it really isn't…I will explore the possibilities of doing this, but no promises! :)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
YES! That is the effect what I to achieve. A little rough (w/o the arrow and table expansion when the link is selected) but basically that is how I envisioned it functioning. I think that in a non-javascript environment I will probably just use a button next to the drop-downs but you've hit it!
Thanks lil_puffball!
Thanks lil_puffball!
How could that have possibly have solved the problem. You cannot select anything. All it does is fire the Google link. It does not drop down until after the link fires. You asked for a select you rejected a straight on change because you don't to fire until a click after the select. Then you accept a "solution" that is little more than a link in a box and has none of the functionality you specified.
I think you owe us an explanation.
Cd&
I think you owe us an explanation.
Cd&
In Mozilla it doesn't even do that. It just goes to Google and spits out a JavaScript error.
>>>In Mozilla it doesn't even do that. It just goes to Google and spits out a JavaScript error.
Look at the code. It is not even a valid HTML page. It is just some hacked JavaSript that generates a couple of elements with events attached. Even if that was the functionality requested, I want to see how you incorporate that code into an existing page without bombing it.
Cd&
Look at the code. It is not even a valid HTML page. It is just some hacked JavaSript that generates a couple of elements with events attached. Even if that was the functionality requested, I want to see how you incorporate that code into an existing page without bombing it.
Cd&
For one thing, it is not "some hacked JavaSript," I did put effort into creating it. Second of all, I don't know what browser you are using because I use IE 6 and it works fine. If you use Mozilla or Netscape it will probably throw some errors, since I said nothing about compatibility. Also I did not say it worked perfectly, I merely proposed a suggestion because I did not fully understand Grailman's question so I created a little prototype to see if it was what he wanted, and if so I would add things to it to make it more like a drop-down. I am willing to fix the script if you would like, but saying it it some hacked javascript is not very nice to say the least.
ASKER
COBOLdinosaur:
>>> You cannot select anything. <<<
The sample I tested drops down the box when you click in the area to the right of the "link" allowing you to select another "link" BUT does not actually activate the link.
I think you may have misunderstood as you stated
>>> don't to fire until a click after the select <<<
I didn't want to fire after the select: I wanted the drop-down to act like a drop-down but fire the link only when it was clicked it (not clicked from the drop-down list but clicked from the currently displayed box).
When I commented before, this is what I asked for:
>>> I want the user to be able to select an item in the drop-down box but not activate the item just by selection <<<
As for Mozilla, you have me there. I didn't try it in other browsers. My bad. I really apperciate your input though and tried to explain what I wanted as best I could.
>>> You cannot select anything. <<<
The sample I tested drops down the box when you click in the area to the right of the "link" allowing you to select another "link" BUT does not actually activate the link.
I think you may have misunderstood as you stated
>>> don't to fire until a click after the select <<<
I didn't want to fire after the select: I wanted the drop-down to act like a drop-down but fire the link only when it was clicked it (not clicked from the drop-down list but clicked from the currently displayed box).
When I commented before, this is what I asked for:
>>> I want the user to be able to select an item in the drop-down box but not activate the item just by selection <<<
As for Mozilla, you have me there. I didn't try it in other browsers. My bad. I really apperciate your input though and tried to explain what I wanted as best I could.
Grailman,
My suggestion is to use a browser detect script. If the user is using IE, they will see the drop-down the way you want, but if they have, say, Mozilla, you can let them view a drop-down that only activates with a button, as you stated above.
Also, would you like me to create an arrow? Because the first script was really only a very simple example and I was going to improve it if it was the type of thing you're looking for, which apparently it is. :)
My suggestion is to use a browser detect script. If the user is using IE, they will see the drop-down the way you want, but if they have, say, Mozilla, you can let them view a drop-down that only activates with a button, as you stated above.
Also, would you like me to create an arrow? Because the first script was really only a very simple example and I was going to improve it if it was the type of thing you're looking for, which apparently it is. :)
Browser detection is never a good idea, browsers lie and keeping up with new browsers is a pain.
See http://www.xs4all.nl/~ppk/js/support.html
See http://www.xs4all.nl/~ppk/js/support.html
Grailman,
If we did not understand the requirement then you should push a little harder. It is likely that it could have ben acheived with a select; atleast in IE, and I think what you have is going to be IE centric. I the comment selected meets your needs that is fine, I just hope the expert intends to keep the page at that address forever so that users who view the PAQ do not getdead link, and that they will stay around long enough to support it while you try and incorporate it into your pages.
Thanks for responding with the explanation, it will help future user who read the thread expecting to find an aswer that includes a select.
lil_puffball,
If you don't like having what you post called hack, then don't post hacks. At the very least post a valid page, so you don't create problems for users who want to see the page. Working in IE6 does not mean much. IE6 will render my laudry list; jsut about everything else chokes on it.
BTW, I referred to by own solution as a hack... Anything out of normal bounds is a hack. If you have a problem with the term, then program by the book.
Cd&
If we did not understand the requirement then you should push a little harder. It is likely that it could have ben acheived with a select; atleast in IE, and I think what you have is going to be IE centric. I the comment selected meets your needs that is fine, I just hope the expert intends to keep the page at that address forever so that users who view the PAQ do not getdead link, and that they will stay around long enough to support it while you try and incorporate it into your pages.
Thanks for responding with the explanation, it will help future user who read the thread expecting to find an aswer that includes a select.
lil_puffball,
If you don't like having what you post called hack, then don't post hacks. At the very least post a valid page, so you don't create problems for users who want to see the page. Working in IE6 does not mean much. IE6 will render my laudry list; jsut about everything else chokes on it.
BTW, I referred to by own solution as a hack... Anything out of normal bounds is a hack. If you have a problem with the term, then program by the book.
Cd&
COBOLdinosaur, I am quite new to all this so I don't know what you mean about a hack. Again, that page was only an example and I don't have Netscape so I can't really test it.
I have posted the code here, so that, as COBOLdinosaur pointed out, users who look at this PAQ will be able to see it (this is a slightly modified version, which looks a lot like a real drop-down menu--Grailman if you want to see the improved version you can visit the website listed above again--basically I have added an arrow and when you put your mouse over the stuff they turn blue, and if you click outside the drop-down it disappears):
<body onClick="gone()">
<script language="Javascript">
var yahoo="<a href='http://www.yahoo.com'>Yahoo</a>";
var google="<a href='http://www.google.com'>Google</a>";
var msn="<a href='http://www.msn.com'>MSN</a>";
var state='true';
var go_away='true';
var blue='0000cc';
var white='ffffff';
function drop()
{
if(state=='true')
{
document.body.insertAdjace
document.body.insertAdjace
document.body.insertAdjace
state='false';
}
else
{
gone();
}
}
function change(type)
{
document.getElementById('m
gone()
}
function gone()
{
if(go_away=='true')
{
google1.innerHTML="";
google1.outerHTML="";
yahoo1.innerHTML = "";
yahoo1.outerHTML = "";
msn1.innerHTML = "";
msn1.outerHTML = "";
state='true';
}
}
</script>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="black" onMouseOver="go_away='fals
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td id="main" height="25" width="80">
<a href='http://www.google.com'>Google</a>
</td>
<td height="25" width="20">
<img src="arrow.gif" onMouseOver="this.src='arr
</td>
</tr></table>
</td></tr>
</table>
</body>
<body onClick="gone()">
<script language="Javascript">
var yahoo="<a href='http://www.yahoo.com'>Yahoo</a>";
var google="<a href='http://www.google.com'>Google</a>";
var msn="<a href='http://www.msn.com'>MSN</a>";
var state='true';
var go_away='true';
var blue='0000cc';
var white='ffffff';
function drop()
{
if(state=='true')
{
document.body.insertAdjace
document.body.insertAdjace
document.body.insertAdjace
state='false';
}
else
{
gone();
}
}
function change(type)
{
document.getElementById('m
gone()
}
function gone()
{
if(go_away=='true')
{
google1.innerHTML="";
google1.outerHTML="";
yahoo1.innerHTML = "";
yahoo1.outerHTML = "";
msn1.innerHTML = "";
msn1.outerHTML = "";
state='true';
}
}
</script>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="black" onMouseOver="go_away='fals
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td id="main" height="25" width="80">
<a href='http://www.google.com'>Google</a>
</td>
<td height="25" width="20">
<img src="arrow.gif" onMouseOver="this.src='arr
</td>
</tr></table>
</td></tr>
</table>
</body>
http://www.cs.tut.fi/~jkorpela/forms/navmenu.html
as it should answer just about any question.