Results 1 to 3 of 3

Thread: Using code for scoller nav multiple times?

  1. #1
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Using code for scoller nav multiple times?

    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:
    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>

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. innerhtml to write multiple times
    By z2z in forum JavaScript
    Replies: 12
    Last Post: 03-27-2009, 11:44 AM
  2. Replies: 0
    Last Post: 12-25-2008, 02:40 PM
  3. Resolved Can you append the same node multiple times?
    By jlizarraga in forum JavaScript
    Replies: 4
    Last Post: 10-28-2008, 06:00 PM
  4. same script used multiple times
    By ripthorn in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-29-2008, 03:26 PM
  5. Script multiple times on the same page
    By Jamal in forum JavaScript
    Replies: 1
    Last Post: 09-28-2006, 05:07 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •