Using code for scoller nav multiple times?

[telo]

I was browsing the code samples on this site for my current project and can't seem to figure out how to properly use the Scrollable Menu Links code for multiple menus without needing to repeat the code multiple times as well. I think I have to use document.getElementById('myText') where the myText will be HTML for the nav (or in my case, code for sections that contain images) to then execute all different menus separately, but I'm not entirely sure. Can someone help me with this situation?


P.S. I have the script in an external file.

Here's the original code:

<script type="text/javascript">

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=800
//configure menu height (in px):
var menuheight=300
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="reverse"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'

var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}


if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script>

[Beverleyh]

That's a very old script (coming up to 10 years) and the script demo page doesn't say anything about supporting multiple instances. If it works for you by pasting the provided code block where you want the menu to appear (those are the directions given, presumably because the script uses document.write, which I believe executes where it is encountered), in multiple places, then I imagine that is the "correct" way to do it.

Bear in mind however that to render a menu from JavaScript alone is not particularly good for SEO or users who use screen readers or who have JavaScript turned off, so I wouldn't recommend using this menu for main navigation or anything critical. Please also provide another menu option that uses "hard coded" HTML markup to ensure better accessibility and usability.

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Scrollable(id,ud){
 var o=Scrollable[id],obj=document.getElementById(id),ud=typeof(ud)=='number'?ud:-1;
 if (!o&&obj){
  o=Scrollable[id]={
   max:-obj.getElementsByTagName('*')[0].offsetWidth+obj.parentNode.offsetWidth,
   n:obj.offsetLeft
  }
 }
 if (o){
  clearTimeout(o.to);
  o.n=Math.min(Math.max(o.n+ud,o.max),0);
  obj.style.left=o.n+'px';
  ud!=0?o.to=setTimeout(function(){ Scrollable(id,ud); },50):null;
 }
}
/*]]>*/
</script></head>

<body>

<table border="0" cellspacing="0" cellpadding="2">
 <td valign="middle"><a href="#" onmouseover="Scrollable('tst1',-2);" onmouseout="Scrollable('tst1',0);" >
  <img src="http://www.dynamicdrive.com/dynamicindex1/pointer2.gif" border=0></a>
 </td>
 <td valign="top">
  <div style="position:relative;width:200px;height:25px;overflow:hidden;">
   <div id="tst1" style="position:absolute;left:0px;top:0px">
    <span><nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr></span>
   </div>
  </div>
 </td>

 <td valign="middle"> <a href="#" onmouseover="Scrollable('tst1',2);" onmouseout="Scrollable('tst1',0);" >
  <img src="http://www.dynamicdrive.com/dynamicindex1/pointer.gif" border=0></a>
 </td>
</table>

<table border="0" cellspacing="0" cellpadding="2">
 <td valign="middle"><a href="#" onmouseover="Scrollable('test2',-1);" onmouseout="Scrollable('test2',0);" >
  <img src="http://www.dynamicdrive.com/dynamicindex1/pointer2.gif" border=0></a>
 </td>
 <td valign="top">
  <div style="position:relative;width:300px;height:25px;overflow:hidden;">
   <div id="test2" style="position:absolute;left:-200px;top:0px">
    <span><nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr></span>
   </div>
  </div>
 </td>
 <td valign="middle"> <a href="#" onmouseover="Scrollable('test2',1);" onmouseout="Scrollable('test2',0);" >
  <img src="http://www.dynamicdrive.com/dynamicindex1/pointer.gif" border=0></a>
 </td>
</table>

</body>

</html>