XF 2.3 Linking back to an index

[Levina]

So, I'm writing a forum user guide with an index. I have the topics all as heading 3 so I can link to it from the index. But I would like to be able to jump back to the index instead of having to scroll back up. Is there a way to do this?

 

[chillibear]

My first thought would be that you could create a BBCode tag that inserted either an anchor element or a span element with an ID (that was passed as either an option on the BBCode or as the content of the BBCode). Then a normal fragment link (ie blahblah#my_id_fragment) should jump to that element from a normal hyperlink. Pop your new tag by your menu and it might do the job.

 

[Levina]

I thought of BBCode but didn't know how to implement it in a way that would create an icon say next to the #3 headings or even in superscript?

Everything I tried (anchor, span) moves the link to the index to the next line. I don't want that.

 

[smallwheels]

As a different approach you may like this add on:

[OzzModz] Rules

Sep 18, 2021

Easily create rules and group them into categories. Bring the power of law to your community!

• Painbaker
• Add-ons [2.x]

For your current one maybe this would help:

Resource icon

Slions - Table Of Content

Jan 7, 2021

Easy TOC for your posts

• Slion
• article toc
• Add-ons [2.x]

 

[Levina]

As a different approach you may like this add on:

[OzzModz] Rules

Sep 18, 2021

Easily create rules and group them into categories. Bring the power of law to your community!

• Painbaker
• Add-ons [2.x]

For your current one maybe this would help:

Resource icon

Slions - Table Of Content

Jan 7, 2021

Easy TOC for your posts

• Slion
• article toc
• Add-ons [2.x]

Thanks but the last says "unmaintained" and the first hasn't been updated to XF 2.3.

I wonder if it's possible to put a link in a tooltip...

 

[Lee]

Back to the top!

Like this?

 

[Levina]

Back to the top!

Like this?

Yes, but I have several topics with #3 headings per post and I would like a link back positioned after each heading and as a small icon, like so e.g. where the tooltip in my User Guide would say: jump back to the index:



But I don't think that's possible. So I probably will do it with a simple internal link.

 

[Lee]

Ahhhh. I see.

 

[Levina]

I asked ChatGPT and it gave me several options, none of which worked because the XenForo editor is limited. Obviously. So in the end it found me a little icon for an internal link. Because it's small it doesn't look too bad above an entry, but it's still not very pretty:

ChatGPT suggested I put every topic in its own post. That way I don't need the #3 Headings, can simply link internally and I'll be able to put a little icon right where I want it. It's probably the best advice it gave me. The downside is that some entries are pretty short. Still, I'm considering that now.

 

[chillibear]

If you want content on the same line as the header (ie the line with the <h4>title</h4> tags) you will need to style those as being inline.

Given you probably don't want to do that to all your headings I'd still consider wrapping them with a custom BBCode. So say you create a BBCode tag called menulink that takes an option which could be a URL+fragment (and do consider at least a regular expression to prevent abuse of this user submitted field) you could markup your section headers something like: [menulink="/foo/bar"][HEADING=3]section header A[/HEADING][/menulink] . If the BBCode HTML replacement were something like: <div class="menulink">{text} <a href="/threads/{option}">^^^</a></div> and you additionally styled the "menulink" in your extra.css template with something like: div.menulink>h4.bbHeading { display: inline; } I'd have thought that would get you what you're after.

Obviously (I hope) you'd need to decide quite what your link is going to point to and how much of that link you accept from the BBCode and how much you hardcode in. Remember you want to avoid anyone abusing this BBCode tag so a combination of a bit of hard coding and a regular expression to ensure whatever entered is just a fragment link to another post (ie the one with your menu in) would be in order.

I might also still be tempted to consider using a BBCode tag to "mark up" the menu, something like [menu=main] ... [/menu] which dumped in an HTML anchor and then maybe each menulink (or whatever you call it) tag can just be a fragment to the name of that menu, ie [menulink=main] header [/menulink] which might be neater. Anyhow I'd be doing something along these lines I think to create what you're after.

 

[briansol]

You don't have to use headers to have bookmarks on page.

you can link to the ID of any element.
eg:

a href="#id"

will take you to:

<div id ="id">

 

[Levina]

@chillibear.
@briansol.

Thank you both for your help, much appreciated. I'm doing this in a thread I would indeed have to modify templates for what I want and that's too much of a hassle for this, so I'll just use BBCode and be done with it.

Or I could create a page or it. Then I could use plain HTML and tuck the guide away in the Help pages. That's an option and it would make my life easier...

But thanks again!

 

[chillibear]

Maybe I still don't quite get exactly what you want to achieve, but I've just tested what I've outlined with BBCodes and it seems to work just fine. The only template edit is to add some CSS. This particular method is only presently suited to a single page thread since I'm not using full URLs, just fragments. I quite liked the semantics of having a menu and menu-link BBCode pair so opted to explore that. Still there isn't anything stopping it being expanded a bit more to work over multiple pages.

So I've created two BBCodes: menu and menulink

The first called menu is used to wrap the main menu item we want to jump back to. The HTML replacement markup (which you could adjust to suit your exact needs) is <span id="menu_{option}">{text}</span>. In my tests I've not added any regular expressions to limit the option, but for production you'd want to restrict that to say just a-z and 0-9 for instance.



Then the second BBCode used to generate the link back to the menu. I called this menulink. The HTML replacement for this one looked like: <div class="menulink">{text} <a href="#menu_{option}">^^{option}^^</a></div>. I just used some text surrounded by carets for my link back, but it could just as easily be an icon or some UTF8 icon, etc. Once again for production you'd want to limit the option so it can't be abused.



We now need some CSS to allow that caret link to be on the same line as the heading. [HEADING=3] generates a <h4> tag and given we're wrapping that [HEADING=3] in our [menulink] tag we can easily target it with some CSS like so in our extra.css template:

div.menulink>h4.bbHeading { display: inline; }

So then if I create a first post with some kind of menu in it and pop my [menu=top] whatever [/menu] BBCode in that post. Then somewhere later in another post (limitation - on the same page) we have the link back thus:

... Fusce erat turpis, volutpat non sem eu, tincidunt bibendum erat. Donec ultricies velit eu sapien auctor, at mattis leo mollis. Cras quis magna ullamcorper, condimentum nisi ac, bibendum ipsum. Phasellus et convallis metus, at ornare ante.

[menulink=top][heading=3]A heading[/heading][/menulink]
Pellentesque sed lacus faucibus, rhoncus nisi a, imperdiet nisl. Nam tincidunt ligula vitae elit lobortis placerat. Nunc porttitor iaculis ligula laoreet aliquam. Nunc lacus erat, convallis ut tempor feugiat, sagittis vitae augue. Aenean pretium felis at lacus rhoncus scelerisque. Sed in volutpat odio. Morbi eget tortor sem. Suspendisse vestibulum leo sit amet augue vestibulum, a pretium turpis semper. Etiam interdum commodo gravida. Sed dictum massa quis risus ornare, at cursus turpis molestie. Quisque ut ipsum augue. Vivamus a lobortis tellus, vitae pellentesque lectus.

We'd generate a rendered post like this:



Clicking on the ^^top^^ link would take us back to the #menu_top identifier which is the span tag created by our [menu=top] whatever [/menu] in the hypothetical first post. The finished test looks like so:



Anyhow I hope that fuller description of how I'd do something similar might help you create your own suitable solution. Just make sure you do limit the BBCode options (with a regular expression) if you take an approach like this so people can't abuse the tag and insert their own markup.

 

[Levina]

@chillibear

Well, that makes it a lot clearer. It's 2am now but 'm going to try that first thing tomorrow and will report back. Thank you very much!