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

[RedTrinity]

Originally Posted by NsT

@ GamerGirl27: I checked your source code and everything seems right, I don't see why it doesn't work with default URL. I'll try to see what's happening.

Can you try to set to a different initial category? For example your category 17. Let see if it works?

Hey NsT,

Ok initially I had it set for a few categories for default, now I have just reduced to the one. But its still doing the same thing, unfortunately

Thanks for your help though, and quick response Look forward to getting this working as its just what we need atm!!

Cheers,

Nikki

[NsT]

Hi GamerGirl27,

Sorry that I didn't mention on the 1st post that the initial ID must be the same as one of your tabs ID. It means you can only load a specific tab initially.

I see that you reduce the ID string to 3, however, this is not correct because you don't have any <a> and <span> tag with ID=3.

Can you replace 3 by 17? It's the ID of "State Groups & Events" category. Let see how it works.

[Stoebi]

Thanks for this nice hack, but ... the hack is not working, if Javascript is off.

If no Javascript is activated, it should fallback to the normal behaviour. There are so much AJAX hacks around here, but all not really usable, because the most of the programmer are not thinking about Non-Javascript user.

[NsT]

Thanks for your comment. Probably in the next version I'll make it workable when Javascript is disable.

In fact, from my experience, 99% of my members use default browser settings and most of them don't know how to disable Javascript. So this mod is okay. I believe disable Javascript is only for people know pretty much about IT and for security reason, Javascript is disable

[Stoebi]

Javascript is first disabled for most of the visited sites, because I hate all the popups on many sites. If i can trust a site/forum, I'll activate javascript for this site.

For example, see your demo link without Jajvascript. Without javascript, no forums viewable.



Kind Regards,

Stoebi

[mokonzi]

I like the idea NsT!

I've installed and come across some problems.

As mentioned, if more than one category is selected for the default, it won't load. Maybe setting the system not to work off the IDs (perhaps giving them unique ones) with a seperate variable that allows you to set what categories are installed might help this problem.

I've also noticed that in IE7 when you load up a tab that has restricted access (this might apply to FF2, I'm not sure yet), for example the Admin Category areas, Moderators forums, etc, the category header loads, as if it's bypassing the check in vBulletin that allows a category to be shown or not. This isn't ideal because I'd like to be able to set a tab to show all the forums that are available, not just a select few. And at the same time not show there are restricted areas to my users, as most will never have a need to know they are there.

This also makes me wonder if it's possible to set a tab to hold the restricted access areas and have it not show up to users without the permissions to see the area.

Also, when you do set the first category to be restricted access in IE7 at least, it loads up the 'no permissions' page within the FORUMHOME template, as opposed to replacing it.

Hope this helps you in the development of a nice little mod.

[NsT]

Hello Mokonzi,

Thanks for your support. I'll spend my time on fixing that problem asap. Since I'm not a coder so I'm not really sure I can do it That's why on the Mod Settings, I set this mod to be re-usable so that other coders can develop it if they wish.

About the default category, this won't load probably because you don't have a tab for that category. It means you can only load a specific tab as default when user hit index.php. If you just enter an ID of a category, then sure that it won't load

So for example, if you have 3 tabs: Tab 1, Tab 2, Tab 3.
Tab1: href="#1|2"
Tab2: href="#3"
Tab3: href="#4"

If Tab 1 is selected for default, then the startLoad() should take Tab 1 URL: startLoad('1|2') and so on for other tabs.

[NsT]

I've just updated the code. Now there is a message for restricted forum in stead of showing the forum or showing the whole login page with header, navigation, footer, etc.



@ Mokonzi: Can you try this and give me your feedback?

[mokonzi]

I'll give it a try first thing in the morning.

Regarding the default tab, I have been setting that in the startload() section. If it has a single number in, then it loads that tab, but once it has more than one number ("1|2" for example), then it fails to load anything.

I'm thinking it doesn't like the | character.

Will post back on the new update in the morning.

[Deepdog009]

If U need TAB SETS goto .....>>>>>>>>>> Custom SeTs <<<<<<<<<< *** TAB CiTY ***