Link to home
Start Free TrialLog in
Avatar of snavebelac
snavebelac

asked on

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

Avatar of devic
devic
Flag of Germany image

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>
Avatar of snavebelac
snavebelac

ASKER

This code does not produce any errors but nothing happens in any borwser now . . .
ASKER CERTIFIED SOLUTION
Avatar of devic
devic
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
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>
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
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!

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
you are welcome