HyperLink Selector
|
The JavaScript HyperLink Selector was designed for people who lack
the proper permissions to create or use CGI Scripts.
It can be used to create lists of valid Universal
Resource Locators (URLs) which are stored in comboboxes. How can this bit of scripting help your page? Consider this scenario, you are distrubting a piece of software on your web site. People visiting your site all use different compression programs. You could make X number of links on your page, all pointing to different archived files. That takes up space, valuable space for other useful information. If you used a bit of JavaScript code, you can provide one link! A user can select from a combobox the right archived file they need. Not only does this works for files, but it works for any valid URL, such as ftp, mailto, other pages and any other valid URL type! Your page becomes cleaner, and more professional looking. In previous versions of the HyperLink Selector I used quite a bit of code. Then it hit me in the head, that I didn't need all this code. (Damn modularizing concepts). All you need is ONE LINE OF JavaScript code! Sounds pretty easy doesn't it, because it is! Lets start this off by building a Page Selector. You want to allow your vistors to be able to jump to various sections of your web site easily. Lets take a look at the example below first.
Define a <FORM> tag, since only buttons, text fields and comboboxes only appear using it. To build a list of values that will go into the combobox, we use a <SELECT> tag. We need to also name our SELECT tag, so that our JavaScript later on will know where to get the data from. We do this by saying <SELECT NAME="HyperLink">. HyperLink is the name of our <SELECT> tag. A <SELECT> tag only tells the browser that there is a combobox on the page, we need to fill it up with some data using the <OPTION> tag. The <OPTION> tag is where we will store our data. We will need to provide two pieces of information, the valid URL and a more user friendly readable version. Look at the example below to see how the statement is constructed. <OPTION VALUE="http://www.futureone.com">FutureOne Web Site!</OPTION> Once we constructed all the <OPTION> statements that our selector needs, close it off with a </SELECT>. Now we have defined our combobox and valid URLs. There is one more piece to this, the JavaScript code! Lets construct the HTML statement that will allow the user to activate the URL of their choice.
<INPUT TYPE=button VALUE="Go!" onClick="top.location.href=this.form.HyperLink.options[this.form.HyperLink.selectedIndex].value"> Bit of a mouthful eh? The tag is <INPUT> with several parameters that tell the browser how the button looks and reacts. Lets look at the overview of the parameters we are using. The parameter VALUE sets the text on the button that user will see. onClick is an event handler for this button. It means when the user clicks on the button, perform some action. Here is where we stick in our one line of JavaScript code. Here is the piece of code that allows you to activate your URL. onClick="top.location.href=this.form.HyperLink.options[this.form.HyperLink.selectedIndex].value" What this does is "top.location.href" tells the browser to view the URL stored there. After that we are assigning top.location.href the value that is stored in our <SELECT> tag named "HyperLink". If you have any questions or comments, please send email to damaged@futureone.com. Below are some more examples of how you can use the JavaScript HyperLink. Examples
|