Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
[AJAX] Tabbed Forum Home Details »»
[AJAX] Tabbed Forum Home
Mod Version: 1.5.0, by bobster65 (Coder/Designer) bobster65 is offline
Developer Last Online: Nov 2013 I like it Show Printable Version Email this Page

vB Version: 3.8.x Rating: (75 votes - 4.92 average) Installs: 591
Released: 10 Apr 2008 Last Update: 03 Sep 2008 Downloads: 9207
Not Supported Template Edits Code Changes Additional Files Translations  

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

Only licensed members can download files, Click Here for more information.

Supporters / CoAuthors

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Comments
  #2  
Old 10 Apr 2008, 02:18
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
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)


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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)


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Then you will also want to wrap the tab display data as well ..


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


The URL parameter method of tab selection overrides both the persisted tab states and default selected tab setting using class="selected' within the HTML.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.

Last edited by bobster65; 12 Sep 2008 at 00:45.
Reply With Quote
  #3  
Old 10 Apr 2008, 02:26
Derek Chai Derek Chai is offline
 
Join Date: Aug 2007
Very nice!!@#@$
Reply With Quote
  #4  
Old 10 Apr 2008, 02:56
ssslippy's Avatar
ssslippy ssslippy is offline
 
Join Date: Jan 2006
Awesome job!
__________________
Immortal Guild - My Guilds Website
Reply With Quote
  #5  
Old 10 Apr 2008, 03:00
RvG2's Avatar
RvG2 RvG2 is offline
 
Join Date: Jan 2007
hey will it work on 3.7??
Reply With Quote
  #6  
Old 10 Apr 2008, 03:06
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by RvG2 View Post
hey will it work on 3.7??
yes, it works fine with 3.7x
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #7  
Old 10 Apr 2008, 03:11
Hornstar's Avatar
Hornstar Hornstar is offline
 
Join Date: Jun 2005
Real name: Matt
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 10 Apr 2008, 03:20
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
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
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #9  
Old 10 Apr 2008, 03:23
Q-v-n-s-Q Q-v-n-s-Q is offline
 
Join Date: Mar 2005
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/
__________________
PossibleAndroid

Last edited by Q-v-n-s-Q; 27 Jul 2008 at 11:28.
Reply With Quote
  #10  
Old 10 Apr 2008, 03:51
ssslippy's Avatar
ssslippy ssslippy is offline
 
Join Date: Jan 2006
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.
__________________
Immortal Guild - My Guilds Website

Last edited by ssslippy; 10 Apr 2008 at 04:48.
Reply With Quote
  #11  
Old 10 Apr 2008, 04:50
bobster65's Avatar
bobster65 bobster65 is offline
 
Join Date: Mar 2006
Real name: Bob
Originally Posted by ssslippy View Post
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.
I don't have project tools, so right now I don't have an answer for you about that. I am sure that it would be easy to incorporate it tho.

The highlights are controlled with the CSS file. Included with the the ZIP are a couple different versions of CSS and you can always modify the CSS to match your style very easy.
__________________
Please Do Not PM me for vBulletin assistance... I am currently only doing customization & addon's for Xenforo.
Reply With Quote
  #12  
Old 10 Apr 2008, 04:52
ovnnet ovnnet is offline
 
Join Date: Nov 2007
Very very beutifull job

@bobster65: You should remove .rtf and .tmp files in your archive
Reply With Quote
  #13  
Old 10 Apr 2008, 06:53
Hornstar's Avatar
Hornstar Hornstar is offline
 
Join Date: Jun 2005
Real name: Matt
Originally Posted by bobster65 View Post
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
Thanks, with this and a few other features, this has great potential to be mod of the month!

It really frees up the forum home if you have many forums.
Reply With Quote
  #14  
Old 10 Apr 2008, 07:26
viganothing viganothing is offline
 
Join Date: Nov 2007
super cool mod =)
Reply With Quote
  #15  
Old 10 Apr 2008, 08:41
Deepdog009's Avatar
Deepdog009 Deepdog009 is offline
 
Join Date: Dec 2004
Thumbs up Beauts

Great Work Bobster65

TABs CiTy ...

Keep the ball rolling
__________________
Long vacation folks, back 2 dabble and doodle... *** Enjoy the Forums
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

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


New To Site? Need Help?

All times are GMT. The time now is 12:04.

Layout Options | Width: Wide Color: