Announcement

Collapse
No announcement yet.

How to have a link one one page locate to a certain module on another page?

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

  • How to have a link one one page locate to a certain module on another page?

    I have a link on the home page that I want to locate to a certain module on another page. I can't just link to the page the module is on, because on a phone, the module is way down the page.

    I've read that named anchors are no longer considered valid in modern HTML. Instead, you are supposed to use an HTML id, i.e.

    HTML Code:
    <div id="foo1">Some content</div>
    Then you can supposedly locate to it by

    HTML Code:
    <a href="contacts#foo1">link</a>
    So on my "Contacts" page, I have a Static PHP Module with some content in it. Inspecting the elements, I see that this widget has the HTML id="widget_177".

    So, on the link on the other page, I enter

    HTML Code:
    <a href="contacts#widget_177">link</a>
    However, when I try this, it indeed links and jumps to the correct location, but the widget is completely gone (disappeared, hidden)!

    Is there some different/better way to do this? Thanks.

  • #2
    There is no way to link to a specific module location on a page.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API - Full / Mobile
    Vote for your favorite feature requests and the bugs you want to see fixed.

    Comment


    • #3
      But why not? Why does the widget disappear when you locate to it? The HTML spec says you can locate to a named div by using the id.

      EDIT: BTW, I just linked to the Module in question (which is a static PHP module holding HTML content) by putting a simple, old-style named anchor at the top. Works fine. JFYI.

      Now, on my phone, clicking on the link locates me to a module on another page that is way down the page.

      For some reason, it does not work at all trying to use divs and ids.

      Now, of course if this were a search module or any other kind of module besides static PHP or HTML, wouldn't work. But I'm still curious as to why linking to the div id makes the module or content disappear.
      Last edited by StephenKay; Sun 18 Feb '18, 11:04pm.

      Comment


      • #4
        It doesn't work because the system isn't designed to work like that and it is not tested. Some of the classes and IDs may not even exist in the rendered code but exist in the "Inspect" because they are placed there after the page is loaded via JavaScript. The system also uses Javascript and other advanced coding to show and hide modules based on the screen size of the device so your link is probably interfering with that or linking there before the page is finished processing and the Javascript shows the module. Simply, the system is not designed to behave the way you're trying to make it behave.

        Named anchors (ie: <a name='xxxx'>). will work. Modules do not have named anchors.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • #5
          OK, thanks for the explanation.

          Actually, it would be good to allow a link to a specific location/module on a page.

          Comment


          • #6
            Discovered a workaround: You can put a named anchor in the Module Title, when editing with Site Builder in the Module Configuration.

            For example, if the title of your Module is Documents, you can put this html for the title:

            HTML Code:
            Documents<a name="docs"></a>
            It's invisible when the page is rendered, but it does allow you to locate to the title bar of a particular module.

            Comment


            • #7
              The module disappears due to the unintended side effect of the anchor scrolling animation script in vB5. The script is initially hiding the anchor to do its custom scroll animation and prevent the default non-animated scroll to take effect and then after the animation is done, it is supposed show the anchor back. But in this case, the script is expecting <a id="xxxxx" class="anchor"></a> tag to be used for the anchor by using $('a.anchor').show(). Since the OP is using the module div tag for the anchor, the script cannot find the anchor to show resulting to the hidden module.

              GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

              Comment


              • #8
                http://tracker.vbulletin.com/browse/VBV-18216
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API - Full / Mobile
                Vote for your favorite feature requests and the bugs you want to see fixed.

                Comment


                • #9
                  This should be fixed in the next version per the issue logged above.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API - Full / Mobile
                  Vote for your favorite feature requests and the bugs you want to see fixed.

                  Comment


                  • #10
                    Thanks!

                    Comment

                    Related Topics

                    Collapse

                    Working...
                    X