Go Back   vb.org Archive > vBulletin Modifications > vBulletin 3.8 Modifications > vBulletin 3.8 Add-ons

Reply
 
Thread Tools
[AJAX] Tabbed Forum Home Details »»
[AJAX] Tabbed Forum Home
Version: 1.5.0, by bobster65 bobster65 is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 3.8.x Rating:
Released: 04-09-2008 Last Update: 09-02-2008 Installs: 592
Template Edits
Code Changes Additional Files Translations  
No support by the author.

Tabbed Forum Home version 1.01

[AJAX] Tabbed Forum Home version 1.5.0 (BETA)

NOTE: Works with both 3.7x and 3.6x

Description: This MOD is for creating a "Tabbed" Forum Home Page to have Categories displayed within Tab containers (similar to what the new Profile System looks like on vb3.7). Please do not confuse this with the Tab Menu System here at vbulletin.org. They are totally different systems. These Tabs actually switch the content without leaving the main forums page.

I wrote the initial Non AJAX version based on reading many requests from members asking about how namepros created their custom tabbed forum home page. The first implementation I did was a request by bbwforums.net (which you can visit to see a working example). I have shared this version with many members already and decided to release it since it seems to be something that a lot of members are interested in.

UPDATE: I have released a BETA [AJAX] version for those that what something a little more robust and easier to install/configure. This Beta version will never go into production tho as version 2.0 will utilize the YUI AJAX Tabview Toolset. It IS stable tho and is currently running on a few live sites.

NOTE: Keep in mind, I wrote this with the assumption that you are fairly well versed and comfortable with editing files/templates and following the flow of things. If there is something you don't understand, PLEASE let me know so that I can help you understand it. This IS NOT a product that a novice can just plug and play and it takes a little bit of time to setup, but its well worth it in the end (if you want a custom unique look to your forum home page)... the next version (Don't ask when, cause its just on the drawing board) will be a product with ACP controls for easy setup

The attached Zip File(s) contain the Files and Instructions necessary to install each version.

DEMO: www.bbwforums.net or www.namepros.com
[Moderator Edit: The first URL has been un-linked as there has been reported malware on that domain. The mod author may edit this notice once the situation has been cleaned.]

Screen Shots: None, visit one or both of the above links as seeing them in action is better than some static image(s)..

Bobster

Change Log

version 1.01 -
tabcontent.js ver 2.2 to support remote links
updated install instructions (both in txt and rtf format)

version 1.5.0 -
BETA [AJAX] version

July 8, 2008 - Added xml file for WOL
Sep 2, 2008 - Updated xml file for WOL

Download Now

File Type: zip Tab Forum Home 1.01.zip (22.7 KB, 3409 views)
File Type: zip AJAX Tab Forum Home 1.5.zip (13.8 KB, 4632 views)
File Type: xml tfh-wol-plugins.xml (855 Bytes, 1845 views)

Supporters / CoAuthors

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #2  
Old 04-10-2008, 01:18 AM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

THIS ENHANCEMENT IS FOR Version 1.50

Tabs for Specific User Groups Only (Ver 1.50)

You can wrap a specific TAB <li> tag with a template conditional where the numbers after userinfo are the User Group IDs that you want to display the Tab too.

So for example if you wanted to hide one for Staff Only it would look like this (See the code in RED)

Code:
<div id="ajaxTFH" class="TFHmenu2">
	<ul>
		<li class="selected"><a href="tabforumhome.php?tabcat[]=1" rel="ajaxTFHcontentarea">TAB 1 NAME</a></li>
		<li><a href="tabforumhome.php?tabcat[]=1&tabcat[]=2" rel="ajaxTFHcontentarea">TAB 2 NAME</a></li>
		
                <if condition="is_member_of($vbulletin->userinfo, 5,6)">
                     <li><a href="tabforumhome.php?tabcat[]=100" rel="ajaxTFHcontentarea">STAFF</a></li>
                </if>

	</ul>
</div>


THESE ENHANCEMENTS ARE FOR Version 1.01 ONLY

Tabs for Specific User Groups Only

