Forum Home Enhancements - [AJAX] Tabbed Forum Home

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

[bobster65]

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)

<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)

<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 ...

<!-- 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 ..

<!-- 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:

<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:

<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:

<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:

<!--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:

<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:

<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:

<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:

<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.

[Derek Chai]

Very nice!!@#@$

[ssslippy]

Awesome job!

[RvG2]

hey will it work on 3.7??

[bobster65]

Originally Posted by RvG2

hey will it work on 3.7??

yes, it works fine with 3.7x

[Hornstar]

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?

[bobster65]

Originally Posted by hornstar1337

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

[Q-v-n-s-Q]

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/

[ssslippy]

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.