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 cellarius (Post 1975353)

Did you try looking at it using firebug? I can manipulate positioning by modifying a.collapse img, and the javascript does not mess with positioning as far as I can tell.

No I didn't and I think I will have to. Since you was already playing with it - do you have any hints about which css style to use?

What do you mean by css style? I already told you which selector/element to look for: a.collapse img

Quote:

Originally Posted by cellarius (Post 1979472)

What do you mean by css style? I already told you which selector/element to look for: a.collapse img

I mean that I want to add style parameter to img element to override this one which is inside of a.collapse img and I was asking do you already know which css style exactly have to be overridden to keep it on it's place (like position, float) :) If you do not know - it's OK I will play with it. I just hoped that someone already know the answer and safe me some time ;)

As I said: I looked at it with firebug and the settings are just there to read. If you really want to work with vB4 styling, you really should make use of this. As a cleaner solution instead of inline styling I would recommend to give the img your own custom class and define that class in additional.css :)

Thanks for help and sorry for all those questions - I was just lazy ;) Your first information about css (a.collapse img) was enough - I just search whole vBulletin code for that and I found what I needed :)

Thanks once again :):up:

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

Quote:

Originally Posted by cellarius (Post 1975353)

Did you try looking at it using firebug? I can manipulate positioning by modifying a.collapse img, and the javascript does not mess with positioning as far as I can tell.

Strange - I'm in firebug right now. Have chosen appropriate img. But it doesn't show me that there is used a.collapse img. And when I'm going to CSS view then there is no such style at all... :confused:

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

Ok - I found solution anyway - I just went 1 level higher and play with style for a - seems working, but not tested in other browsers yet.

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

Working and tested. It is needed to ad in a with class collapse a
style attribute with value position: static; float: none;

So it goes:

Code:

<a href="#top" class="collapse" style="position: static; float: none;" id=...

Thanks, works like a charm, made a few changes to run it from a plugin, but still workds, lovely.

Does this work in vBulletin admincp?

Never tried, but I doubt it. This was reworked for vB4, and there have been no significant changes to the AdminCP, so maybe not. On a second thought, I am unable to remember having seen anything collapsible in the AdminCP before...

Quote:

Originally Posted by cellarius (Post 1872720)

The element has to have an id that needs to be unique not only on the page, but on the whole site.

Yes, big truth: the collapsible element has to have a unique id.

I was trying to make all my static-html cms widgets collapsible. The problem was that that template is for all static-html cms widgets, so when assign a unique id in

HTML Code:

<a class="collapse" id="collapse_uniqueid"....

the results were a bit crazy, as cellarius said. Obviusly, if I put a text string for the id like above ("collapse_uniqueid"), that id string will be the same for all html-static widgets the page contains; so click on a widget collapses another, collapse buttons dissapear...:(

The solution was to make use of the widget's title as the unique id:

HTML Code:

<a class="collapse" id="collapse_{vb:raw widget_title}"....

So I change the vbcms_widget_static_page template a bit:

HTML Code:

<div class="cms_widget collapse">

    <div class="block">

        <div class="cms_widget_header">

            <a class="collapse" id="collapse_{vb:raw widget_title}" style="position: static" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" border="0" /></a>

            <h3>{vb:raw widget_title}</h3>

        </div>

        <div class="cms_widget_content" id="{vb:raw widget_title}">

        {vb:raw static_html}

        </div>

    </div>

</div>

Now every html-static widget has a unique id as each of them has an only one name, and probably all my widgets will be collapsible.

And all that thanks to cellarius :up:

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 (1)bbcode_code_printable (3)bbcode_html_printable (4)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.01113 seconds Memory Usage 1,748KB 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 (1)bbcode_code_printable (3)bbcode_html_printable (4)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: