The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
How To Create Collapsable Boxes
peterska2
Join Date: Oct 2003
Posts: 6,504
Manchester, UK
06-28-2006, 10:00 PM
This tutorial explains how to create collapsable boxes throughout vBulletin. For the purpose of this tutorial, I will explain how the first part of the 'What's Going On' box is structured (ie WOL on forumhome) and how you can use this technique to create stand alone collapsable boxes or add sections to additional boxes (eg Forum Statistics as part of the What's Going On box) Part One: Decipering the What's Going On box In your forumhome template, the following code exists by default: Code:
<!-- 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_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].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>
Firstly, you will notice that the code starts with a table row, the same as any other table anywhere in vBulletin. This is essential. However, before the Code:
<tr> Code:
<thead> All the code until Code:
</thead> Next we have the condition for the content section to show. For the purposes of this tutorial, the conditional is being disregarded. This is then followed by the following code: Code:
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].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>
First there is the Code:
<tbody> Code:
<tr> Code:
<td> The next section is essential Code:
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
Probably the most important section of this code, and the bit that is the cause for most problems are the labels Code:
forumhome_activeusers Code:
collapseimg_forumhome_activeusers Code:
collapseimg_ When you are creating a new collapsable box, you need to give it a name. The length of the name is not important, as long as you ensure that every time it is used, it is identical. In the example used for this tutorial (the WOL on forumhome) the name used is Code:
forumhome_activeusers Some examples of names for collapsable boxes are:
The next section is Code:
<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>
The next line is Code:
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]"> Code:
collapseobj_forumhome_activeusers This line controls the collapsing of the box by identifying it, and setting the style of the box to match that of the image used earlier. (ie when collapsed the image shows a + and when expanded the image shows a - ) To have the box collapsed by default, you should use Code:
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]; display:none"> Finally, we have the content for the collapsable row, followed by the closure tag Code:
</tbody> Code:
</table> Part Two: Creating Standalone Collapsable Boxes Creating a standalone collapsable box (eg the one used for topXstats) is very straightforward. Literally, it involves following all the steps layed out in part one, using the same code and making adjustments as highlighted for the box name and setting the title and content to your requirements. Using the Code:
<thead> Part Three: Adding To Existing Tables You can add a collapsable section to any existing table. You simply use the steps laid out in part one, but omit the table and thead sections. You can place your collapsable section anywhere in a table, providing it is located in the center of the following code Code:
</tr> <tr> Code:
<tbody> You can also add collapsable sections right at the beginning of a table by adding the code immediately after the table tag, or at the end of the table by adding the code directly above the end table tag. An example of a modification that uses this technique is the Who Has Visited Today modification. Part Four: Multiple Items Collapsing With One Control Using the Whats Going On box as a primary example, what if you didn't want everything to be seperate, but rather all collapse apart from the statistics if you click a collapse icon? This is very easy to do, and you simply use the same name for each section that you wish to have collapsed by the one icon. In this case, that would be the WOL section, upcoming events and birthdays. Statistics would retain it's own name otherwise that two would collapse with the rest. I hope that you find this useful, and if you have any questions, please feel free to ask. 
|
|
#6
07-03-2006, 04:12 PM
|
||||
|
||||
Nice job peterska2! I just love collapsible tables, i try to use em anywhere i can to make the best use of space, etc... I recently posted a how-to for developers on including them in the admincp for new hacks, etc... It can be seen at https://vborg.vbsupport.ru/showthread.php?t=118696 if anyone's interested.
|
|
#7
07-22-2006, 12:40 PM
|
|||
|
|||
|
What code would I insert into the what's going on table to make it collapsible? I got rather lost there.
|
|
#9
07-22-2006, 05:03 PM
|
|||
|
|||
|
Done.
Thanks. Actually I did it and got a bunch of weird errors! And it was collapsing different boxes, it was a mess. I still don't fully understand where to put it...
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 03:54 AM.