MyBB Community Forums

Full Version: [Tutorial] Tabbed forum with jQuery (multi categories in one tab)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Hover the category link in your forum, or maybe in you ACP. At the end of the URL, it is the category id.
I'll try to explain again.
You can make it appear the forums that are on the first tab when it opens the main forum.
As in the labrocca plugin. Only the forums on the first tab appear.
check out this site

-----> http://www.elitev2.com/index.php <-------

i want tabs like that =/
Try this code:
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat at tab" title="" rel="cat_1" border="1px">Category 1</td>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat tab" title="" rel="cat_1" border="1px">Category 2</td>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat tab" title="" rel="cat_3" border="1px">Category 3</td>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat tab" title="" rel="cat_12" border="1px">Category 4</td>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat tab" title="" rel="cat_18" border="1px">Category 5</td>
<td style="border: 1px solid #000000; cursor: pointer" class="tcat tab" title="" rel="cat_25" border="1px">Category 6</td>
</tr>
</table>

it works on 1.6.xx to? :-?
Yes it works on newest version 1.6+
(2010-08-21, 05:27 PM)proXace™ Wrote: [ -> ]http://musicentral.net

The site was moving servers at the time you checked Joey.

It is possible to place multiple categories into a each tab. Look at my forum and go through the tabs, each tab has about 2 categories.

This is what I had done. Was abit of trial and error, but I managed to figure out exactly what was what.

<td class="tcat at tab" title="Category 1 &amp; 7" style="cursor: pointer;" rel="cat_1, #cat_7">Tab 1</td>

<td class="tcat tab" title="Category 12 &amp; 13" style="cursor: pointer;" rel="cat_12, #cat_13">Tab 2</td>

<td class="tcat tab" title="Category 14 &amp; 15" style="cursor: pointer;" rel="cat_14, #cat_15">Tab 3</td>

<td class="tcat tab" title="Category 16" style="cursor: pointer;" rel="cat_16">Tab 4</td>

See the category numbers? Well unless you exactly know what number each category is, work your way through each number. Obviously the more forums you have, the higher the number will be.

Change 'Tab #' to the name of the tab that you want.

Its abit like trial and error. Change the category number and save it. Then check your forum to see if there is more then one category in a tab. If not repeat the process but change the number to the next number in the number line.

Joey, feel free to use my site as a demo if need be, as the demo you have now is not online.

Thanks a lot proXace™
I got everything to but the tabs dont do anything when I change the the tab
Site : http://forum.adminjunction.info
forumbit_depth2_cat:
<div id="cat_{$forum['fid']}" class="content">

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

</div>


Index Page Template:
 

{$welcomeguest}
<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$.noConflict();

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('.tab').click(function(){

$('.at').removeClass('at');

$(this).addClass('at');

$('.content').slideUp();

var catshow = $(this).attr('rel');

$('#'+ catshow).slideDown();

});

});

</script>

<table border="0" cellpadding="4" cellspacing="0">

<tr>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat at
 tab" title="" rel="cat_1" border="1px">Category 1</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_1" border="1px">Category 2</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_3" border="1px">Category 3</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_12" border="1px">Category 4</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_18" border="1px">Category 5</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_25" border="1px">Category 6</td>

</tr>

</table>
{$forums}

(2010-09-18, 11:32 PM)Mokeli Wrote: [ -> ]I got everything to but the tabs dont do anything when I change the the tab
Site : http://forum.adminjunction.info
forumbit_depth2_cat:
<div id="cat_{$forum['fid']}" class="content">

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

</div>


Index Page Template:
 

{$welcomeguest}
<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$.noConflict();

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

$('.tab').click(function(){

$('.at').removeClass('at');

$(this).addClass('at');

$('.content').slideUp();

var catshow = $(this).attr('rel');

$('#'+ catshow).slideDown();

});

});

</script>

<table border="0" cellpadding="4" cellspacing="0">

<tr>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat at
 tab" title="" rel="cat_1" border="1px">Category 1</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_1" border="1px">Category 2</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_3" border="1px">Category 3</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_12" border="1px">Category 4</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_18" border="1px">Category 5</td>

<td style="border: 1px solid #000000; cursor: pointer" class="tcat 
tab" title="" rel="cat_25" border="1px">Category 6</td>

</tr>

</table>
{$forums}


You need edit forumbit_depth1_cat and NOT forumbit_depth2_cat
maybe is that the problem?
I am using this for my forum
http://forumese.com
and its awesome! thanks for sharing this tutorial.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17