[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 901
  • Last Modified:

Jumping to a named anchor ifit exists

I have a long list which is dynmically created from a database.  Durin gthe list creation a named anchor is created to mark each item in the list.  The named anchors are unique codes.

i want the user to be able to enter one of the codes in a text box (the user will know the code), click a link or button and have the page jump to the named anchor.

I have thrown together a scripit from several sources but I am unable to get it to work on multiple browsers.  It works just fine in IE.  In netscape it always fails to find the named anchor and in firefox it just does nothing.

Here is my Javascript function

function gotoAgent(myAnchor)  {
      var found = false;
      var theAnchor = document.getElementById(myAnchor).value.toUpperCase();
      for (i in document.anchors) {
            if (document.anchors[i].name == theAnchor) {
                  found = true;
                  if (document.layers) {
                        scrollTo(0,parent.main.document.anchors[theAnchor].y);
                  }
                  else  {
                        alert('else: '+theAnchor);
                        if (document.all)  {
                              document.all[theAnchor].scrollIntoView();
                        }
                  }
                  return false;
                  //document.location.href='agents.asp#'+theAnchor;
            }
      }
      if (!found)  {
            alert('Agent '+theAnchor+' not found');
      }
    return false;
}

Here is my implementation . .

<input name="txtAnchor" id="txtAnchor" type="text" value="" size="8" maxlength="4">
<a href="#" onclick="javascript:gotoAgent('txtAnchor');return false;">Goto Agent</a>

Any thoughts on how this can be achieved cross browser or a better way to do this.

Thanks in advance.

C

0
snavebelac
Asked:
snavebelac
  • 5
  • 3
1 Solution
 
devicCommented:
try this:
========================
<script>
function gotoAgent(myAnchor)  
{
      var a=document.getElementsByTagName("a");
      for(var i=0;i<a.length;i++)
      {
            if(a[i].name==myAnchor)
            {
                  location="#"+myAnchor;
                  return false;
            }
      }
      return false;
}
</script>
0
 
snavebelacAuthor Commented:
This code does not produce any errors but nothing happens in any borwser now . . .
0
 
devicCommented:
I didn't tested the case... try again:
================================
<script>
function gotoAgent(myAnchor)  
{
    var a=document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++)
    {
         if(a[i].name.toLowerCase()==myAnchor.toLowerCase())
         {
              location="#"+myAnchor;
              return false;
         }
    }
      alert('Agent '+theAnchor+' not found');
      return false;
}
</script>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
mr_egyptianCommented:
This tests good in NN4.7, FF1.0PR, and IE6 (latest) on XP.

FUNCTION:
---------------------------------------------------
 function jump(){
     document.location.hash=document.frm.txt.value;
 }


FORM:
---------------------------------------------------
 <form name="frm" id="frm">
  <input type="text" name="txt" id="txt">
  <input type="button" name="btn" id="btn" value="Jump" onclick="jump();">
 </form>
0
 
devicCommented:
tested on:
IE 6.0
mozilla 1.6
firefox 1.0
netscape 7.1
opera 7.54
==============================
<script>
function gotoAgent(myAnchor)  
{
    var a=document.anchors;
    for(var i=0;i<a.length;i++)
    {
         if(eval("a[i].name.match(/"+myAnchor+"/i)"))
         {
              location="#"+myAnchor;
              return false;
         }
    }
      alert('Agent '+theAnchor+' not found');
      return false;
}
</script>

<a href="#" onclick="javascript:gotoAgent('txtAnchor');return false;">Goto txtAnchor</a><br>
<a href="#" onclick="javascript:gotoAgent('txtAnchor2');return false;">Goto txtAnchor2</a><br>
<a href="#" onclick="javascript:gotoAgent('txtAnchor3');return false;">Goto txtAnchor3</a><br>
<a href="#" onclick="javascript:gotoAgent('txtAnchor4');return false;">Goto txtAnchor4</a><br>
<br><img src="" width=1 height=1500><br>
<a name=txtAnchor>txtAnchor</a><br><img src="" width=1 height=1000><br>
<a name=txtAnchor2>txtAnchor2</a><br><img src="" width=1 height=1000><br>
<a name=txtAnchor3>txtAnchor3</a><br><img src="" width=1 height=1000><br>
<a name=txtAnchor4>txtAnchor4</a><br><img src="" width=1 height=1500><br>
0
 
snavebelacAuthor Commented:
Thanks devic your previous post worked just as required.  The only change I had to make was to convert to upper case as that is the case of all the anchors.

C
0
 
devicCommented:
snavebelac,

this:
a[i].name.toLowerCase()==myAnchor.toLowerCase()

and this:
a[i].name.toUpperCase()==myAnchor.toUpperCase()

is the same thing, if you want to check two strings.

thank you!

0
 
snavebelacAuthor Commented:
quite right devic

I should have been more specific.  Anchors are case sensitive in some browsers so I had to convert it to upper case:

location="#"+myAnchor.toUpperCase();

all the anchors are in upper case so, if the code was enbtered lower case it would not be found in NN or FF at least.

thanks again for your help

C
0
 
devicCommented:
you are welcome
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now