What's new
By:
Filters

Html Code

B

BigC

Fish Maniac
Joined
Mar 4, 2005
Messages
8,294
Reaction score
10
Hi,
I need a little help with some HTML code to provide a link from a drop down list
once the text has been chosen then the link should execute and bring up the new page.
Its probably simple, but I'm a bit stuck and a bit thick.
If I show you the code for the drop down box can you advise me where to place the line of text for the link]
Any help appreciated
Regards
C
 
Google has lots of results when you search for "javascript combobox". HTML itself doesn't have a drop down box (I don't think anyway) so you'll have to use a little bit of javascript, and a drop down box is called a "combobox" in programming terms.

http://www.javascriptkit.com/script/cut147.shtml

This link seemed useful, but as I said, Google has lots of results
 
You can indeed do it with HTML, just people don't tend to anymore since they can get more functionality and smoother dropdown animations using js. Best thing to do is to view source on a page that has it, copy the lot into a new HTML doc, then start deleting all the content till you're left with just the dropdown.

If you've gotten this far, you should know what a link tag looks like (a href

You can indeed do it with HTML, just people don't tend to anymore since they can get more functionality and smoother dropdown animations using js. Best thing to do is to view source on a page that has it, copy the lot into a new HTML doc, then start deleting all the content till you're left with just the dropdown.

If you've gotten this far, you should know what a link tag looks like (a href) so look for that in the remaining code, modify til it works how you want. Then you can copy the code over to your project.
 
The example bignose gave was a good one, I've modified it slightly so now the list is just a drop down taking one row up, and on selection you go straight to the url picked :) Also removed all the table html and script section so you should be able to take everything from form tags inwards and paste into your page
good.gif


Here it is:
Code: 
<html>
<form  name="locationPicker">
<select name="selectLocation" size="1" onChange="javascript:location=document.locationPicker.selectLocation.options[document.locationPicker.selectLocation.selectedIndex].value">
        <option selected value="http://www.javascriptkit.com">JavaScript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">JavaScript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free JavaScripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>
</select>
</form>
</html>

If you want a list rather than a single row drop down then up the size value from "1" for the number of options visible.
 
Hi many thanks,
The problem now is that once I press the back button on my browser the choice I made is still selected
I'd rather (on return to host page) the drop down menu showed the first item on the list which would not have a link attached (i.e. "Please Choose")
Any help on achieving this would be great
Regards
C
 
Not sure I'll have a chance to look at this today, why not have a textual title to the left or above of the drop down saying "Please Choose" and keep the drop down list populated with links only?

I'm sure what you are asking for is possible, it will be more javascript, probably on page load/refresh, to setup the state of the drop down.

edit: had a quick look and it was easy enough, now you have dropdown.onChange which loads the url (as before) and body.onLoad reseting the list:

Code: 
<html>
<body onLoad="javascript:document.locationPicker.selectLocation.selectedIndex = 1;">
<form  name="locationPicker">
<select name="selectLocation" size="1" onChange="javascript:location=document.locationPicker.selectLocation.options[document.locationPicker.selectLocation.selectedIndex].value;">
        <option selected value="http://www.javascriptkit.com">Javascript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">Javascript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free Javascripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>
</select>
</form>
</body>
</html>


Cheers
 
I'm sure I used to do it in pure HTML... It was a long time ago though, maybe I'm wrong. But there are little things out there to help just search for HTML dropdown menu and you get loads from the CSS stuff lots of js, code library stuff, suckerfish menu stuff. There are hundreds of ways to do stuff..
 
I would never use javascript for a drop down box to be honest. Partly because it has useability issues (people with javascript turned off) and partly because CSS is considered as the 'most correct' way of doing things.

I've not had a proper look at the link chris gave but at first glance it looks like what you want.
 
Curiosity101 said:
I would never use javascript for a drop down box to be honest. Partly because it has useability issues (people with javascript turned off) and partly because CSS is considered as the 'most correct' way of doing things.

I've not had a proper look at the link chris gave but at first glance it looks like what you want.
Click to expand...

I get your point about being the norm these days (getting there slowly) but if the site doesn't employ css at all or not that much there is a big overhead for the stylesheets etc just for a drop down menu.....just look at the source odf the site link Chris gave. Also there is still use of javascript there too, probably for browser compatibility (without looking)

And who switches javascript off anyway, it's on by default and anyone who knows anything will want it on to be able to use all the sites they visit, try switching javascript off and see how many of the sites you visit still function 100%.

