Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
[How To] Create HTML anchors using bbcode
cbiweb
Join Date: May 2004
Posts: 238

 

Nova Scotia, Canada
Show Printable Version Email this Page Subscription
cbiweb cbiweb is offline 08-19-2009, 10:00 PM

Overview

HTML anchors are links that allow you to jump to a specific place within a document. This is very handy for long documents that have headings or other sections of interest to the reader. Typically, the top of the document contains a set of links to each section, and you need only to click one of those links to jump to the desired location on the page.

Anchors would be just as useful in forums for those who want to make long posts, perhaps for tutorials, forum guidelines or similar types of posts. Since most, if not all vBulletin license holders do not allow HTML in their forums, here is way to create anchors using bbcode instead of HTML.


Instructions

First, you need to create two new bbcodes. Start by going to:
Admin CP -> Custom BB Codes -> Add New BB Code

Then fill in the relevant fields using these settings and parameters:

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
Click Save

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
Click Save


Implementation

Wrap the [jumpto] tag around a link that will take the reader to another place within the post, as follows:
Code:
[jumpto="anchor1"]link to somewhere within the post[/jumpto]
Then wrap the [aname] tag around the first word or phrase of the section you want the reader to jump to:
Code:
[aname="anchor1"]This is where you end up[/aname]
In the above two examples, change anchor1 to whatever name you choose for the link. (For example: if you are linking to a section called "Theory of Gravity", anchor1 could be called theory). They must both be identical in order to work correctly.


And yes, you can use these same tags for "back to top" links. Wrap the following tags around the first word of the post:

Code:
[aname="top"]first word of your post[/aname]
And place this one in the appropriate part of the post where a reader would click it to jump back to the top:

Code:
[jumpto="top"]back to top[/jumpto]
Reply With Quote
  #2  
Old 12-04-2009, 05:53 AM
lm3a.net's Avatar
lm3a.net lm3a.net is offline
 
Join Date: May 2009
Posts: 134
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thanks !!
Reply With Quote
  #3  
Old 07-28-2012, 12:03 AM
sub_ubi sub_ubi is offline
 
Join Date: Dec 2004
Posts: 177
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

For VB 4 on the Title: Anchor link
Code:
<a href="#{option}">{param}</a>
needs to be
Code:
<a href="{relpath}#{option}">{param}</a>
rest is the same as above
Reply With Quote
  #4  
Old 02-25-2013, 05:55 PM
Dorgham's Avatar
Dorgham Dorgham is offline
 
Join Date: May 2012
Location: Egypt
Posts: 69
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I am a newbie in this world
I like those bbcode
Reply With Quote
  #5  
Old 01-26-2015, 04:17 AM
bchertov's Avatar
bchertov bchertov is offline
 
Join Date: Dec 2004
Location: Sonoma County, CA
Posts: 259
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by sub_ubi View Post
For VB 4 on the Title: Anchor link
Code:
<a href="#{option}">{param}</a>
needs to be
Code:
<a href="{relpath}#{option}">{param}</a>
rest is the same as above
What do you mean by {relpath} above?
Reply With Quote
  #6  
Old 02-15-2015, 04:49 PM
Duke49th Duke49th is offline
 
Join Date: Sep 2014
Posts: 24
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Relpath (relative path) sets the Forum Path to the Post/Blog adress and adds the" #anchor-name" after it.

For example, the result is:

PHP Code:
http://exampleforum.com/showthread.php?123-example-post#anchor-name 
If not...you will end up on the starting page with an error...like:

PHP Code:
http://exampleforum.com/#anchor-name 
Sorry for my english, hope you're getting me.

Btw...if you use the BBCode via the editor it will ask for "option"....this "option" is the anchor name or ID. You need to give it a name, otherwise it won't work.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:38 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05900 seconds
  • Memory Usage 2,250KB
  • Queries Executed 19 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (8)bbcode_code
  • (2)bbcode_php
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (6)post_thanks_box
  • (3)post_thanks_box_bit
  • (6)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (6)post_thanks_postbit_info
  • (5)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete