1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

bookmarks on sub-pages

Discussion in 'Website Customization' started by Jan Vade on Nov 27, 2018.

  1. Jan Vade

    By:Jan VadeNov 27, 2018
    New Community Member

    Joined:
    Mar 16, 2018
    Messages:
    3
    Likes Received:
    0
    Location:
    Information Technology
    -- I created a long sub-page at

    https://www.rotary9520.org/60506/Pa...conference-2019&StorySlug=conference-speakers <!-- see line for speaker Stephanie Woollard and the corresponding text below -->

    ~~ at the top of the page I have a list of speakers within <h2> tags

    ~~ this page is long and I wanted to insert bookmark under each speaker in the list (<a> tags) ... to enable a visitor to jump to the destination-text below, on the same page.

    ~~ I used examples from w3schools web site -- but nothing worked.. It either gave me the room 404 or jumped to the district home page.

    ~~ could you, please, advise the code I should use... or other such method to enable bookmarks.

    (Oh, yes! I know ... my code needs cleaning up a little, for it is somewhat inelegant.)
     
  2. John Borst

    By:John BorstNov 27, 2018
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Jan, I do not know code nor how you can make it jump down to the content on each speaker but I can suggest a work-around. Create a separate Story page for each speaker and leave it in the Story Library. Click "off" for the home page. Then put the link into the name on your Conference Speaker page. Then clicking on it will take you to the write up on the speaker. The effect is similar.
     
  3. Anita Graham

    By:Anita GrahamNov 28, 2018
    Community Member

    Joined:
    Sep 6, 2017
    Messages:
    42
    Likes Received:
    12
    Location:
    Computer Networking
    Jan this what I would do....

    1. Down the page in the details section add an anchor, similar to the one below, just before the H2 headers for each person. Use a different id for each person.
    (You might find it easier to use the source view of the page, as you can see the page markup there.)
    [The a in <a id="xxx" and in <a href="xxx" stands for anchor]

    <a id="swoolard">
    <h2>Stephanie Woolard</h2>
    </a>


    2. In your index of speakers you can wrap each name with a link to the <a> tag you've just created. Like this:

    <a href="#swoolard">
    <h2 style="text-align:center;">Stephanie Woollard,</h2>
    </a>

    Notes
    • The two lines beginning with <h2 are already on your page.
    • Anything between a < and a > is markup code that tells the web how to present your text.
    • The < and > MUST be matched. Any double quote " must also have a matching " at the end of the word or phrase.
      • Don't miss the small, but critical, </a>, tag after the H2 lines. This closes the anchor that began with <a...>
      • Just like the <> and "", a beginning tag must have a matching end tag.
    • The "#swoolard" is what links the index entry to the detailed information which starts with id="swoolard".
    • The red and blue lettering is just there to highlight the code.
    • Don't miss the small, but critical, </a>, tag after the H2 lines. This closes the anchor that began with <a...>
    • Just like the <> and "", a beginning tag must have a matching end tag.
    • Not using source, and inserting text etc are why there is a two level list above.
    Must go.....
     
    David H., Zach and Les Walsh like this.
  4. Jan Vade

    By:Jan VadeDec 1, 2018
    New Community Member

    Joined:
    Mar 16, 2018
    Messages:
    3
    Likes Received:
    0
    Location:
    Information Technology
    Thanks Anita, Thanks John,

    Unfortunately, the solution did not work; whichever way I tried to wrap <h2> in <a> tags Clubrunner system changed my code. (presumed by system to be incorrect, I suppose).
    When I put <a> tags within its own <div> it refused to jump to article below.

    Sample of my testing:
    List of speakers at the top of the page

    <h2 style="text-align:center;">Stephanie Woollard,</h2>
    <!-- <div><a id="swoollard">Jump to article</a></div> -->
    <!-- trying to create bookmark here to jump to the article bellow -->​

    The body of article
    <h2>Stephanie Woollard</h2>
    <!-- <div><a href="" id="swoollard">~</a></div> trying to create a bookmark destination -->​

    Anita, your way is also documented on the W3Schools website, it did not work for me earlier.

    John, I know that link could get me to a another sub-page for every speaker, however, I thought this to be a little unwieldy, particularly for those who scroll on the smart-phone.

    It seems that the Clubrunner system does not like <a> tags as bookmarks. I will lodge a support ticket to Clubrunner.

    Have fun, enjoy Rotary!
    Cheers Jan VADE
     
  5. John Borst

    By:John BorstFeb 27, 2019
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    215
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Jan, did you ever get tags as bookmarks to work. Has ClubRunner created a system yet? I could sure use it for a page I need to create.
     
  6. Zach

    By:ZachMar 6, 2019
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    592
    Likes Received:
    80
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hello Guys,

    Sorry we missed chiming in sooner, while HTML is outside the scope of our support, I can identify the reason the item is not working.

    You'll need to link to the in your A tag, and not have it as the ID for that tag. the ID attribute should be unique throughout a specific page as well.

    So for your link to jump to swoolard should be more like:

    Code:
    <div><a href="#swoollard">Jump to article</a></div> 
    The jump code also needs to be updated:

    Code:
    <h2 id="swoollard">Stephanie Woollard</h2>
    The A tag allows us to link to things, and the ID's identify the things we want to link to in this case. We do not need a second A tag to jump to however!

    Good luck!
     
Top