Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > BOOK: Beginning HTML, XHTML, CSS, and JavaScript
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning HTML, XHTML, CSS, and JavaScript
This is the forum to discuss the Wrox book Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett; ISBN: 978-0-470-54070-1
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning HTML, XHTML, CSS, and JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 7th, 2010, 12:58 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default Turning a drop down list into links

Hello everyone!
Can someone please give me the code to turn a drop down list into a link? For example: There are 5 different items in the drop down list. Each time you click an item, it sends you to a different part of the same page.
Reply With Quote
  #2 (permalink)  
Old April 9th, 2010, 04:38 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

If by "...turn a drop down list into a link..." you mean how to turn a select item into a clickable anchor tag I think you will find, if it can be done, it is not trivial and will require copious amounts of DHTML/JavaScript. As far as I know it is not possible.

However, there is a solution for your problem and it lies in the 'onchange' event of a select box and is pretty trivial. Consider the following:

html Code:
<select onchange="window.location=this.options[this.selectedIndex].value;">
     <option value="">Choose a destination...</option>
     <option value=http://www.reddit.com>Reddit</option>
     <option value=http://www.digg.com>Digg</option>
     <option value="http://www.thinkgeek.com/">ThinkGeek</option>
</select>

In cases like the above (where you are linking to external websites) you will probably want to use window.open('url', 'windowName') instead of window.location so that you aren't sending traffic AWAY from your website.

hth.
-Doug
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
Reply With Quote
  #3 (permalink)  
Old April 9th, 2010, 05:36 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by dparsons View Post
If by "...turn a drop down list into a link..." you mean how to turn a select item into a clickable anchor tag I think you will find, if it can be done, it is not trivial and will require copious amounts of DHTML/JavaScript. As far as I know it is not possible.

However, there is a solution for your problem and it lies in the 'onchange' event of a select box and is pretty trivial. Consider the following:

html Code:
<select onchange="window.location=this.options[this.selectedIndex].value;">
     <option value="">Choose a destination...</option>
     <option value=http://www.reddit.com>Reddit</option>
     <option value=http://www.digg.com>Digg</option>
     <option value="http://www.thinkgeek.com/">ThinkGeek</option>
</select>

In cases like the above (where you are linking to external websites) you will probably want to use window.open('url', 'windowName') instead of window.location so that you aren't sending traffic AWAY from your website.

hth.
-Doug

Can you explain the first line of code and what I would put in there? I don't understand it.
Also, I'm not sending people away from my website. I am creating links to different sections of the same page on my website.
Reply With Quote
  #4 (permalink)  
Old April 9th, 2010, 06:19 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

Sure! This line

html Code:
<select onchange="window.location=this.options[this.selectedIndex].value;">

is your typical HTML combo box. The onchange attribute is a special type of attribute because it can execute javascript code when something happens. Something depends on which attribute you as there are quite a few of these types of attributes that are all prefixed with on (onMouseOver, onMouseOut, onFocus, onBlur, etc). In the case above we want something to happen when we change a value in our combo box so we select the onchange attribute. The code that follows between the " " is a small bit of JavaScript that I will break down for you:

window.location (sometimes wrote as window.location.href) refers to the current location (url) of the window this code resides in. So if you were to copy and paste my original bit of code from my first post into a new HTML file then open it in a web browser, window.location refers to that browser window location.

this.options[this.selectedIndex].value is where we determine what URL to send a user to. Let me start by saying that 'this' is a special keyword in JavaScript and I could fill many paragraphs explaining what it is and what it is used for. For now just know that in this context it refers to the combo box and will give you access to all of the combo boxes properties. options is a property of a combo box which contains all of the items within the combo box (in my case the items Digg, Reddit, ThinkGeek); an array to be exact. Now, since you want to redirect to the item that the user selected we need to figure our WHICH item they selected and can do so by using the selectedIndex property of the comboBox. This returns the numerical position of the item the user selected. Then finally we want the value (the URL I defined in my original code) of the selected item so we use the value property of the option. The value returns a url which causes the JavaScript to redirect to that url!

For your purposes you could probably change

html Code:
<option value=http://www.reddit.com>Reddit</option>

to something like

html Code:
<option value=mypage.html>My Page</option>


Does that make sense?

hth.
-Doug
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
Reply With Quote
  #5 (permalink)  
Old April 10th, 2010, 08:19 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by dparsons View Post
Sure! This line

html Code:
<select onchange="window.location=this.options[this.selectedIndex].value;">

