• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Using anchors in a post

#1
Hi there,

I would like to know if it is possible to use anchors in a post to jump to various parts of that post?
This would be particularly helpful in creating/modifying a tutorial for Moderators on our forum.

I used to use them in that nasty old vB script but since converting to XenForo they no longer work.

Any help appreciated.
 
#3
I appreciate your reply but I'm afraid I'm a fledgling Administrator and I don't know enough as yet to follow from your basic information.
My bad but I need a little more help.
Sorry! o_O
 

andrewkm

Active member
#4
I'm also having trouble creating the goto/anchor tags with bb code manager.
Can anyone provide more assistance with this.

I have already installed bb code manager and set up various other bbcodes. The goto/anchor ones are giving me quite some difficulty though.
Please tag me if you respond.
 

Jake Bunce

XenForo moderator
Staff member
#5
In HTML code, this is an anchor:

Code:
<a name="top"></a>
And this is a goto:

Code:
<a href="#top" onclick="self.scrollTo(0, 0); return false;">Top</a>
You need to create BB codes to represent that HTML.
 

ForestForTrees

Well-known member
#6
Thanks Jake, I've tried to implement that, but even though successfully added the HTML, nothing is happening. As a demonstration, in the following thread:
http://www.tmswiki.org/forum/threads/testing-anchor-links.1807/
is the following HTML:
HTML:
<a href="#anchorname" onclick="self.scrollTo(0, 0); return false;">Click on this to scroll down</a><br />
(The anchor is below)<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="anchorname"></a>
However, when I click on the link, nothing good happens. Any ideas?
 

Jake Bunce

XenForo moderator
Staff member
#7
The onclick="self.scrollTo(0, 0); return false;" is redundant for a "top" anchor. It explicitly scrolls to the top of the page. Remove that portion for any other anchor other than one that goes to the top of the page.
 

ForestForTrees

Well-known member
#8
Thanks so much for the prompt response. I've made the change you suggest. The underlying HTML is now:
HTML:
<a href="#anchorname">Click on this to scroll down</a><br />
<snip>
<a name="anchorname"></a>
Here's what I don't get, though: when I click on "Click on this to scroll down," it goes to a completely different page rather than just finding the named anchor on the current page. In other words, when I click on
HTML:
<a href="#anchorname">Click on this to scroll down</a>
which is located in http://www.tmswiki.org/forum/threads/testing-anchor-links.1807/ , I get sent to http://www.tmswiki.org/forum/#anchorname rather than http://www.tmswiki.org/forum/threads/testing-anchor-links.1807/#anchorname . This seems contrary to my understanding of how internal links within a web page are supposed to work.

My hunch is that XenForo, with it's sophisticated programming, has added something that changes behavior. I found the following in the head of the page, but I don't know javascript or even much HTML, so it's over my head:
HTML:
        <base href="http://www.tmswiki.org/forum/" />
        <script>
            var _b = document.getElementsByTagName('base')[0], _bH = "http://www.tmswiki.org/forum/";
            if (_b && _b.href != _bH) _b.href = _bH;
        </script>
 

ForestForTrees

Well-known member
#10
I tried that, pasting that code in, but the {$requestPaths.requestUri} didn't get replaced. I suspect that it can be worked out using the PHP Callback Method or the Template Method within BB Code Manager, but I realized that for my purposes, doing a simple normal link to the named anchor will work just fine and save me quite a bit of time. Thanks for your help.
 

ForestForTrees

Well-known member
#11
Okay, who am I kidding. As if I would possibly have the willpower to not solve a coding problem...

With help from Cédric, I used a created a new template with the following text: "<a href="{$requestPaths.requestUri}#{xen:raw $options.1}">{xen:raw $content}</a>". BB Code Manager then grabs that template, executes it, and dumps the results in wherever I type [goto="anchortext"]Display text[/goto]. A few more details can be found in the BB Code Manager thread.
 

Stuart Wright

Well-known member
#12
Okay, who am I kidding. As if I would possibly have the willpower to not solve a coding problem...

With help from Cédric, I used a created a new template with the following text: "<a href="{$requestPaths.requestUri}#{xen:raw $options.1}">{xen:raw $content}</a>". BB Code Manager then grabs that template, executes it, and dumps the results in wherever I type [goto="anchortext"]Display text[/goto]. A few more details can be found in the BB Code Manager thread.
Can create a template no problem. So what BB code do you then create? It's not obvious where in that 40+ page thread, the answer is!
 

ForestForTrees

Well-known member
#13
Hi Stuart, sorry for the delay. I don't know if this answers your question, but here is the post I referred to above:
http://xenforo.com/community/threads/custom-bb-code-manager.27125/page-26#post-513054

To follow the instructions in that post, you'll need to do independent research on how to make a BBCode that uses a template callback. Reviewing the "highlight" bbcode might help. I know it can be done because I've done it before using the main documentation. Unfortunately, I've forgotten how, but if you PM me, we can set up a Skype screensharing call and I'd be happy to show you how I did it. It shouldn't be too hard to figure out. (To anyone else reading this, that's a special offer for Stuart because I think he started porting AVForums to XF back when XF's future seemed less secure. I'm waaaaayyyy to busy to do it for the hoi palloi ;) )
 
#14
A bit late, but:

Xenforo uses a "base" href in its head. This causes anchors to break. It can be fixed using javascript in your BBcode:

Code:
<a href="javascript:;" onclick="document.location.hash='{option}';">{text}</a>