I f you have a lot of menu links and not a lot of space, this is the script to turn to. It compacts any content into a predefined area, with the content accessible via left and right scroll buttons. Browsers other than IE 4+ or NS 4+ will simply see nothing.
We have tested the code in IE6.0, Firefox1.5.0.2, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.
D epending on your knowledge of HTML and java scripts this is an easy on step copy and paste code that is inserted into the <BODY> section of your document where you want it to appear. Below you will see where and howto make the minimal reconfifurations to make the script work for you.
Reconfigurations
//configure path for left and right arrows
var goleftimage='Full Path To Uploaded Arrow"'
var gorightimage='Full Path To Uploaded Arrow"'
//configure menu width
var menuwidth=300
//configure menu height
var menuheight=25
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr>
<a href="Path To Page Called">Link Name</a> |
<a href="Path To Page Called">Link Name</a> |
<a href="Path To Page Called">Link Name</a> |
<a href="Path To Page Called">Link Name</a> |
<a href="Path To Page Called">Link Name</a></nobr>'
////NO NEED TO EDIT BELOW THIS LINE////////////
A s you will notice in the above reconfigurations on where to add your uploaded arrows, and insert your links. Below we will expalain a few other reconfigurations you may want to add into the script to make it slightly easier for navigation.
1) You can make the links open in a new browser window as opposed to opening in the same window and losing the original page. Just add the attribute of target="_blank" at the end of the link path. See below
<a href="Path To Page Called"target="_blank">Link Name</a>
2) The way this script is designed, the arrows work as links (if clicked) to bring you to the top of the page if you click on the arrows. To avoid this, just add the attribute of onClick="return false;" at the end of the path for the uploaded arrows. You add this to both arrows. See below
var gorightimage='Path To Uploaded Arrow"onClick="return false;"'
var goleftimage='Path To Uploaded Arrow"onClick="return false;"'
//configure menu width
Y ou will also notice this script makes us of both the ' and ". Do not switch them around or accidently remove any of them or the script will not function properly!
For your Information:
The site you get the script from does not tell you that you need to save the two arrows and upload them. If you would like to use the arrows we have just "Save As" and upload them to your editor. Since our host is Angelfire, they do not allow remote linking of images so please do not link directly to our images because they will not work.
W
e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link (or the one within the above effect) and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]
