vb.org Archive - [HOW TO - vB4] Making Boxes Collapsible

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)

- - [HOW TO - vB4] Making Boxes Collapsible (https://vborg.vbsupport.ru/showthread.php?t=221565)

Quote:

Originally Posted by voglermc (Post 1975440)

I'm trying to collapse my header for smaller monitors and have a cookie set so it remembers the open or closed state like VB does in its collapse buttons.

Why setting your own cookie? If you use a unique ID this will allready be done by default. At least it does with my vB4.0.2

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}">

Now you will have a collapse/expand Button on the top right of every posting which will collapse the user informations. Now:

Collapse the users on posting #1 and #3
load another thread
you will see that #1 and #3 are still collapsed, since their ID is the same in every Thread: post_1, post_3

[Of course it would be more intelligent to collapse something else, but this way all necessary code is in the range of 3 lines :)]

--------------- Added 19 Mar 2010 at 00:13 ---------------

If you want to work via Plugin, you have to

replace {vb:raw relpath} with $relpath etc.
work via variables.
hardencode the red part, until someone tells us, how to do it the right way (:)) ($stylevar['imgdir_button'] and $vbcollapse['collapseimg_cel_dummy_img'] seem not to be accessible or are not set in certain hooks.)

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">';

An example to make replies collapsable: Create a plugin on hook showthread_postbit_create with code

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'] . '">';

    }

}

and a plugin on hook showthread_complete with code

Code:

if ($BReplyFound) {

    $postbits .='</ol></div></div><ol>';

}

--------------- Added 19 Mar 2010 at 00:27 ---------------

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">';

-> Hide Discussion -> Show Discussion

--------------- 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?

Quote:

Originally Posted by BRotondi (Post 2006019)

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?

If you refer to make the entire what's going on box collapsible, try this:

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">

Replace with:

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">

Then find:

HTML Code:

            {vb:raw template_hook.forumhome_wgo_pos5}

        </div>

    </div>

    <!-- end what's going on box -->

And replace (to close the added div above):

HTML Code:

            {vb:raw template_hook.forumhome_wgo_pos5}

        </div>

        </div>

    </div>

    <!-- end what's going on box -->

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

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.

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";}?

Brilliant, does exactly as described, perfect, thank you.

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?

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 http://projectbay.net/images/details.png-Button on the right (FireFox: Alt-Shif-i). Interesting for you?

Bruno

Not quite.Thank you though.

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
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (4)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01954 seconds Memory Usage 1,768KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (4)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (4)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: