Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Links jump to anchors within a Menu

    Hello Guys
    I am trying to make a page with links listed alphabetically within a menu. Can I make the letters/links jump to an anchor within the menu. I know this is not very clear so I have made a test page to show what I mean. Many thanks.
    Chris
    http://chtremb22.i8.com/TESTmenu.htm

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    do you mean to do
    http: // www. link .com#anchor
    ?
    Oh, was I supposed to put something here? ........

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try searching for: Type Ahead Option Menu

  • #4
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Bobo
    Sorry I don't know what you mean. I am trying to get the letters on top
    to jump to their assigned letters within the menu (please see example). A to A; B to B ... I hope this is clear enough. Thanks.
    Chris

  • #5
    New Coder
    Join Date
    Dec 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here's one way to do this:
    PHP Code:
    <form name="form1">
      <
    p><a href="javascript:" onclick="A.selected=true">A</a>
             <
    a href="javascript:" onclick="B.selected=true">B</a>
             <
    a href="javascript:" onclick="C.selected=true">C</a></p>
      <
    p>
        <
    select name="menu1" size="10" onChange="MM_jumpMenu('parent',this,0)">
          <
    option id="A"></a>A-</option>
          <
    option value="http://www.yahoo.com/">Yahoo</option>
          <
    option value="http://www.google.com/">Google</option>
          <
    option value="http://www.hotmail.com/">Hotmail</option>
          <
    option value="http://www.tek-tips.com">Tek-tips</option>
          <
    option>unnamed5</option>
          <
    option>unnamed6</option>
          <
    option>unnamed7</option>
          <
    option>unnamed8</option>
          <
    option id="B"></a>B-</option>
          <
    option value="http://www.mail.com/">Mail</option>
          <
    option value="http://www.ask.com/">Ask</option>
          <
    option>unnamed12</option>
          <
    option>unnamed13</option>
          <
    option>unnamed14</option>
          <
    option id="C"></a>C-</option>
          <
    option value="http://www.lycos.com/">Lycos</option>
          <
    option value="http://www.myway.com/">Myway</option>
          <
    option>unnamed17</option>
          <
    option>unnamed18</option>
          <
    option>unnamed19</option>
          <
    option>unnamed20</option>
        </
    select>
        </
    p>
    </
    form

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The above at best will be IE only and not cross browser compatable...
    You can also try this... Should be cross browser and not reguire changes to the option menu...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script language="JavaScript" type="text/JavaScript">
     <!--//
      function MM_jumpMenu(targ,selObj,restore){ //v3.0
        eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
        if (restore) selObj.selectedIndex=0;
      }
    
      function jumpTo(anchor){
       var menuItem = (/#(\w)$/).test(anchor);
        for(var i=0; i<document.forms['form1']['menu1'].options.length; i++){
         var option = document.forms['form1']['menu1'].options[i];
          if(new RegExp('^'+RegExp.$1+'-\$','i').test(option.text)){
             option.selected = true;
             document.forms['form1']['menu1'].focus();
          }  else{ option.selected = false; }
        }    return false;
      }
    //-->
    </script>
    </head>
    
    <body>
    <a href="#A" onclick="return jumpTo(this.href)">A</a>
    <a href="#B" onclick="return jumpTo(this.href)">B</a>
    <a href="#C" onclick="return jumpTo(this.href)">C</a>
     <form name="form1">
        <select name="menu1" size="10" onchange="MM_jumpMenu('parent',this,0)">
          <option selected>A-</option>
          <option value="http://www.yahoo.com/">Yahoo</option>
          <option value="http://www.google.com/">Google</option>
          <option value="http://www.hotmail.com/">Hotmail</option>
          <option value="http://www.tek-tips.com">Tek-tips</option>
          <option>unnamed5</option>
          <option>unnamed6</option>
          <option>unnamed7</option>
          <option>unnamed8</option>
          <option>B-</option>
          <option value="http://www.mail.com/">Mail</option>
          <option value="http://www.ask.com/">Ask</option>
          <option>unnamed12</option>
          <option>unnamed13</option>
          <option>unnamed14</option>
          <option>C-</option>
          <option value="http://www.lycos.com/">Lycos</option>
          <option value="http://www.myway.com/">Myway</option>
          <option>unnamed17</option>
          <option>unnamed18</option>
          <option>unnamed19</option>
          <option>unnamed20</option>
        </select>
     </form>
    </body>
    </html>
    .....Willy

  • #7
    New to the CF scene
    Join Date
    May 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Guys
    THANKS. This is great.
    Many thanks.
    C


  •  

    Posting Permissions

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