View Full Version : how to cycle through sequentially numbered anchors within a page

01-31-2008, 01:35 PM
I just started playing with JavaScript a few days ago, so pardon the simplicity of this...

While helping a friend of mine fix up a HUGE page filled with almost six years of correspondence between him and his wife, I've been doing as much as I can to make the whole mess navigable.
Seeing as separating the content would completely ruin the continuity, I decided to attempt coding a script that would rely on a fixed position side navigation panel that contains, among other things, "next" and "Previous" links that would cycle through sequentially numbered in-page anchors...

I haven't the slightest idea where to begin. I think by simply concatenating an anchor of "#0" to the end of the current URL on pageload, i could then take the current hash value and subtract or add to it by 1. Once I've finished adding anchors to each page entry, I'm pretty sure that would have the desired effect, but I still haven't the slightest clue as to how that would be implemented. The syntax JavaScript uses still confuses the hell out of me...

In any case, any pointers or good beginner tutorials would be greatly appreciated.


02-01-2008, 07:46 AM
It is a little unclear to me what you mean by the terms:


subtract or add to it

adding anchors to each page entry

in the context of your message. Which of these operations would be accomplished by javascript, which would be accomplished as hard coded features of the HTML source code via editing it?

If you have anchors on a page like (anchor names should begin with letters):

<a name="m0"></a>

and later:

<a name="m1"></a>

and so on. You could have a function on or associated with the page:

function navToAnchor(d){
var na=document.getElementsByTagName('a');
for (var ul, i = 0; i < na.length; i++)
var h=location.hash.replace(/#m/,'')-(-d);

You could have buttons:

<input type="button" onclick="navToAnchor(1);" value="Next">
<input type="button" onclick="navToAnchor(-1);" value="Previous">

or links:

<a href="javascript:void()" onclick="navToAnchor(1);return false;">Next</a>
<a href="javascript:void()" onclick="navToAnchor(-1);return false;">Previous</a>

You wouldn't even need to have a hash when you first get to the page, that would be the equivalent of having it as #m0.

02-05-2008, 12:17 AM
I can't thank you enough... it works perfectly!
hehe now I've just got to add about 30,000 anchor points to the document... But eh, with a few macros it'll be finished in no time at all.

Thanks again mate :D