If BigC wants to use css then fine, but he'll need to look at the web page and it's css/stylesheet references (if it has any) as a whole for integrating a drop down effectively. I assume you would be happy to help with the CSS approach if necessary? IMHO I think the javascript is the simple option (two lines, one on load and one on change) that will work for 99% of people...and therefore I think the job is done...
 
chrisbassist said:
I'm sure I used to do it in pure HTML... It was a long time ago though, maybe I'm wrong. But there are little things out there to help just search for HTML dropdown menu and you get loads from the CSS stuff lots of js, code library stuff, suckerfish menu stuff. There are hundreds of ways to do stuff..
Click to expand...

It can be done in pure HTML if a form button is added and the list isn't reset from the selection on going back on the history. But if BigC wants these two features pure HTML wont cut it...JS or CSS is required.
 
kaivalagi said:
but if the site doesn't employ css at all or not that much there is a big overhead for the stylesheets etc just for a drop down menu.....
Click to expand...

What do you mean by this? The styling for a css drop down is relatively straight forwards, and doesn't need to be done in the head tag if that's what you mean?

Another draw back of javascript is that depending on how you write it, you can end up hiding text from search engine spiders, so if the site needs to attract traffic as opposed to just being for personal use (storing info and pointing friends and such to it). Then javascript can work against anyone trying to do any SEO work on it. It makes a noticable difference on sites with java script navigation as more often than not it comes before the main page content and so is ranked as higher priority than the rest of the page. So the part that the search engine spider should be paying lots of attention too doesn't get the notice it deserves.
 
Stripped back the example on the site Chris linked and here's a working example:

Code: 
<html>
<head>
<style type="text/css"> 
#info {position:relative; height:24em;}
#info h2 {margin-bottom:7em;}
#holder {position:absolute; top:50px; left:320px; width:100px; line-height:18px; height:20px; border:1px solid #f96; overflow:hidden; text-align:center; z-index:100; background:#eee;}
#holder:hover {height:130px; cursor:pointer; background:#eee;}
#holder a:visited, #holder a {display:block; width:100%; line-height:18px; color:#000; text-decoration:none;}
#holder a:hover {color:#c00;background:#ddd;}
</style> 
</head>
<body>
<div id="info"> 
		<div id="holder"> 
		MAIN MENU
 
		<hr /> 
		<a href="http://www.fishforums.net">Fish Forums</a> 
		<a href="http://www.google.com">Google</a> 
		<a href="http://www.cssplay.co.uk">CSS Play</a> 
		</div> 
</div>
</body>
</html>


But, and a big but, it wont work properly in IE6, no surprises there really! From the site: "nfortunately IE does not recognise :hover on anything other than links so fails miserably with this one."
I'm looking through the zillions of other examples for one which will work with ALL browsers, all browsers support javascript A okay
wink.gif


edit: also been thinking, if BigC understands CSS okay then this might be an option, but if not then there may be a bit of a learning curve for him to incorporate this means of drop down into an existing site without it looking out of place. I've given up looking for a CSS means of this that will work in all browsers, if you want one please post it
good.gif
And yes the above could be done with css in the tags themselves but it makes sense to be in the head of the doc in case it gets reused elsewhere in the page...
 
All browsers support java script if it's turned on. The iPad doesn't though. And as I said, if search engine rankings or SEO is to be carried out on the site at some point then CSS is the way to go.

Personally whenever I've done drop down lists I've used a css styled unordered list, I can't remember off the top of my head what the compatability was... but I presume I did it as a css styled unordered list for a reason lol.
Not so helpful I know! Not as helpful as you Kaivalgi, and tbh it depends how user friendly the site has to be...

If it were a business that didn't want to cut off any potential income then of course compatibility and SEO has to be considered... if it's just a personal site then it really doesn't.
 
You must log in or register to reply here.

Similar threads

Wourgh
Beginner Aquarium Advice Needed (UK)
Replies
6
Views
1K
Essjay
Essjay
S
Concerned About White Stringy Feces in My Aquarium
2
Replies
19
Views
3K
smoosh
S
C
Help me save my betta fish
Replies
4
Views
1K
Lcc86
L
Kascopic
My Beautiful Bettas and Addiction to Neocaridina Shrimp
Replies
2
Views
2K
TNG
TNG
connorlindeman
Aquatic Plants for Beginners
Replies
3
Views
2K
CassCats
CassCats

Most reactions

Useful Links

Back
Top