is your typical HTML combo box. The onchange attribute is a special type of attribute because it can execute javascript code when something happens. Something depends on which attribute you as there are quite a few of these types of attributes that are all prefixed with on (onMouseOver, onMouseOut, onFocus, onBlur, etc). In the case above we want something to happen when we change a value in our combo box so we select the onchange attribute. The code that follows between the " " is a small bit of JavaScript that I will break down for you:

window.location (sometimes wrote as window.location.href) refers to the current location (url) of the window this code resides in. So if you were to copy and paste my original bit of code from my first post into a new HTML file then open it in a web browser, window.location refers to that browser window location.

this.options[this.selectedIndex].value is where we determine what URL to send a user to. Let me start by saying that 'this' is a special keyword in JavaScript and I could fill many paragraphs explaining what it is and what it is used for. For now just know that in this context it refers to the combo box and will give you access to all of the combo boxes properties. options is a property of a combo box which contains all of the items within the combo box (in my case the items Digg, Reddit, ThinkGeek); an array to be exact. Now, since you want to redirect to the item that the user selected we need to figure our WHICH item they selected and can do so by using the selectedIndex property of the comboBox. This returns the numerical position of the item the user selected. Then finally we want the value (the URL I defined in my original code) of the selected item so we use the value property of the option. The value returns a url which causes the JavaScript to redirect to that url!

For your purposes you could probably change

html Code:
<option value=http://www.reddit.com>Reddit</option>

to something like

html Code:
<option value=mypage.html>My Page</option>


Does that make sense?

hth.
-Doug

Yes thanks so much!
Reply With Quote
  #6 (permalink)  
Old April 10th, 2010, 08:27 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

Welcome =]
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
Reply With Quote
  #7 (permalink)  
Old April 11th, 2010, 12:14 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

This looks like a successful way to resolve the initial problem posed, but I do have a question. I've always been told that this technique was inaccessible. Has that changed, or is it better to execute navigation as sidebar lists, create drop down menus, etc.?
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #8 (permalink)  
Old April 11th, 2010, 12:42 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

I suppose it depends on what you mean by inaccessible so rather than guess at what you mean here are the pitfalls that I see with using navigation like this:
  • If for some ungodly reason a user would have javascript disabled in their browser the nav won't work (obviously).
  • AFAIK GoogleBot and other spiders will not crawl based upon this type of navigation since they can't execute JavaScript.
  • If your site needs to be Section 509 Compliant (US Federal law related to accessiblity of websites of Federal Web resources to people with disabilities) this type of nav is terrible since most Screen Reader applications will have no way of knowing that this is a type of navigation
All of these problems can be corrected by providing a Sitemap or some form of textual navigation somewhere on the site.

hth.
-Doug
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
Reply With Quote
  #9 (permalink)  
Old April 14th, 2010, 01:49 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

Interesting. That's basically what I was wondering about. Having worked primarily with styled navigation lists, are there any advantages that you see to hyperlinks in select elements that I'm missing out on?
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
  #10 (permalink)  
Old April 14th, 2010, 02:09 PM
Wrox Author
Points: 13,255, Level: 49
Points: 13,255, Level: 49 Points: 13,255, Level: 49 Points: 13,255, Level: 49
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2005
Location: Ohio, USA
Posts: 4,104
Thanks: 1
Thanked 64 Times in 64 Posts
Send a message via AIM to dparsons
Default

None that I am aware of no. I have never personally used this style of navigation on a website except, maybe, for a Wizard style process. Other than that I prefer styled lists and sitemaps as the mode of navigation.

-Doug
__________________
===============================================
Doug Parsons
Wrox online library: Wrox Books 24 x 7
Did someone here help you? Click on their post!
"Easy is the path to wisdom for those not blinded by themselves."
===============================================
Reply With Quote
The Following User Says Thank You to dparsons For This Useful Post:
chroniclemaster1 (April 14th, 2010)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
put mailto: links on list items in a combo box? webwolf Flash (all versions) 0 September 12th, 2008 08:01 AM
List of Links chrome47 BOOK: Professional CSS: Cascading Style Sheets for Web Design 2 December 12th, 2005 10:37 PM
drop down list values based on another drop down noor ASP.NET 1.0 and 1.1 Basics 3 July 5th, 2005 09:57 AM
Drop Down List mrideout BOOK: Beginning ASP.NET 1.0 8 September 16th, 2004 07:11 AM



All times are GMT -4. The time now is 06:16 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.