The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
[HOW TO - vB4] Making Boxes Collapsible
Start: OK, here's a small guide how to make a boxes/layers collapsible. Let's say, you have a simple div-container you want to make collapsible. The css ids and classes assigned to the elements are completely arbitrary. Code:
<div id="test" class="anything"> <h2 class="blockhead"> <span>Collapse it!</span> </h2> <div class="blockrow"> <p>Let's add a button to collapse this box :-)</p> </div> </div> Step 1: Adding "collapse"-class to surrounding container Code:
<div id="test" class="anything collapse"> Step 2: Adding id to what we want to hide As a second step we have to add an unique id to the element that contains what we want to dissapear. Note: This element can be almost any html-tag that can be hidden (div, ul, ol, p, a - you get the idea). Note also: The element has to have an id that needs to be unique not only on the page, but on the whole site. So make sure you use some unique prefix, suffix or something like that (marked in blue). Code:
<div class="blockrow" id="cel_dummy"> Step 3: Adding collapse-button Inside the header add the code for the collapse-button. You'll have to adapt it according to the id you assigned in step 2 (adaptions needed marked in blue). Make sure the part you add inside the image name variable is not the exact same as the id you added to the container that you want to hide. If you add the exact same, the button will vanish under certain circumstances, too: Code:
<a class="collapse" id="collapse_cel_dummy" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a> Result: In the end, the code will look like that: Code:
<div id="test" class="block collapse"> <h2 class="blockhead"> <span>Collapse it!</span> <a class="collapse" id="collapse_cel_dummy" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a> </h2> <div class="blockrow" id="cel_dummy"> <p>Let's add a button to collapse this box :-)</p> </div> </div> Collapsed as default? Yes, but... There is a way default the box to be collapsed by default. But this it's quick and dirty, and really not recommended to use. Basically, you have to add display:none to the style of the collapsing container, like so: Code:
<div class="blockrow" id="cel_dummy" style="display: none;">
Collapse more than one box at a time? Yes, but... Now, functionally this is perfectly possible - just use the same id for every element you want to collapse together. But beware: for valid code you can't use duplicate ids on a page. So if you do that, your code will break xhtml validation! I hope this will be useful for some of you! -c Please note that this article has been written first for alpha 1 version and been updated for beta 3. There still may be changes until gold. For example the button used is clearly marked as beta (_40b in the file name). |
#32
|
|||
|
|||
Quote:
And a big thanks for this tutorial!! Bruno --------------- Added 18 Mar 2010 at 21:50 --------------- Perhaps this little example is a good starting point, also to see how IDs and remembering the state in the cookie works: Open postbit_legacy and add the red code: Code:
<div class="postdetails collapse"> <a class="collapse" id="collapse_post_{vb:raw post.postcount}" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a> <div class="userinfo" id="post_{vb:raw post.postcount}">
--------------- Added 19 Mar 2010 at 00:13 --------------- If you want to work via Plugin, you have to
Code:
$exampleVar = '<div class="postdetails collapse"><a class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top"><img src="' . 'images/buttons' . '/collapse' . '' . '_40b.png" alt="' . $vbphrase['collapse_this_category'] . '" /></a><div class="userinfo" id="collapsereplies">'; Code:
//B Replies collapsable //first post? if ($post['postcount'] == 1) { $BThreadPage1 = true; $BReplyFound = false; $BThreadOwner = $post['userid']; //page 1 of Thread? } elseif ($BThreadPage1) { //first reply allready found? if ($BReplyFound) { } //is this the first reply? elseif ($post['userid'] != $BThreadOwner) { $BReplyFound = true; //Debug echo "OPEN:" . $post['postcount'] . "|"; $postbits .='</ol>' . '<div class="postdetails collapse">' . ' <a style="float:left; position:static;" class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top">Diskussion ein/ausblenden<img src="images/buttons/collapse_40b.png" alt="Diskussion ein/ausblenden" /></a>' . ' <div class="userinfo" id="collapsereplies">' . ' <ol id="posts" class="posts" start="' . $post['postcount'] . '">'; } } Code:
if ($BReplyFound) { $postbits .='</ol></div></div><ol>'; } One thing I don't know but isn't important yet: When using a text instead of the icon only. How can I change the text so it says whether the box is collapsed or not? Code:
<a class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top">Hide/Show Discussion<img src="images/buttons/collapse_40b.png" alt="Discussion on/off" /></a><div class="userinfo" id="collapsereplies">';
--------------- Added 19 Mar 2010 at 00:58 --------------- Question: One I could use right now: Is there a way to collapse all User Infos at once, so there isn't even a white space? |
#33
|
||||
|
||||
Quote:
Forumhome template, find: HTML Code:
<!-- what's going on box --> <div id="wgo" class="collapse wgo_block"> <h2> <span>{vb:rawphrase whats_going_on}</span> </h2> <div class="floatcontainer"> HTML Code:
<!-- what's going on box --> <div id="wgo" class="collapse wgo_block"> <h2> <a class="collapse" id="collapse_wgobox" style="position:static;margin-right:5px;margin-top:5px;" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" border="0" /></a> <span>{vb:rawphrase whats_going_on}</span> </h2> <div class="collapse" id="wgobox"> <div class="floatcontainer" id="collapse_wgobox"> HTML Code:
{vb:raw template_hook.forumhome_wgo_pos5} </div> </div> <!-- end what's going on box --> HTML Code:
{vb:raw template_hook.forumhome_wgo_pos5} </div> </div> </div> <!-- end what's going on box --> |
#34
|
|||
|
|||
Modified also this, works fine . Thanks!
But what I want, is to collapse multiple containers at once, e.g. the userinfo (see attachment 1 -> 2 How could this be done? (I want to get attachment 3 at a final stage, but first 2 to understand the basics. 3 needs more changes) Thanks! Bruno |
#35
|
||||
|
||||
Oh... I see what you want, but I guess that you really want is more fun!!!
I said that because I think that sometimes, in terms of efficiency simple ways are better. So maybe at this point I would start considering to use the postbit look instead of the legacy_postbit, or a hack that gives your users a chance to switch between them. After all, the main purpose of postbit is precisely to give more horizontal space to that area, and there it is. |
#36
|
|||
|
|||
Thanks for your thoughts, but the reason is, to really hide user informations.
I'm trying different things to make a wiki obsolete. Or better said: To have wiki articles inside the forum, in the same data tables. It was easy to create a wiki user (everyone can edit it and see his history, including who changed what) and make discussions disappear (Thanks to this thread: Collapse the postings after the first). Next step: Forget about the user, as common in wikis. Implementation: Isn't it possible with vBs own scripts: Read value from Cookie and set/unset .postbitlegacy .userinfo {display="none";}? |
#37
|
|||
|
|||
Brilliant, does exactly as described, perfect, thank you.
|
#38
|
||||
|
||||
Been playing around with this and am stuck. What i want to do is have the userinfo in postbit_legacy collapsible by userid rather than which post in a thread (like described in this post). So I could hide a certain user's info and it would stick throughout the forum regardless of where they post.
That make sense? |
#39
|
|||
|
|||
I realized something similar for "collapse all user info and other details", could surely be changed to "collapse info of users by id".
Look at ProjectBay.net > Thread and press the -Button on the right (FireFox: Alt-Shif-i). Interesting for you? Bruno |
#40
|
||||
|
||||
Not quite.Thank you though.
|
#41
|
|||
|
|||
So what you want is something similar to the "Invisible User", which seems, as it has been sent to "ignore user" from every one?
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|