Would you like a Tab to be visible only for a specific User Group(s)? simply wrap the specific tab with this... (use the ID's of the user groups you want to be able to view it)

Code:
<if condition="is_member_of($vbulletin->userinfo, 5,6)"> 

</if>
so it would look something like this.. (The code in RED is what you would need to add ...

Code:
<!-- Tabbed Forum Home Tabs Layout -->
	<ul id="forumtabs" class="shadetabs"> 
	<li><a href="#" rel="tcontent1" class="selected">Tab 1 Name</a></li> 
	<li><a href="#" rel="tcontent2">Tab 2 Name</a></li> 
	<if condition="is_member_of($vbulletin->userinfo, 5,6)">
           <li><a href="#" rel="tcontent3">BETA FORUM Tab/a></li>
        </if> 
	</ul> 
	<!-- /Tabbed Forum Home Tabs Layout -->
Then you will also want to wrap the tab display data as well ..

Code:
<!-- Tabbed Forum Home – START BETA FORUM TAB Content Layout -->

<if condition="is_member_of($vbulletin->userinfo, 5,6)">

<div id="tcontent3" class="tabcontent">

CONTENT REMOVED FOR EXAMPLE ONLY

</div>

</if>

<!-- /Tabbed Forum Home – END BETA FORUM TAB Content Layout-->


Custom Look and Feel

The Look and Feel is all driven by the tabcontent.css file. You can easily customize the look with a few simple edits to the base css. There are also plenty of different "tab" css scripts available at dynamic drive that will work with this.


Using images for the tabs

You can completely customize the look of the tabs, such as changing them to image links. The script treats every link ("A") within the specified tab container as a potential tab link, so as long as your tabs are some form of links, it will work. For example:

Code:
<div id="forumtabs">
<a href="#" rel="tcontent1" class="selected"><img src="tab1.gif" /></a>&nbsp;
<a href="#" rel="tcontent2"><img src="tab2.gif" /></a></li>&nbsp;
<a href="#" rel="tcontent3"><img src="tab3.gif" /></a>&nbsp;
<a href="#" rel="tcontent4"><img src="tab4.gif" /></a>
</div>


Changing the location the script looks for a class="selected" declaration

By default, if you wish a tab to be automatically selected when the page loads, you add a class="selected" attribute inside that tab link ("A"). However, sometimes your CSS for the tabs may be structured in a way that would make things a lot easier for you if you can add class="selected" to the parent of the tab link, and still have the "default selected" feature work. An example would be tab links that are each wrapped around a DIV, and styling to the selected tab in your CSS is on the DIV element, not the link:

Code:
<div id="forumtabs" class="someclass">
<div class="selected"><a href="#" rel="tcontent1">Tab 1</a></div>
<div><a href="#" rel="tcontent2">Tab 2</a></div>
<div><a href="#" rel="tcontent3">Tab 3</a></div>
<div><a href="#" rel="tcontent4">Tab 4</a></div>
To tell the script to look for class="selected" on each tab link's parent container, you would call setselectedClassTarget() with the string parameter in red:

Code:
<script type="text/javascript">

var newcontent=new ddtabcontent("forumtabs")
newcontent.setselectedClassTarget("linkparent") //"link" or "linkparent"
newcontent.init()

</script>


Dynamically selecting a tab anywhere on your page

After your Tab Content is initialized and displayed, you can dynamically select any of its tabs, by calling the method: instance.expandit(tabid_or_position)

The parameter entered should either be a string representing the tab link's ID attribute (you need to first assign one to that tab), or an integer corresponding to that tab's position relative to its peers, to select. For the later, the counting starts at 0 (ie: 0=1st tab). Building on the example above, here are two links that select two tabs within it:

Code:
<!--Selects 2nd tab within Tab instance "myflowers" -->
<a href="javascript:myflowers.expandit(1)">Select 2nd Tab</a>

<!--Selects tab with ID="roses" within Tab instance "myflowers" -->
<!--Be sure to first insert ID="roses" inside the target tab's link element.
<a href="javascript:myflowers.expandit('roses')">Select "Roses" tab</a>


Dynamically selecting a tab using a remote link (tabcontent.js v2.2 or above)

Starting in tabcontent.js v2.2, you can define a link on another page that selects a tab on the target page (one containing Tab Content script) when the page is loaded. In other words, depending on the referring page, a different tab can be selected by default. This is done by adding to the original link a URL parameter string specifying the Tab Content's main container ID, plus the index of the tab to select. The syntax is:

Code:
<a href="index.php?tabinterfaceid=index">Target Page</a>

where "tabinterfaceid" is the ID of the main tab container, and index is the tab to select based on its position relative to its peers (0=1st tab). For example, given the below initialization code:

Code:
<script type="text/javascript">

var myforumtabs=new ddtabcontent("forumtabs") //enter ID of Tab Container
myforumtabs.setpersist(true) //toogle persistence of the tabs' state
myforumtabs.setselectedClassTarget("link") //"link" or "linkparent"
myforumtabs.init()

</script>

The following link (presumably on another page) causes the 2nd tab within the above Tab content instance to be selected by default when "index.php" loads:

Code:
<a href="index.php?forumtabs=1">Target Page</a>

If your page contains multiple Tab content instances and you wish to select a tab explicity using the URL method for all of them, you can do that as well:

Code:
<a href="index.php?forumtabs=1&subforumtabs=2>Target Page</a>

The URL parameter method of tab selection overrides both the persisted tab states and default selected tab setting using class="selected' within the HTML.
Reply With Quote
  #3  
Old 04-10-2008, 01:26 AM
Derek Chai Derek Chai is offline
 
Join Date: Aug 2007
Posts: 170
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Very nice!!@#@$
Reply With Quote
  #4  
Old 04-10-2008, 01:56 AM
ssslippy ssslippy is offline
 
Join Date: Jan 2006
Posts: 877
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Awesome job!
Reply With Quote
  #5  
Old 04-10-2008, 02:00 AM
RvG2 RvG2 is offline
 
Join Date: Jan 2007
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

hey will it work on 3.7??
Reply With Quote
  #6  
Old 04-10-2008, 02:06 AM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by RvG2 View Post
hey will it work on 3.7??
yes, it works fine with 3.7x
Reply With Quote
  #7  
Old 04-10-2008, 02:11 AM
Hornstar Hornstar is offline
 
Join Date: Jun 2005
Location: Australia
Posts: 2,469
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

So this is kind of like split forum home hack where you can split certain forums section to another page, but instead of being on another page with just a link to it, it is ajax based into tabs?
Is that correct?

Will search engines be able to find the content okay? because I notice each of the tab links all end in a #
Ideally it would be great if it was actually showing a link where users could link other people directly to that tabbed page.
Is that possible?
Reply With Quote
  #8  
Old 04-10-2008, 02:20 AM
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Location: Montana
Posts: 1,169
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by hornstar1337 View Post
So this is kind of like split forum home hack where you can split certain forums section to another page, but instead of being on another page with just a link to it, it is ajax based into tabs?
Is that correct?

Will search engines be able to find the content okay? because I notice each of the tab links all end in a #
Ideally it would be great if it was actually showing a link where users could link other people directly to that tabbed page.
Is that possible?
This version is not AJAX Based, but yes, you have the right concept. Simply check out one of the Demo links to see it in action.

Yes, Search engines can spider the content just fine.

I am pretty sure that there is a way to do direct links.. I'll dig into it and when I find something, I'll respond back to ya
Reply With Quote
  #9  
Old 04-10-2008, 02:23 AM
Q-v-n-s-Q Q-v-n-s-Q is offline
 
Join Date: Mar 2005
Posts: 289
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

cool mod, thanks

AJAX Tab Forum Home 1.5.zip is good for seo. If you need help with your site, feel free to join http://www.highrankforum.com/
Reply With Quote
  #10  
Old 04-10-2008, 02:51 AM
ssslippy ssslippy is offline
 
Join Date: Jan 2006
Posts: 877
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

This does not allow project tools to display.

What is your trick to get it not to go back to the top of the page?

Also it not switching the highlight for the current selected tab.
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 07:20 PM.


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.06572 seconds
  • Memory Usage 2,353KB
  • Queries Executed 27 (?)
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
  • (12)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (3)pagenav_pagelinkrel
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (3)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)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_postinfo_query
  • fetch_postinfo
  • 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
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete