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

[OsideRida06]

So here is my progress thus far.

I now have all of my tabs up and all the categories in each tab. I am still having a few problems though.

The first tab where it is set up different (done just as explained for the first tab) shows what the real skin is suppose to look like. The other tabs do not. Here are some screen shots to show you what I mean. Pay attention to the difference right below the tabs. I need to get the other tabs (in pic 2) to look like the first tab (in pic 1). I know once I change the first tab to only having one category like the others, that it to will look like the other tabs. How do I fix this?





Also I tried to make my Moderators 101 tab only viewable to Moderators, Super Moderators, and Admins. This also did not work. It gave me an error message and asked if I wanted to continue. So I clicked on continue. I then went to test it, and the index_tab page just gave an error message. So I removed the <if> commands until I can figure out why it is not working. Any suggestions? I am 99% sure I had them in the correct places.

[Defkalion]

Originally Posted by bobster65

Yer welcome

Yes, you can create extra tabs with info in them other than just Forum categories. All you need to do is put the info in what I call a content div area just like you did with the other tabs ..

Here is an example of putting the Whats going on box into a tab .. Note the RED IDs .. those are what link the tab to the div content ..

First you need to create an li tag for your new extra tab (I added a 4th tab in this example called Whats Going On and its ID=tcontent4

<!-- Tabbed Forum Home Tabs Layout -->
	<ul id="forumtabs" class="shadetabs"> 
	<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li> 
	<li><a href="#" rel="tcontent2">Tab 2</a></li> 
	<li><a href="#" rel="tcontent3">Tab 3</a></li>
	<li><a href="#" rel="tcontent4">Whats Going On</a></li>
       	</ul> 
<!-- /Tabbed Forum Home Tabs Layout -->

Then you need to create the Content Container and make sure that it has the same ID as the li tag you just added ..

<!-- Tabbed Forum Home – START whats going on box Tab Content Layout -->

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

<!-- what's going on box -->
CONTENT REMOVED FOR SAMPLE
<!-- end what's going on box -->

</div>

<!-- /Tabbed Forum Home – END Tab 4 Content Layout -->

NOTE: Make sure that when you add extra tabs that they go BEFORE the below block of code.. You can always move this chunk of code lower in the template, just make sure that any content area Divs that you add go before it .. (Hope that made sense)

<!-- Tabbed Forums switch tab script -->
	<script type="text/javascript">
	var myforumtabs=new ddtabcontent("forumtabs") 
	myforumtabs.setpersist(true) 
	myforumtabs.setselectedClassTarget("link") 
	myforumtabs.init()
	</script>
<!-- /end Tabbed Forums switch tab script -->

Thats all there is to it...

Bob your help is much appreciated. This worked excellent, you can check it here : http://www.travelstories.gr/index_forums.

Is there any way to "force" this last fourth tab to the right, since it contains stats? And also to have a diferrent font size/color for its text? I want to give more attention to the content tabs and "degrade" the stats tab

EDIT: also another question: what is the way of placing the Tabs ALSO in the bottom, besides the top of the forums?

[bobster65]

Originally Posted by rapidphim

Is it possible for:
1/ On each tab, show the number of new threads created/replied? For example: Tab 1 (2 New)
2/ A quick ajax display all the new created/replied threads when click on number of new created/replied threads?
3/ Everytime user clicks Home, is there away to bring them back to first tab, instead of staying at the current tab that they selected?

1. Yes, that is possible, you could get that information from the specific $forumbit array for each tab.

2. This version is not AJAX. The next version will have various AJAX settings that can be used.

3. Yes, set instance.setpersist(false). This tells the script whether to persist the tabs' state for the duration of the browser session. If enabled (true), the last clicked on tab is remembered and recalled upon the visitor's return. If disabled (false), it will load the "selected" tab upon each page load.

example ..

<!-- Tabbed Forums switch tab script -->
<script type="text/javascript">
var myforumtabs=new ddtabcontent("forumtabs") 
myforumtabs.setpersist(false) 
myforumtabs.setselectedClassTarget("link")
myforumtabs.init()
</script>
<!-- /end Tabbed Forums switch tab script -->

[bobster65]

Originally Posted by Defkalion

Bob your help is much appreciated. This worked excellent, you can check it here : http://www.travelstories.gr/index_forums.

Is there any way to "force" this last fourth tab to the right, since it contains stats? And also to have a diferrent font size/color for its text? I want to give more attention to the content tabs and "degrade" the stats tab

EDIT: also another question: what is the way of placing the Tabs ALSO in the bottom, besides the top of the forums?

The "LOOK" of the tabs is all driven by CSS, so you can do just about anything you want to. The tabs are simply list based links, and the tab contents are regular DIV contents on the page. Customization couldn't be easier. You are not "stuck" using the shadetabs CSS. The CSS File actually contains 2 other examples that you can configure (and modify) as well. Plus you can always use other CSS that can be found @ dynamic drive

If you note the content areas, they all currently use the class="tabcontent" ... for your extra tab, you could use another class for that individual Div and then define that in the CSS file

Tabs at the bottom and top? Haven't tried it, but simple copy the "tab" portion and place it after the last content area and before the switch tabs script .. in theory, that should work. one of the CSS style is use has tabs at the bottom, so I know it works, just never tried it with both top and bottom ..

[sweede]

I'm enjoying this hack info on my site http://dramaloot.com/forums/index.php , but instead of giving different tabs for different forum categories, I've created a plugin that allows me to use either a template or since i use VbaCMPS , a BBCode Page.

The tabs are also created by a vbulletin config option and you can also dynamicly adjust their order.

Since i added a considerable amount of content to the forum home , i have added an Ajax plugin that automaticly refreshes the forum content every 5 minutes or so. Instead of downloading a 140kb file every time you want to refresh the page to check for new posts, you only download a 20kb or so of data !

[bobster65]

Originally Posted by OsideRida06

So here is my progress thus far.

I now have all of my tabs up and all the categories in each tab. I am still having a few problems though.

The first tab where it is set up different (done just as explained for the first tab) shows what the real skin is suppose to look like. The other tabs do not. Here are some screen shots to show you what I mean. Pay attention to the difference right below the tabs. I need to get the other tabs (in pic 2) to look like the first tab (in pic 1). I know once I change the first tab to only having one category like the others, that it to will look like the other tabs. How do I fix this?





Also I tried to make my Moderators 101 tab only viewable to Moderators, Super Moderators, and Admins. This also did not work. It gave me an error message and asked if I wanted to continue. So I clicked on continue. I then went to test it, and the index_tab page just gave an error message. So I removed the <if> commands until I can figure out why it is not working. Any suggestions? I am 99% sure I had them in the correct places.

The problem some people are having is that they are trying to use the examples that are based off of the default vbulletin style when they are using custom styles that are slightly different layouts than default vbulletin.. this is why I included remarks in the code like this....

<!-- CUSTOM tbody CODE BASED ON YOUR STYLE -->

You just need to "tweak" it a little bit to get the correct layouts working based on your style. Version 2.0 is going to fix this problem as this step will be automated

as far as the error message, you must have grabbed what I had posted prior to me editing it.. I had a dang extra comma (,) after the last group id ... the example is fixed now and I know it works as Its running on multiple sites right now (just without the extra comma lol )

[bobster65]

Originally Posted by sweede

I'm enjoying this hack info on my site http://dramaloot.com/forums/index.php , but instead of giving different tabs for different forum categories, I've created a plugin that allows me to use either a template or since i use VbaCMPS , a BBCode Page.

The tabs are also created by a vbulletin config option and you can also dynamicly adjust their order.

Since i added a considerable amount of content to the forum home , i have added an Ajax plugin that automaticly refreshes the forum content every 5 minutes or so. Instead of downloading a 140kb file every time you want to refresh the page to check for new posts, you only download a 20kb or so of data !

Cool Beans Looks good! Looks like a combo of my CMPS MOD and this one..

Version 2 (already being built) will be a product with ACP controls, dynamic tab generation, additional content addition, usergroup permissions, AJAX (with multiple settings that can be turned on and off and set for specific "times") and more..

Version 3 (on the white board) will consist of USER controlled Tabs so that THEY can decide what order they want the tabs and what categories/forums fall under each tab..

[MarsNIIT]

Category1
-Forum1
--Subforum1
---Subforum1a
---Subforum1b

Category2 (hide)
-Forum2
--Subforum2
---Subforum2a
---Subforum2b

When i use subforum2, the tab not display: Last Post, Threads and Posts

But no problem when i use these forum in Forum1 (not hide)

not hide mean: Forum is Active selecte no
(Will not appear if set to no, but remains accessible if the forum's URL is known)

[rapidphim]

Originally Posted by bobster65

1. Yes, that is possible, you could get that information from the specific $forumbit array for each tab.

2. This version is not AJAX. The next version will have various AJAX settings that can be used.

3. Yes, set instance.setpersist(false). This tells the script whether to persist the tabs' state for the duration of the browser session. If enabled (true), the last clicked on tab is remembered and recalled upon the visitor's return. If disabled (false), it will load the "selected" tab upon each page load.

example ..

<!-- Tabbed Forums switch tab script -->
<script type="text/javascript">
var myforumtabs=new ddtabcontent("forumtabs") 
myforumtabs.setpersist(false) 
myforumtabs.setselectedClassTarget("link")
myforumtabs.init()
</script>
<!-- /end Tabbed Forums switch tab script -->

Thanks Bob for this... and how I am going to complete #1? And lots of queries will be using for this?

[veenuisthebest]

Originally Posted by veenuisthebest

ohhh.... the problem remains in IE... what to do now ???

The row gets totally messed up in IE, however.. working only in Firefox !!

pleasee ... bob.. help out this one !!