Results 1 to 3 of 3

Thread: how to cycle through sequentially numbered anchors within a page

  1. #1
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy how to cycle through sequentially numbered anchors within a page

    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.


    -Hobbes

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is a little unclear to me what you mean by the terms:

    concatenating

    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):

    HTML Code:
    <a name="m0"></a>
    and later:

    HTML Code:
    <a name="m1"></a>
    and so on. You could have a function on or associated with the page:

    Code:
    function navToAnchor(d){
    var na=document.getElementsByTagName('a');
    for (var ul, i = 0; i < na.length; i++)
    if(/^m\d+$/.test(na[i].name))
    ul=na[i].name.replace(/m/,'')-0;
    var h=location.hash.replace(/#m/,'')-(-d);
    if(h>-1&&h<=ul)
    window.location.hash='m'+h;
    }
    You could have buttons:

    HTML Code:
    <input type="button" onclick="navToAnchor(1);" value="Next">
    <input type="button" onclick="navToAnchor(-1);" value="Previous">
    or links:

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking w00t!

    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

Bookmarks

Posting Permissions

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