?
Solved

Put a link in a drop-down...?

Posted on 2003-02-28
23
Medium Priority
?
189 Views
Last Modified: 2010-04-06
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.com">My Hotmail</A></OPTION>
      <OPTION><a HREF="mailto:My@Hotmail.com">My Hotmail</A></OPTION>
      <OPTION><a HREF="mailto:My@Hotmail.com">My Hotmail</A></OPTION>
   </SELECT>

Thanks in advance!
Grailman
0
Comment
Question by:Grailman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 3
  • +4
23 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 8044275
You can't put anchors in select elements, I suspect that what you mean is "How can I make a select element act as a navigational tool". In which case you should read this:

http://www.cs.tut.fi/~jkorpela/forms/navmenu.html

as it should answer just about any question.
0
 
LVL 1

Expert Comment

by:spiritwithin
ID: 8045583
Go like that:


<html>

 <script language="javascript" type="text/javascript">
  arLinks = new Array("mailto:1@Hotmail.com","mailto:2@Hotmail.com","mailto:3@Hotmail.com");

  function openLink(selectBox) {
   var iCtr = 0;
   for (iCtr = 0; iCtr < selectBox.options.length; iCtr++) {
    if (selectBox.options[iCtr].selected == true) {
     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>
0
 
LVL 14

Expert Comment

by:Esopo
ID: 8045646

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.

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8049033
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=this.options[this.selectedIndex].value" style="color:blue;text-decoration:underline;">
<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="www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>

Cd&
0
 
LVL 1

Expert Comment

by:spiritwithin
ID: 8049218
Totally true, COBOLdinosaur. Youre a veteran of optimization probably. Your way is really the most acceptable one.
0
 
LVL 1

Author Comment

by:Grailman
ID: 8050379
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
0
 
LVL 14

Expert Comment

by:Esopo
ID: 8050464
I barely understand what your intentions are Grailman, I guess I am going to wait for COBOLdinosaur's aproach to learn some. :-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8051941
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') if (this.ready=='yes'){location.href=this.options[this.selectedIndex].value} else {this.ready='yes'}"
   onChange="this.cenabled='yes';this.ready='no'"
style="color:blue;text-decoration:underline;">
<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="www.experts-exchange.com"> Go Experts Exchange</option>
</select>
</form>
</body>
</html>

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8051948
BTW,

The comment may show the onchange event wrapped, but it MUST all be on one line.

Cd&
0
 
LVL 15

Expert Comment

by:gladxml
ID: 8055177
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='mailto:MyName1@Hotmail.com'">My Hotmail1</option>
<option value="location.href='mailto:MyName2@Hotmail.com'">My Hotmail2</option>
<option value="location.href='mailto:MyName3@Hotmail.com'">My Hotmail3</option>
</select>
</body>
</html>

HTH...

HAppy programming...

0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8068500
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! :)
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 400 total points
ID: 8068878
Grailman, I have put together a little ditty, you can go see it at http://members.rogers.com/kelfy/dropdown.htm
It's not perfect yet but I would like to know if this is sort of the type of thing you're looking for. If so, please let me know and I will fix it up! :)
0
 
LVL 1

Author Comment

by:Grailman
ID: 8073515
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!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8073655
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&
0
 
LVL 17

Expert Comment

by:dorward
ID: 8073698
In Mozilla it doesn't even do that. It just goes to Google and spits out a JavaScript error.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8073917
>>>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&
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8075172
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.
0
 
LVL 1

Author Comment

by:Grailman
ID: 8075273
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.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8075482
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. :)
0
 
LVL 17

Expert Comment

by:dorward
ID: 8075631
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 8075768
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&
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8076184
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.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8076648
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.insertAdjacentHTML('BeforeEnd','<div style="position:absolute; top:43; left:10;" onClick="change(google);" id="google1"><table border="1" cellpadding="0" cellspacing="0" bordercolor="black"><tr><td height="25" width="100" onMouseOver="this.bgColor=blue"; onMouseOut="this.bgColor=white";>Google</td></tr></table></div>');
document.body.insertAdjacentHTML('BeforeEnd','<div style="position:absolute; top:68; left:10;" onClick="change(yahoo);" id="yahoo1"><table border="1" cellpadding="0" cellspacing="0" bordercolor="black"><tr><td height="25" width="100" onMouseOver="this.bgColor=blue"; onMouseOut="this.bgColor=white";>Yahoo</td></tr></table></div>');
document.body.insertAdjacentHTML('BeforeEnd','<div style="position:absolute; top:93; left:10;" onClick="change(msn);" id="msn1"><table border="1" cellpadding="0" cellspacing="0" bordercolor="black"><tr><td height="25" width="100" onMouseOver="this.bgColor=blue"; onMouseOut="this.bgColor=white";>MSN</td></tr></table></div>');
state='false';
}

else
{
gone();
}
}

function change(type)
{
document.getElementById('main').innerHTML=type;
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='false';" onMouseOut="go_away='true';" onClick="drop()";><tr><td>
<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='arrow_over.gif'"; onMouseOut="this.src='arrow.gif'"; onMouseDown="this.src='arrow_down.gif'"; onMouseUp="this.src='arrow.gif'";>
</td>
</tr></table>
</td></tr>
</table>

</body>


0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question