Free Quick Links Script - Drop Down List of Links

By:  Daniel Cochran
Title:  Consultant
Date:  10/12/1998 - 04:55 PM (UCT)
URL:  HTTP://dsc-link.com/as400/javarelated/javascript/quicklinks.html



Drop Down Link Quick Links Script



Introduction:



This page shows you how to create a Quick Links Drop Down selection form. The code is
Javascript 1.2 compliant, but can be marked as JavaScript without the version
numbers.


NOTE: Marking your Javascript, with a version number seems to not be
compatible with Netscape or Microsoft IE versions less than 4.x.



The assumption here is that you are familiar with Javascript and how it works. You do not need
to know how to code the script language. All the .js files have been fully documented with
comments which are denoted by the // or /* comment tags.


For the last two years, I have used a drop down select group to allow visitors to the site the
ability to jump to other sections without selecting the associated link on the main page. This
allows the visitor to quickly go to sections they have visited before and want to return to for
any updated information. Also, if they can not recall which section on the site they want to
negotiate to for information, this allows them a short description link list.


The script will jump to the other section after a list item is selected without the visitor having
to select the "GO!" button. However, the "GO!" button exist to allow for a 2.x
version browser to jump to the link selected since these version of browsers do not work well with
the selected link jump code in the script.



JavaScript:



The main script body is contained in the JSQuickLinksDropDownList.js
file. The error trap script is contained within the ErrorHandle.js file.

Get the .zip file with these two .js and this .html file with this link.

Usage



You need to add the following code to the <HEAD> section of your web page. By changing the
values of the src to reflect your site's placement of the .js files, your
Quick Links script will be loaded with the page.


<script
language="JavaScript 1.1"
src="http://YourDomain.com/DirectoryOfScript/JSQuickLinksDropDownList.js"
type="text/javascript">
</script>



NOTE: Javascript, just as Java, is case sensitive!



If you want to trap errors for debugging any problems, you will need to add this code
below the above code in your <HEAD> section.



<script
language="JavaScript 1.1"
src="http://YourDomain.com/DirectoryOfScript/ErrorHandle.js"
type="text/javascript">
</script>



NOTE: The onerror function is used within the JSQuickLinksDropDownList.js.
Therefore, if you do not add this tag, you need to remove the function calls in the Quick Links
script!



Within your page's content you need to add the following script to tie the functions of the
.js files together.


<script language="JavaScript 1.1" type="text/JavaScript">
document.writeln("<FORM>");
document.writeln('<SELECT NAME="choose" onChange="changePage(this.form)">');
how_many = title.length;
for (i = 0; i < how_many; i++)
document.writeln("<OPTION value='"+url[i+1]+"'>"+title[i+1]);
document.writeln("</" + "SELECT>");
document.writeln("<INPUT TYPE = BUTTON VALUE = Go! onClick = 'changePage(this.form)'>");
document.writeln("</" + "FORM>");
</script>


After all this is done, you should see a FORM like the one below:







FAQ:



How do I modify the .js to work with my site?




  1. Open up the JSQuickLinksDropDownList.js in Notepad (I use Homesite 3.0.1).
  2. Change the title var to reflect the description(s) you want with your site.
  3. Change the url var to reflect the URL(s) for the associated description.
  4. Save these files.



NOTE: These files must be relative to the page that uses the .js script with the above
page's script code. If you want to save the files to one location and reuse the script all over your
site, then you will need to add the relative path to the .js files on your server in the script declaration
statement within your page's <HEAD> section.


Does this code have to be in a .js file?



I use the .js file because it makes the re-usage of the scripts available anywhere within my site(s).
Using .js files allow you to not have the added script in every page's <HEAD> section. It also makes
changing the action of the script through out your site easier, since the code is in one file not
multiple pages.




However, if your ISP or webserver does not allow the .js extensions to be transmitted, you can remove the
src= parameter from the script tag, and embed the script directly into your web page.

I keep getting the "title not defined" exception error. How do I fix this?



This error will come up if you add the self.onerror = report_error; to the createArray function.
The other place to look is in your title and/or url
variable declaration statements. If you left the Arrays unequal or left a "," (comma)
at the end of the statements, this error occurs.

Can I used "name" links within various pages?



Yes, you can add the "#nameoftarget" to your url
var's list to do this action. You can see this in action by selecting the "Top of
Page" option in the above Form.

Is there any charges for using this script?


No, this script is totally Freeware. However, I do request that you give credit
where credit is due, and not remove my name and URL from the contents of the .js files. ;-)

What is the disclaimer?


No warranty of this script is implied or given by the developer or the developer's employer. You can use
this script at your own risk. It has been tested with Windows 95 and Windows NT 4.0 (sp3) using Netscape
browsers version 2.0, 3.0, 4.0, 4.04, and 4.06 and also with Microsoft's IE version 3.0.


NOTE: It does not work as .js with the 3.x versions. It will work if you embed the
script outside of a .js directly into the web pages <HEAD> section with these browsers.






All rights reserved, DSC-Link. © 1998

Return to the Home Page
 


© Copyright 1998, 1999 by IGNITe/400sm
This page last updated on: Sun Jun 27 20:55:29 1999