Tabbed Forum Home with Ajax
After installing the Tabbed Forum Home by bobster65 here (well done, bobster65!) I decided to make a similar mode using Ajax because I want to reduce the initial load of the forum.
So basically this mod will apprear almost exactly the same as bobster65's mod but the way it works is totally different.
Since this is the beta version which I spent around 2 hours to code and test, please don't expect too much Since I don't know much about coding, I will not be able to make this mod become a product. Probably someone else better than me can do this.
You will need to upload some files, create 01 Child style, 01 new template and modify 01 existing template to install this mod through 6 steps as following:.
1/ Upload the tabs.js to folder clientscript (i.e: www.yourdomain.com/forum/clientscript/tabs.js)
2/ Upload the tabs.css and 2 gif images to folder clientscript/vbulletin_css/ (i.e: http://www.yourdomain.com/forum/clientscript/vbulletin_css/tabs.css)
3/ Upload tabs.php to your forum root (i.e: www.yourdomain.com/forum/tabs.php)
4/ Go to your Admin CP and create a new child style from your current style.
5/ On the new style your have just created, from the Template Options, choose "Add New Template" and name it tabs_forumbits.
Copy the below code and paste to the Template section and submit:
Code:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script6/ Ok, now you need to modify the FORUMHOME template as following:
Add this code between <head> and </head>
Code:
<script type="text/javascript" src="clientscript/tabs.js"></script>
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/tabs.css" />On the <body> tag, add this code:
Code:
onLoad="startLoad();"So the body tag should be like this:
Code:
<body onLoad="startLoad();">Now replace all codes between <!-- main --> and <!-- /main --> by this code:
Code:
<!-- Tab menu by NsT @ RCHobby365 -->
<table border="0" width="100%" align="center">
<tr><td>
<div id="tabsF">
<ul>
<li><a href="#1" onClick="tab('1')"><span>Category 1</span></a></li>
<li><a href="#2" onClick="tab('2')"><span>Category 2</span></a></li>
<li><a href="#3|4" onClick="tab('3|4')"><span>Category 4</span></a></li>
</ul>
</div>
</td></tr>
<tr><td id="forumbits">
</td></tr></table>
<!-- End tab menu -->Basically the mod is done. Now it's time for you to config the tabs.
<li><a href="#1" onClick="tab('1')"><span>Category 1</span></a></li>
If you want a tab to list a single category with its sub-forums, on the function tab() you just need to enter the category ID:
For example: tab('1') will list Category ID=1 and its sub-forums.
If you want a tab to list multiple category with their sub-forums, on the function tab() you need to enter a string of categories ID.
For example: tab('3|4') will list Category ID=3 and ID=4 with their sub-forums.
You can list as many categories as you want, just add their ID into the string, seperate by "|".
Athough this mod use Ajax, but you still can copy the link and send to you friend. For example, you can try to access this link: RCHobby365 - Powered by vBulletin
And that's it. Demo can be view here: RCHobby365 - Powered by vBulletin
Hope you will like it and work together to make it better.
Credits:
- Vbulletin functions
- bobster65 for his idea about the tabbed forum.
- Css tab menu by Free CSS Navigation Menu Designs at exploding-boy.com
Screenshot:
