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

Page 2 of 2

Show 40 post(s) from this thread on one page

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)

mandingo

06-21-2010 03:55 PM

I want to be able to see the username and avatar but have an expand/collapse switch for the rest of the details (postcount,location,thanks etc) per user.

BRotondi

06-21-2010 05:52 PM

I see. So first try my Example on #31. If this works, you will have learned all you need to do what you want.

mandingo

06-21-2010 11:04 PM

I did try that but it only works for the particular post in a thread,not by the user, which is what I'm looking for.

BRotondi

06-22-2010 05:24 AM

Of course :). But now you should need only little skill to change the necessary:
{vb:raw post.postcount} -> {vb:raw user.userid} (or similar) and search for / add the div you want to collapse.

mandingo

06-22-2010 06:08 PM

Quote:

Originally Posted by BRotondi (Post 2057288)

Of course :). But now you should need only little skill to change the necessary:
{vb:raw post.postcount} -> {vb:raw user.userid} (or similar) and search for / add the div you want to collapse.

!! thanks for steering me in the direction I needed! I bet it'l work.
stay tuned.

--------------- Added [DATE]1277275585[/DATE] at [TIME]1277275585[/TIME] ---------------

ugh, can't seem to get it. :(

BRotondi

06-23-2010 11:14 AM

Can you Post your TMS-xml? I will see how I can help you.

mandingo

06-25-2010 05:01 PM

what is TMS-xms?

zackcez

06-25-2010 05:36 PM

So I take it as this won't work on vb 3.8?

BRotondi

06-25-2010 07:01 PM

Quote:

Originally Posted by mandingo (Post 2059469)

what is TMS-xms?

If you don't know TMS (german version), this may take longer... TMS is the most intelligent Extension for vB-Modders ever. You can spezify "Search for xxx" in Template "yyy" and replace/add_before/add_after "zzz".

Then you export all these instructions as xml, so I can continue your work without any delay / manual work.

It will be the best you ever learned, since you

will never have to edit again a Template by hand
will always have an overview of all your modifications
and even you can export your modifications as text-instructions: "Search for xxx in yyy and replace/add_* by zzz
...

:) ... sorry for spamming, but really the most fascinating thing I ever learned during my two years of vBulletin.

cellarius

06-25-2010 07:09 PM

To avoid confusion: You export as xml.

--------------- Added 25 Jun 2010 at 22:09 ---------------

Quote:

Originally Posted by zackcez (Post 2059491)

So I take it as this won't work on vb 3.8?

No, but IIRC there is an article on pagination for vB3 in the relevant articles section.

BRotondi

06-25-2010 07:18 PM

Quote:

Originally Posted by cellarius (Post 2059521)

To avoid confusion: You export as xml.

Oups... :) Thanks for the hint! (repaired)

Another Question: Is there a simple way to make a div collapsed by default?

cellarius

06-25-2010 08:06 PM

Quote:

Originally Posted by BRotondi (Post 2059527)

Another Question: Is there a simple way to make a div collapsed by default?

You may want to read the article ;)

BRotondi

06-25-2010 09:07 PM

Oups... Sorry... I should have asked "Did anyone found a non-dirty quick solution?" (but anyway the answer will be "no", since it would be written in the article...)

cellarius

06-26-2010 08:38 AM

Quote:

Originally Posted by BRotondi (Post 2059570)

(but anyway the answer will be "no", since it would be written in the article...)

at least if I knew of it ;)

BRotondi

06-26-2010 11:43 AM

O.K. here an example with an own script: When registering, "Additional Infos" will be collapsed:

Replace in Template register

Code:

<h3 class="blocksubhead">{vb:rawphrase additional_information}</h3>

with

Code:

<script type="text/javascript">

    function RegistryDetailsOn (setcookie) {

        $("#registry_details").css({ "display": "" });

        $("#registry_details_link").css({ "background": "url('images/buttons/collapse_40b.png') no-repeat scroll 0 0 transparent","padding-left": "17px"});



        _set_cookie('RegistryDetails_visible', 1, setcookie);

    }

    function RegistryDetailsOff (setcookie) {

        $("#registry_details").css({ "display": "none" });

        $("#registry_details_link").css({ "background": "url('images/buttons/collapse_40b_collapsed.png') no-repeat scroll 0 0 transparent","padding-left": "17px" });

    

        _set_cookie('RegistryDetails_visible', 0, setcookie);

    }

    function RegistryDetailsInit () {

        t = fetch_cookie('RegistryDetails_visible');

        if (t=="1") {

            RegistryDetailsOn(0);

        } else {

            RegistryDetailsOff(0);

        }

    }

    function RegistryDetailsSwitch () {

        if ($("#registry_details").css("display") == "none") {

            RegistryDetailsOn();

        } else {

            RegistryDetailsOff();

        }

    }

    function _set_cookie(variable, wert, setzen) {

        if (!(setzen==0)) {

            set_cookie(variable, wert);

        }

    }

    $(document).ready(function(){

        RegistryDetailsInit();

    });

</script>



<h3 class="blocksubhead"><a href="javascript:RegistryDetailsSwitch()" id="registry_details_link">{vb:rawphrase additional_information}</a></h3>

<div id="registry_details">

and

Code:

            {vb:raw customfields_other}

        </div>

with

Code:

            {vb:raw customfields_other}

        </div>

        </div>

This Solution uses jQuery and the vB-Cookie-Routines. The Script could be reduced to one switch-line, but this way you have all possibilities for more extended issues.

Regards, Bruno

emath

10-26-2010 01:26 PM

how do i combine it within a table?

like, i dont want to use div, to insert the classes and everything to the <table class=..

cellarius

10-26-2010 06:14 PM

Wrap a div around your table.

dtorreci

11-23-2010 06:18 PM

Hi all,

just a quick question I would like to make my postbit fields collapsable, I have follow the steps provided at page 1 and well it works but only with first post how should I proceed to make it work with all post ?

TIA

cellarius

11-23-2010 06:45 PM

You would have to add something unique to the collapsing id (cel_dummy in the example). You coud try the postid (cel_dummy_{vb:raw post.postid}).

MyLibary

07-15-2011 07:12 PM

how do i add id for blocks in vbCMS 4.1.4?, they dont have any id..

cellarius

07-16-2011 10:40 AM

Then you need to find a way to add one. Likely in the template used by whatever you want to collapse.

Bandit8007

07-30-2011 09:10 AM

hmm im totatlly confused now.....
did try to collapse the wgo in forumhome template
but failed big time...
dunno what i did wrong...

cellarius

07-30-2011 10:02 AM

I don't know either.

radiofranky

08-02-2011 08:20 PM

Hi,
I was wondering if someone could explain how the collapsible box works when clicked to the box background it expands? Something like in slickdeals.net, when someone clicks the background, it expands.

thanks

cellarius

08-02-2011 08:44 PM

vB's collapse method does not allow for this, so this is not for this tutorial, really. You should open your own thread in an appropriate forum. Anyway, you'd have to fire the javascript on the click event of the background, not a link, generally speaking. But a tutorial on how to do that is really too much for this topic.

radiofranky

08-03-2011 04:13 PM

thanks. I was wondering if there is a tutorial that shows how to store variables to DB during the post new thread session. And also how to retrieve those data from DB and render to a template.

cellarius

08-04-2011 08:10 AM

Quote:

Originally Posted by radiofranky (Post 2228793)

thanks. I was wondering if there is a tutorial that shows how to store variables to DB during the post new thread session. And also how to retrieve those data from DB and render to a template.

Sorry, bit that really has nothing to do with this tutorial at all. This is about collapsing boxes using the vB provided method, nothing else.

Chavi

12-30-2011 03:22 PM

Thanks for the guide. I thought I'll share something:
I had to find a way to collapse more than one element at the same time. Tried using the same ID for every element as you suggest but without luck - only the first one collapses. At the end I've added an empty collapse-triggering <A> tags for every additional element I need collapsed and chained their click events like this:

<a class="collapse" id="collapse_elem1" href="{vb:raw relpath}#top" onClick="document.getElementById('collapse_elem2') .click();"><img ...... /></a>
<a class="collapse" id="collapse_elem2" href="{vb:raw relpath}#top" onClick="document.getElementById('collapse_elem3') .click();"></a>
<a class="collapse" id="collapse_elem3" href="{vb:raw relpath}#top"></a>

Only the first <A> tag has the changing button image, the others are empty.
This way I was able to collapse the elements with IDs "elem1", "elem2" and "elem3" simultaneously.
Its not very elegant but does the trick ;)

BRotondi

12-30-2011 04:02 PM

Nice workaround :) thanks for sharing!

lilgezuz

01-11-2012 03:50 AM

I tried to use this in a bbcode but its not converting {vb:raw relpath} to the correct path. it just leave it as %7bvb:raw relpath %7d any ideas on how to make it work in a bbcode?

cellarius

01-11-2012 07:28 AM

You need to enter the correct path manually. The variable is a template variable and is not in scope for bbcode.

lilgezuz

01-11-2012 03:48 PM

Quote:

Originally Posted by cellarius (Post 2286422)

You need to enter the correct path manually. The variable is a template variable and is not in scope for bbcode.

I see, don't think I can do it then because the path will be changing everytime depending on what page you use it on. Since it would be a bbcode It could be used in post.

Do you think it would work if I was to use your php in BBcode mod

cellarius

01-12-2012 11:49 AM

Yes, I think this should be possible with that mod.

tbworld

03-04-2012 06:58 PM

Thank you so much for taking the time to write this. I was working on figuring this out when I decided to search vbulletin.org to see if I could gain any insight.

Thanks again! I'm a big fan of your apps too!

Daniel

06-25-2015 09:09 AM

Is there a way to remember the choices? Each time I collapse a box and refresh the page, the box reverts to the original style.

Thanks

All times are GMT. The time now is 10:57 AM.

Page 2 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01430 seconds Memory Usage 1,815KB 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 (4)bbcode_code_printable (8)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (35)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: