vb.org Archive - Forum Home Enhancements - [AJAX] Tabbed Forum Home

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=235)

- - Forum Home Enhancements - [AJAX] Tabbed Forum Home (https://vborg.vbsupport.ru/showthread.php?t=175687)

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

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

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.

hey will it work on 3.7??

Quote:

Originally Posted by RvG2 (Post 1487155)

hey will it work on 3.7??

yes, it works fine with 3.7x

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?

Quote:

Originally Posted by hornstar1337 (Post 1487162)

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

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/

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.

Quote:

Originally Posted by ssslippy (Post 1487188)

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.

Very very beutifull job

@bobster65: You should remove .rtf and .tmp files in your archive :)

Quote:

Originally Posted by bobster65 (Post 1487168)

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.

Great Work Bobster65

TABs CiTy ...

Keep the ball rolling;)

What I ment for the highlighting not showing is when you chose a category it is still showing as if you have selected the base category.

Any ideas how to stop it jumping back to the top of the page when you select a tab?

edit: figured it out - what kind of load increase will this hack cause?

hello bobster!
you rock! :D
tks!
beduino

thanks a lot buddy I needed it :D:up:

Installed, great stuff.

Quote:

Originally Posted by Ozster (Post 1487334)

Any ideas how to stop it jumping back to the top of the page when you select a tab?

edit: figured it out - what kind of load increase will this hack cause?

How did u make it stop jumping to the top of the page?

very nicely done :) thanx

will install soon :D

Bobster thank you very much for this awesome mod. I will test and no doubt it should look great.

Do you know if this might affect search engine crawling..?

Cliked Install and nominated for MOTM

Quote:

Originally Posted by valdet (Post 1487531)

Bobster thank you very much for this awesome mod. I will test and no doubt it should look great.

Do you know if this might affect search engine crawling..?

Cliked Install and nominated for MOTM

Thanks Bud!

As far as Search Engine Crawling, it is fully unobtrusive, search engine friendly :up:

Hello bobster65,

thanks for this great mod! :)
I have a question, wich have troubled me all day, see the moderator column in the attached picture... What am i doing wrong? I am about to throw my comp out the window :erm:

Quote:

Originally Posted by tmiland (Post 1487617)

no, don't throw it out the window lol.. I see whats wrong. Its a colspan issue..

in my sample code (step 18) look for this towards the beginning of the step..

What I did was include my custom code that didn't account for the 6th column (Moderator) (See the part in BOLD RED) Below...

Code:

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

<tbody>

        <tr>

                <td class="tcat" colspan="5"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_66')"><img id="collapseimg_forumbit_66" src="images/solido/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=6">CATEGORY NAME</a></td>

        </tr>

</tbody>



<tbody id="collapseobj_forumbit_66" style="">

$forumbits2

</tbody>

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

so what you can do is add this condition to it

Code:

<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>

So it would look something like this..

Code:

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

<tbody>

        <tr>

                <td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_66')"><img id="collapseimg_forumbit_66" src="images/solido/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=6">CATEGORY NAME</a></td>

        </tr>

</tbody>



<tbody id="collapseobj_forumbit_66" style="">

$forumbits2

</tbody>

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

That will fix it for you..

hi everyone, im new to vbulletin and just set my forum up today and got a skin and all that and loved this mod BUT i am a very big moron at following instuctions. I was wondering if anyone had 5 to 10 mins of there time to help me out personally or do it for me. It would be a great help.

P.S. iv tried to follow the instructions and lost all my forum so i had to revert it.

Some assitance would be nice

P.S... sorry about my english

*UPDATED* to version 1.01

Those that marked installed received the updated information via email.

Only the tabcontent.js was updated, so simply download the new zip and upload the new .js file.

Additional information has also been updated in Post #2

Quote:

Originally Posted by pooffck (Post 1487637)

be sure to follow steps 1-4 for setting up the install environment. I wrote it this way specifically so you won't lose anything that is important while adding this.

I'd install it for you, but I am completely swamped :o

This is what i was expecting since days.
Excellent work bobster!

Quote:

Originally Posted by bobster65 (Post 1487620)

no, don't throw it out the window lol..

You just saved my computer from going out the window lmao!!
Thank you so very much mister :D
I got the first tab set up now, only hmmm... 10 to go lol!
Well, from my calculations with 1 tab a day, would take me 10 more days to finish'em :eek::D

Nominated and installed etc etc :p

Great mod!

*edit*

Would it be possible to add tabs like in the profile page? For the statistics, about me etc... :)

Thank you thank you thank you thank you thank you thank you!!!!!!!! I haven't installed yet, but I'm already nominating for MOTM.

Quote:

Originally Posted by tmiland (Post 1487715)

Would it be possible to add tabs like in the profile page? For the statistics, about me etc... :)

yes. wouldn't be that hard to do..

Has anyone actually implemented it? I had to change

$forumbits2b = construct_forum_bit(45,1,0);
to
$forumbits2b = construct_forum_bit(45);

for the forums to display correctly. I noticed that in my index.php file, directly above the pieces we add, my $forumbits = construct_forum_bit($forumid);

Quote:

Originally Posted by meissenation (Post 1487858)

yes, a lot of members have this already installed and running prior to it being released. Both ways will work. What version of vB are you running?

the construct_forum_bit function is located in the functions_forumlist.php

If you just send 45, then it defaults to (45,0,0) and 0 will be a forum depth of 2

Code:

// ###################### Start makeforumbit #######################

// this function returns the properly-ordered and formatted forum lists for forumhome,

// forumdisplay and usercp. Of course, you could use it elsewhere too..

function construct_forum_bit($parentid, $depth = 0, $subsonly = 0)

{

        global $vbulletin, $stylevar, $vbphrase, $show;

        global $imodcache, $lastpostarray, $counters, $inforum;



        // this function takes the constant MAXFORUMDEPTH as its guide for how

        // deep to recurse down forum lists. if MAXFORUMDEPTH is not defined,

        // it will assume a depth of 2.

Ah, that'd also explain why the subforums weren't showing, hahahaha.

I have 3.6.6.

I have it fully implemented on www.mifbody.com and it works great for me! :D Thank you so much for this, it's exactly what we were needing!

Quote:

Originally Posted by meissenation (Post 1487922)

Yer welcome.... Looks good. Only suggestion that I have would be to use different tab images to match your style :D

Thanks! Great mod, installed and nominated.
One thing though...

For dynamically selecting a tab we're supposed to use
<a href="javascript:instance.expandit(1)">Select 2nd Tab</a>

What is exactly is the instance? How is it defined? and when you say tab# starting with 0, would the first one (0) be the one with the first tabbed link, the first one in the code itself, or tcontent1??

Quote:

Originally Posted by bobster65 (Post 1487793)

yes. wouldn't be that hard to do..

Sweet! :)

Awaiting instructions... :o

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02861 seconds Memory Usage 1,888KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (16)bbcode_code_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)pagenav_pagelinkrel (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: