Forum Home Enhancements - [AJAX] Tab Menu For Forum Home

Okay so this is my first contribution to Vbulletin fans. I'm not a coder but I know a little bit about PHP and Javascripts.

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 Because 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.

Update:

25/06/08 - Version 1.3: Fix problem with category's description and category ID on tabs_forumbits template. Remember to update tabs_forumbits template and replace old tabs.php by new tabs.php.

09/06/2008 - Version 1.2: Fix problem with loading default tab initially when member access index.php. Now can load as many categories as you want. 01 new template is created. For whom is using older version, when upgrading to 1.2, please update all new template contents as below.

07/06/2008 - Version 1.1: I found problem with restricted forum so I updated the code to fix this problem. Please make sure you have latest version.

07/06/2008 - Version 1.0: I have revised the code on the tab menu to make it simple to config the tab. I added some codes to set the selected tab.

================================================== ====
LET'S START
================================================== ====

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/clie...n_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_forumhome.

Copy the below code and paste to the Template section and submit:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[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']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
		</strong></div></td>
	</tr>
</tbody>
</table>
$forumhome_markread_script

6/ Do step 5 again and name it tabs_forumbits copy and paste the following code into Template section:

<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_$tabs[id]')"><img id="collapseimg_forumbit_$tabs[id]" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=$tabs[id]">$tabs[title]</a></td><tr>
<td class="smallfont" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">$tabs[description]</td>
	</tr>
</tbody>

<tbody id="collapseobj_forumbit_$tabs[id]" style="">$tabs[forumbits]</tbody>

7/ Now you need to create a new template for login required forum. Do step 5 again and name it tabs_loginrequired and paste the below code into Template section:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="70%" align="center">
<tr>
	<td class="tcat">$vbphrase[vbulletin_message]</td>
</tr>
<tr>
	<td class="panelsurround" align="center">
	<div class="panel">
		<div align="$stylevar[left]">

			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
			<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
			<input type="hidden" name="do" value="login" />
			<input type="hidden" name="url" value="$scriptpath" />
			<input type="hidden" name="vb_login_md5password" />
			<input type="hidden" name="vb_login_md5password_utf" />
			$postvars

			<input type="hidden" name="s" value="$session[sessionhash]" />
			<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />

			<blockquote>
$vbphrase[not_logged_no_permission]<br /> <br />
1. $vbphrase[not_logged_in_fill_in_form]<br />
2. $vbphrase[may_not_have_sufficient_privileges]<br />
3. $vbphrase[administrator_may_disabled_account]<br />
</blockquote>

			<fieldset class="fieldset">
				<legend>$vbphrase[log_in]</legend>
				<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" align="center">
				<tr>
					<td>$vbphrase[username]:<br /><input type="text" class="bginput" name="vb_login_username" size="50" accesskey="u" tabindex="1" /></td>
				</tr>
				<tr>
					<td>$vbphrase[password]:<br /><input type="password" class="bginput" name="vb_login_password" size="50" tabindex="1" /></td>
				</tr>
				<tr>
					<td>
						<span style="float:$stylevar[right]"><a href="login.php?$session[sessionurl]do=lostpw">$vbphrase[forgotten_your_password]</a></span>
						<label for="cb_cookieuser"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser" tabindex="1" />$vbphrase[remember_me]</label>
					</td>
				</tr>
				<tr>
					<td align="$stylevar[right]">
						<input type="submit" class="button" value="$vbphrase[log_in]" accesskey="s" tabindex="1" />
						<input type="reset" class="button" value="$vbphrase[reset_fields]" accesskey="r" tabindex="1" />
					</td>
				</tr>
				</table>
			</fieldset>

			<if condition="$show['register_message']">
				<div class="smallfont"><phrase 1="register.php?$session[sessionurl]do=signup">$vbphrase[admin_required_register]</phrase></div>
			</if>
			</form>

		</div>
	</div>
	</td>
</tr>
</table>

8/ Ok, now you need to modify the FORUMHOME template as following:

Add this code between <head> and </head>

<script type="text/javascript" src="clientscript/tabs.js"></script>
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/tabs.css" />

Now replace all codes between <!-- main --> and <!-- /main --> by this code:

New code update 07/06/2008

<!-- Tab menu by NsT @ RCHobby365 -->
<!-- Default tab ID to load initially -->
<input type="hidden" value="1" id="defaulttab">
<table border="0" width="100%" align="center">
<tr><td>
<div id="tabsF">
<ul>
<li><a href="#1" id="a1"><span id="s1">Category 1</span></a></li>
<li><a href="#2" id="a2"><span id="s2">Category 2</span></a></li>
<li><a href="#3|4" id="a3|4"><span id="s3|4">Category 4</span></a></li>
</ul> 
</div>
</td></tr>
<tr><td id="forumbits">
	
</td></tr></table>
<!-- End tab menu -->

On the <body> tag, add this code:

onLoad="startLoad();"

So the body tag should be like this:

<body onLoad="startLoad();">

Now the mod is almost done. It's time for you to config the tabs. The update on 07/06/2008 basically remove the onClick event to make the tab simpler.

Note: You MUST define a specific tab you want to load initially (this will load a specific tab when user access default url such as: forum/index.php). To do this, you need to enter the value (ID) of the hidden input:

<input type="hidden" value="1" id="defaulttab">

Now the value="1" so it will load category ID=1 if member go to your index.php page. If you want to load several categories, you need to add the category ID into a string seperate by |.

For example: value="1|3" and this will load category 1 and 3. You MUST also have a tab that loads category 1 and 3 or the mod wont work and you will receive an Javascript error.

Exampe: <li><a href="#1|3" id="a1|3"><span id="s1|3">Category 1</span></a></li>

<li><a href="#1" id="a1"><span id="s1">Category 1</span></a></li>

If you want a tab to list a single category with its sub-forums, on the href you just need to enter the category ID after the #:

For example: href="#1" will list Category ID=1 and its sub-forums.

If you want a tab to list multiple category with their sub-forums, you need to enter a string of categories ID.

For example: href="#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 "|" and this string must be after the #.

The ID of <a> and <span> tag is used to define the selected tab. The ID is given by the ID of a single category or multiple category with "|". ID of <a> tag starts with "a" and ID of <span> tag starts with "s".

To load all category like normal, you can use this tab:

<li><a href="#all" id="aall"><span id="sall">View All</span> </a></li>

And that's it

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 www.exploding-boy.com/images/cssmenus/menus.html

[vidan]

hello =) thanks for great mods, but you must fix the login(cookie) issue, not all ppl want to use remember me option(if they are in netcafe?) and user keep log out if not using remember me.

[NsT]

@ YuOr: believe me, this mod is very easy, you don't need to spend any $$$ to install it but a few minutes

@ vidan: yes, you're absolutely right. I'm working on it, hopefully i can fix it soon.

[YuOr]

Originally Posted by NsT

@ YuOr: believe me, this mod is very easy, you don't need to spend any $$$ to install it but a few minutes

did you try to install it with two toddlers jumping on you? LOL
I think i'll give it a try when they fall asleep

[CHIPIT]

Great mod, thanks!
However, I'm having a few issues.
1) I have forum descriptions enabled which should show in the tcat, however this is not the case and editing forumhome_forumbits to include the description variable does not work.

2) All the collapse buttons collapse the first one and the link in the tcat never points to a forumid. It would appear "$i" is not working.

[NsT]

Thanks for reporting issues.

Both issues were fixed with version 1.3, it's available to download now.

[Sharapova]

Ok huge problem. Please help.

I have no <main> Tags

This is the forum, look http://www.ozvirtualsports.com/forum/index.php choose the Adobedecker skin

This is my forumhome

</head>
<body>
$header
$navbar
<!-- guest welcome message -->
<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
		<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
	</tr>
	<tr>
		<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
			<phrase 1="faq.php$session[sessionurl_q]" 2="register.php$session[sessionurl_q]">$vbphrase[first_visit_message]</phrase>
		</td>
	</tr>

</table> 
<br />
</if>
<!-- / guest welcome message -->

$forumbits $forumhome_markread_script
<br />
$ad_location[ad_forumhome_afterforums]

<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
	</tr>
</thead>
<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
			<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
	<tr>
		<td class="alt2"><a href="online.php$session[sessionurl_q]" rel="nofollow"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
		<td class="alt1" width="100%">
			<div class="smallfont">
				<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
				<div>$activeusers</div>
			</div>
		</td>
	</tr>
</tbody>
<!-- end logged-in users -->
</if>
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
			<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
	<tr>
		<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
		<td class="alt1" width="100%">
		<div class="smallfont">
			<div>
				$vbphrase[threads]: $totalthreads,
				$vbphrase[posts]: $totalposts,
				$vbphrase[members]: $numbermembers<if condition="$show['activemembers']">,
					<span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
				</if>
			</div>
			<div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
		</div>
		</td>
	</tr>
</tbody>
<if condition="$show['birthdays']">
<!-- today's birthdays -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onClick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
			$vbphrase[todays_birthdays]
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
	<tr>
		<td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
		<td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
	</tr>
</tbody>
<!-- end today's birthdays -->
</if>
<if condition="$show['upcomingevents']">
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
			<if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
	<tr>
		<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
		<td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
	</tr>
</tbody>
</if>
<tbody>
 <tr>
		<td class="alt1" align="center" colspan="2"><div style="font-size:10px"><strong>
			<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
			<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]" rel="nofollow">$vbphrase[view_forum_leaders]</a></if>
&nbsp;
	<if condition="!$show['guest']">
		<!-- member logout -->
		<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a> 
		<!-- end member logout -->
	</if>
</strong></div></td>
	</tr>
</tbody>
</table>
<div class="cat-btm_x"><div class="cat-btm_lft"></div><div class="cat-btm_rht"></div></div>

<!-- icons -->
<div style="padding:8px; 0; 8px; 0;"></div>
<table class="tborder_icons" align="center" border="0" cellpadding="6" cellspacing="0" width="100%">


<tbody>
<tr align="center">
	<td class="alt2"><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="" border="0" /></td>
	<td align="left" class="alt1">
		<div class="smallfont">$vbphrase[forum_contains_new_posts]</div>
		
		
	</td>
	<td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="" border="0" /></td>
	<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_contains_no_new_posts]</div></td>
	  <td class="alt2" ><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="" border="0" /></td>
	<td align="left" class="alt1" ><div class="smallfont">$vbphrase[forum_is_closed_for_posting]</div></td>
</tr>


</tbody>

</table>
<!-- /icons-->

<!-- time and login code -->


<div style="padding:8px; 0; 8px; 0;"></div>


$footer
</body>
</html>

Where would I place step 8?

[NsT]

Sorry for my late reply!

On your code, you can delete "$forumbits $forumhome_markread_script" and replace by the code I supplied above.

Good luck!

[blanky]

Hi, I got it working great, but I have a problem, white lines between categories are showing up and I don't know why.. little help?

link: http://www.icheater.net/community/

Pic:

[NsT]

It seems guest can not select this style on your forum, I can't test it.

Since I make the templates based on default Vbulletin template so if you use different templates, you will have to modify the tabs_forumhome and tabs_forumbits.

The white line I think it's because of the the following codes:

<td class="smallfont" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">$tabs[description]</td>

[Aren]

Hi there NsT.

First of all, thanks a whole lot for such a great mod. I've been testing it and seems really good, but I got some problems yesterday that you need to be aware of.

I created three tabs (let's call them A, B and C). Tab A includes categories 1, 2 and 3, Tab B includes 4, 5 and 6 and Tab C only contains category 7.

Category 1 and 7 are only visible to admins and mods.
Category 2, 3, 4 and 5 are visible to everybody (including guests).
Category 6 is visible to some usergroups (neither registered users nor guests)

When I use my own user (an admin) everything works fine, but when I test it using a registered user, the problems arise.

When clicking on Tab A, I get a login page saying that I'm not logged in (I am and I checked the "Remember me" checkbox) or that I don't have permissions to access that page.

The same happens when clicking on Tab C.

And when clicking on Tab B I can see categories 4 and 5, category 6 "title" row is shown but not the forums it contains. If I do not have permissions to access that category I would expect that it is not shown at all (that's the default behaviour of vB).

So, basically, it seems that you should check how are you handling user's permissions.

Thanks anyway and keep up the good work!

Edited to fix an stupid (and big) error