Click to See Complete Forum and Search --> : Jumping to anchors within page


jjfate
07-17-2003, 07:24 PM
Hi all,

Here's what I am trying to do, I hope you can help.

I would like to have a text area with a button next to it. when the button is clicked, I would like it to retrieve the text value, and jump to an anchor of the same name somewhere down the page. any thoughts would be greatly appreciated. Here is what I have so far:

<SCRIPT Language="JavaScript">
<!--//
function jmpToAnchor(frm){
if (frm.store.value == "")
alert("Please enter the first 3 letters of the store name or community!")
else
//This doesnt work
function followToAnchor() {
var sAnchor = frm.store.text;
location.replace('#' + sAnchor);
return false;
}
//-->
</SCRIPT>


<form name="jmp"><input type="text" name="store" size="30"> <input type="button" value="Search" name="btnSearch" onClick="jmpToAnchor"></form>



<!-- snip -->

<a name="wes"></a>


if you have any thought I would love to hear em!

JJ

Exuro
07-17-2003, 08:19 PM
Try the code below, and type in "wes" for the value in the text box. It worked fine for me. Hope this helps!


<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function jmpToAnchor(frm){
if (document.forms[frm].store.value == "") {
alert("Please enter the first 3 letters of the store name or community!")
}
else {
var sAnchor = document.forms[frm].store.value;
parent.location = '#' + sAnchor;
}
return false;
}
//-->
</script>
</head>
<body>
<form name="jmp"><input type="text" name="store" size="30">
<input type="button" value="Search" name="btnSearch"
onClick="jmpToAnchor(this.form.name)"></form>
<!-- All these line-breaks are here so you can
see that the form actually makes you move -->
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a name="wes">Wes</a>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

jjfate
07-17-2003, 08:32 PM
Thank you very much! that worked just perfectly!

jjfate
07-17-2003, 09:18 PM
Is there a way to use this in case the user hits enter?

I am using a mozilla broswer.

onkeypress="if(event.keyCode=='13'){jmpToAnchor()}"


thanks again

JJ

Exuro
07-17-2003, 11:20 PM
That should work fine... just stick it in the Body tag:

<body onkeypress="if(event.keyCode=='13'){jmpToAnchor('jmp')}">

jjfate
07-18-2003, 08:59 AM
Thanks again exuro, I know that to script is getting to the 'else statement now, but it does not execute the code there as it does when I use the button. It does a little jump, but then sits right back at the top of the page again.

<!--
function jmpToAnchor(frm){
if (document.forms[frm].store.value == "") {
alert("Please enter the first 3 letters of the store name or community! Or use the store number")
}
else {
alert("Hello!");
var sAnchor = document.forms[frm].store.value;
parent.location = '#' + sAnchor;
}
return false;
}
//-->


I put the alert in the else statement just to see if it was getting there or not, and yes the "Hello!" alert comes up, but does not jump to the anchor specified in the text area.

/htdocs/supportinfo.html?store=52

the above is the end of the URL when I use the enter key.

/htdocs/supportinfo.html#52

the above is what the URL comes up as when I use the button.

I have tried it in both IE6 and Mozilla 1.3


JJ

Exuro
07-18-2003, 01:16 PM
Sorry JJ, I was thinking you were hitting Enter while you were focused on the body of the HTML document. If you are focused on a form element (such as the text box) and hit enter, what it does is submits the form. So what was happening was the script would jump to the correct spot, then the page would reload because the form was being submitted. So what we need to do is stop the form from being submitted. To do that, we just put onSubmit="return false;" into our Form tag. We're gonna want to call our jmp() function as well, so that'll be in there too. Here's the code again, but I took out the onKeyPress from the body tag because I figured you didn't really want it, you just wanted to be able to hit Enter from the text box...

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function jmpToAnchor(frm){
document.jmp.store.blur()
if (document.forms[frm].store.value == "") {
alert("Please enter the first 3 letters of the store name or community!")
}
else {
var sAnchor = document.forms[frm].store.value;
parent.location = '#' + sAnchor;
}
return false;
}
//-->
</script>
</head>
<body>
<form name="jmp" onSubmit="jmpToAnchor(this.name);return false;">
<input type="text" name="store" size="30">
<input type="submit" value="Search" name="btnSearch">
</form>
<!-- All these line-breaks are here so you can
see that the form actually makes you move -->
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<a name="wes">Wes</a>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

jjfate
07-19-2003, 07:21 AM
Thanks exuro, that works great in IE, still cant get it to work properly in mozilla :(

I appreciate the time you spent on this

JJ

Charles
07-19-2003, 07:31 AM
1) How are you going to keep your page working for users who do not use JavaScript?

2) The anchors in a document are contained in an array, "document.anchors".

3) You can get the Y coordinate of any anchor with "Anchor.y".

4) You can then use the "Window.scrollTo()" method.

5) But how are you going to keep your page working for users who do not use JavaScript?

jjfate
07-19-2003, 10:31 AM
Charles,

This is going to be an internal document, all users within the organization will have javascript enabled, so that will not be an issue with this particular page. On my way to look at the co-ordinate stuff you mentioned.

Thanks JJ