Announcement

Collapse
No announcement yet.

Problem with anchor link

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem with anchor link

    Hi, I would like to create a basic anchor link to remote part of my post. A read about BB Codes but I am unable to replicate a functional solution. I followed this older post and after I created the same bb codes as mentioned in a link and put this exact content into my long post:
    Code:
    [jumpto="anchor1"]link to somewhere within the post[/jumpto]
    
    [aname="anchor1"]This is where you end up[/aname]
    I am returned to the homepage, not the aname anchor. The link navigates me to http://localhost/forum/#anchor1 (I am testing in in xampp so far, but it behaves the same on a real website).

    Do you have any suggestions?

    I use vB 5.6.4

  • #2
    What values do you have for your custom BBCodes?
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      Here are the values:
      • Title: Anchor link
      • Tag: jumpto
      • Replacement: <a href="#{option}">{param}</a>
      • Example: [jumpto=aname]This takes you to a new location within a post[/jumpto]
      • Description: The [jumpto] tag allows you to jump to another location within a post, usually used for long posts with headings and/or sections of interest. This tag <b>must</b> be used in conjunction with the [aname] tag. One is not functional without the other.
      • Use {option}: Yes
      • Button Image (Optional): URL that represents a path to an icon picture
      • Remove Tag If Empty: Yes
      • Disable BB Code Within This BB Code: No
      • Disable Smilies Within This BB Code: No
      • Disable Word Wrapping Within This BB Code: No
      • Disable Automatic Link Parsing Within This BB Code: No
      • Click Save
      Then I create another bbcode using these settings and parameters:
      • Title: Named anchor link
      • Tag: aname
      • Replacement: <a name="{option}">{param}</a>
      • Example: [aname=aname]This is where you jump to[/aname]
      • Description: The [aname] tag is used in conjunction with the <a href="#jumpto">[jumpto]</a> tag. One is not functional without the other.
      • Use {option}: Yes
      • Button Image (Optional): URL that represents a path to an icon picture
      • Remove Tag If Empty: Yes
      • Disable BB Code Within This BB Code: No
      • Disable Smilies Within This BB Code: No
      • Disable Word Wrapping Within This BB Code: No
      • Disable Automatic Link Parsing Within This BB Code: No
      • Click Save
      I use it in a longer post like this:

      Code:
      [JUMPTO=destination]Click me to a destination[/JUMPTO]
      
      some longer text
      
      [ANAME=destination]This is a place where I want to be linked[/ANAME]
      When I set all this and move my mouse on JumpTo link, I see as a destination this url: http://localhost/forum#destination and when I click I am moved to http://localhost/forum (to the homepage).

      Thank you for your help.

      Comment


      • #4
        Change your jumpto to:

        <a href="{relpath}#{option}">{param}</a>

        Change your aname to:

        <a name="{option}" id="{option}">{param}</a>

        What happens then?
        Last edited by Wayne Luke; Tue 2 Mar '21, 3:52pm.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • #5
          After I set your options, I am transfered to a non existing page:

          Invalid Page URL. If this is an error and the page should exist, please contact the system administrator and tell them how you got this message.

          The URL is:
          http://localhost/forum/[relpath][/relpath]#destination

          Comment


          • #6
            You need to use curly braces {} not straight braces [].
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment


            • #7
              The bbcode jumpto and aname in bb code manager are set to:
              <a href="{relpath}#{option}">{param}</a>
              <a name="{option}" id="{option}">{param}</a>

              In an article I use these bbcodes:

              [JUMPTO=destination]Link to destination[/JUMPTO]

              some text

              [ANAME=destination]This is destination[/ANAME]

              The jumpto redirects me to a nonexisting page http://localhost/[relpath][/relpath]#destination. It seems the vbulletin does not translate the relpath correctly.
              Last edited by DaMi3300; Wed 3 Mar '21, 10:34am.

              Comment


              • #8
                Hmm.. {relpath} should work properly. I tested this on a vBulletin 5.6.4 installation and the path is generated correctly in the AdminCP. Do you have any replacement variables in the system? Styles -> Replacement Variable Manager.
                Last edited by Wayne Luke; Wed 3 Mar '21, 1:31pm.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API

                Comment


                • #9
                  Here is an alternate method. Change your jumpto replacement to:

                  <a onclick='document.getElementById("{option}").scrollIntoView();'>{param}</a>

                  To immediately update the generated code in different posts, you may have to edit and save them. Though any cached elements should clear eventually.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API

                  Comment


                  • #10
                    Originally posted by Wayne Luke View Post
                    Hmm.. {relpath} should work properly. I tested this on a vBulletin 5.6.4 installation and the path is generated correctly in the AdminCP. Do you have any replacement variables in the system? Styles -> Replacement Variable Manager.
                    No, the Replacement Variable Manager says "No replacement variables are defined for this style" for all of the available styles.
                    Originally posted by Wayne Luke View Post
                    Here is an alternate method. Change your jumpto replacement to:

                    <a onclick='document.getElementById("{option}").scrollIntoView();'>{param}</a>

                    To immediately update the generated code in different posts, you may have to edit and save them. Though any cached elements should clear eventually.
                    Unfortunately still no effective progress. I installed a clean vBulletin instance and it works for the JUMPTO bbcode (<a href="{relpath}#{option}">{param}</a>) the same. So also in a clean installation I am navigated to http://localhost/nameoftheforum/[relpath][/relpath]#destination.

                    When I use the alternate method (I created JUMPTO2 bb code)
                    <a onclick='document.getElementById("{option}").scrollIntoView();'>{param}</a>
                    it seems the JUMPTO2 bbcode is both source and destination. After I click, the position of JUMPTO2 bbcode moves to the top of my page.

                    I tested this on my real forum, on a local image of real forum in xampp and also in a clean installation. It works everywhere the same.

                    My real forum configuration is:
                    Server type: linux
                    Web server: Apache v2.4.38
                    PHP: 7.3.19-1~deb10u1
                    MySQL Version: 10.3.25-MariaDB-0+deb10u1

                    My local testing environment is:
                    Server type: WINNT
                    Web server: Apache v2.4.43
                    PHP: 7.3.19
                    MySQL Version: 10.4.13-MariaDB

                    And yes, after any change of bb code in bb code manager I reedit the post and save it.

                    Comment


                    • #11
                      The Javascript method works here: Jump To Anchor - RabidBadger

                      It scrolls the text after the ID into the browser's frame. Is your text actually long enough to illustrate a proper jump?
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud demonstration site.
                      vBulletin 5 API

                      Comment


                      • #12
                        I don't know what did I wrong, but now it works. The conclusion for me is:

                        As a JUMPTO bbcode works this code:
                        HTML Code:
                        <a onclick='document.getElementById("{option}").scrollIntoView();'>{param}</a>
                        As ANAME works this code:
                        HTML Code:
                        <a name="{option}" id="{option}">{param}</a>
                        What does not work:
                        HTML Code:
                        <a href="#{option}">{param}</a>
                        <a href="{relpath}#{option}">{param}</a>
                        
                        <a name="{option}">{param}</a>
                        I have another question: can the JUMPTO scroll before or on the same line where the ID is located? The thing is, if I intend to make a link to a title or subtitle, it won't be visible (it will be 2 or 3 lines above). How it works is visible on your example too.

                        Comment


                        • #13
                          This modification works well but I also have to place the anchor higher in the thread to position the anchor at the right place.
                          Last edited by lange; Mon 21 Feb '22, 7:30pm.

                          Comment


                          • OrganForum
                            OrganForum commented
                            Editing a comment
                            The browser actually scrolls the page to the anchor, but the top of the page (and anchor point) is obscured by the floating toolbar. If this a problem you'll have to place the anchor prior the desired anchor point to compensate for the toolbar height.
                            Last edited by OrganForum; Tue 22 Feb '22, 8:19am.

                          • DaMi3300
                            DaMi3300 commented
                            Editing a comment
                            Is this a bug, or a feature?

                          • OrganForum
                            OrganForum commented
                            Editing a comment
                            It's not a bug. It's a combination of how browsers work and floating toolbar. The browser will attempt to scroll an anchor to the top of the page, but in this case that is obscured by the floating window. Placing the anchor earlier in the post, as lange does, makes sure that desired content of the post is below the obscured area. I seem to recall either a setting or mod that turns off the floating toolbar.
                        widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                        Working...
                        X