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

[sdfaheem]

The demo link isn't working dude!

[NsT]

well, someone DDOS my site and the server is down now

[dieselpowered]

We are running the AJAX version of bobster65's tab mod...maybe instead of creating a new mod that does the same thing, you two can work together???

[mokonzi]

NsT, I've tried the changes, and so far no difference from before. It's not loading the restricted access section at all, doing the same as last night (tested in IE7).

I noticed you've labeled the section between <!-- main --> and <!-- /main --> as updated. The coding is exactly the same as it was before. I can't see how it's pulling in the updated info if there's a log in clash.

xtremeoff-road has a good suggestion there as the two of you working together might be able to smooth out the bumps in the road, so to speak.

If this could be set as proper product then it would make the install process a lot easier.

I'm happy to help with the development testing as much as I can.

[NsT]

@ xtremeoff-road: Oh bobster65's tab mod is not yet Ajax. It loads all tabs initially and show tab's contents when you click. Also this can not update new posts on all tabs.

The reason I build mine is because I don't want to load all tabs at the begining and I want it to be able to update new posts. Bobster65's PM me yesterday and he was not happy with my mod as he considered me stealing his original idea :| I renamed the mod so that it will be different with Bobster65's mod. Well, I don't want to argue, don't want to fight, probably I will ask Moderator to delete this mod!

Mokonzi, well, it's weird because as you can see from my sceenshot on the post above, restricted forum requires login.

Can you tell me what kind of yours restricted forum? I mean what permission require to access that forum? I will try to setup a forum like yours and test

P.s: my server is not yet up, still down, it was attacked by DDoS just after I posted the mod here, what a coincidence

[mokonzi]

xtremeoff-road might mean he's got an advanced beta version of the tabs, bobster has mentioned something in his thread about beta testing it.

I'll explain the areas I have restricted access.

Some categories are for forums that are under development. They are related to a project that isn't yet public, so they shouldn't be displayed as the forum is set to not be displayed on the index page.

Then we have an admin section, where the access is restricted to certain usergroups, moderators, admins, etc.

So in theory the other usergroups shouldn't even see the category heading.

Edit:

I realised that you changed the file download name, and so I'd uploaded the wrong file.

Now it restricts access for every forum in that section if the first forum is unauthorized.

Suggestions:

• Have it so a tab doesn't show if it's setup as restricted (perhaps have a 'restrictions' variable)
• Check the permissions or visibility of a category before it is displayed
• Use a phrase manager variable for the names of the tabs

[NsT]

Oh ok I see, I didn't read the whole thread of Bobster65's mod.

But from my forum, I have these results:

Category 1
--- Forum 1
--- Forum 2 (restricted forum, only Admin and Mode can see)
--- Forum 3

Category 2 (restricted category, guest can not view)
--- Forum 4
--- Forum 5
--- Forum 6

And it works fine on my mode. I and my moderators can see Forum 2 but member can not see it, they only see Forum 1 & 3 when clicking on the tab of Category 1.

Guests when clicking on tab of Category 2, a login page appears.

Anyway, as soon as my forum is up, I'll test and let you know the more results.

[mokonzi]

Ok, I'll illustrate my forums structure, as it's similar but not identical to yours:

• Tab 1
  • Category 1
    • Forum 1
    • Forum 2 <-- Only Admins and Mods can see
    • Forum 3
  • Category 2 <-- Only Admins and Mods can see
    • Forum 4
    • Forum 5
• Tab 2 <-- Only Admins and Mods can see
  • Category 3
    • Forum 6
    • Forum 7

Tab 1 is a mix, some of which are category based restrictions. Atm the code shows the category header (wrongly cos vB wouldn't do as standard), but rightly doesn't show the forums.

Tab 2 is ideally Admin only, and it'd be nice to allow that only to be visible to admins.

I hope that makes some sort of sense.

[dieselpowered]

Yes I have the BETA ajax version of his hack

[NsT]

Really? How's it compare to this mod? Since I'm not a coder I think I can't work with Bobster65. I just know a little bit about PHP and Javascript Not good enough to release a product.