vb.org Archive - Collapsing

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

- vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)

- - Collapsing (https://vborg.vbsupport.ru/showthread.php?t=88634)

MindTrix

03-13-2004 10:54 AM

Collapsing

I've searched this site, vb.com and vb.org and drew a blank.

Can someone give me proper instructions about how to make a table that can collapse and expand? Cheers :)

Tony G

03-13-2004 09:08 PM

I *think* it involes hacking if you want to make a certain table collapse and expand.

MindTrix

03-13-2004 09:10 PM

Just want the collapsin that comes as standard on all tables in vB3 :p

Koutaru

07-27-2004 02:32 AM

Anyone have a clue in this ^^; ? I'm trying to make something collapse but the templates aren't doing it. I've installed hacks that done this without code changes. Very odd.

Natch

07-27-2004 01:44 PM

OK...

You basically need to have your content in a wrapper that will be the visible part when the content is collapsed, and add an id="uniquename" to your content...

Template (this will give you an idea):

HTML Code:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

        <tr>

                <td class="tcat" style="$stylevar[left]">

                        <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('uniquenamehere')"><img id="collapseimg_uniquenamehere" src="$stylevar[imgdir_button]/collapse_tcat$collapseimg_uniquenamehere.gif" alt="" border="0" /></a>

                        <span class="smallfont">Title Here</strong></span>

                </td>

        </tr>

</thead>

<tbody id="collapseobj_uniquenamehere" style="$collapseobj_uniquenamehere">

        <tr>

                <td class="$getbgrow">



INSERT ALL YOUR CONTENT HERE



                </td>

        </tr>

</tbody>

</table>

<br />

The "trick" is in the "uniquenamehere" value (occurs 5 times!) you will change for each collapsible box - this needs to be different across your entire site, as the functions will store a cookie with this unique value and refer to that to get the collapsed / expanded state of your block of code...

If this is not clear enuff, please let me know ...

Koutaru

07-28-2004 03:05 AM

Hmm I tried that but it still wouldn't collapse right, like if you click on the button, it will disappear but not collapse :/ Very very odd. Let me check it out again I suppose

Fairclough

07-29-2004 09:47 AM

It worked for me.

Thanks for that. :D

Code Monkey

08-24-2004 05:06 AM

This was a great help.

But I don't understand this in tbody

style="$collapseobj_uniquenamehere"

Where is that variable set?

Also, how do you get the cookie set to remember if the table is collapsed or not?

Natch

08-25-2004 02:47 AM

the cookie should be updated with your extra blocks by the javascript that handles it ...

evil kev

09-26-2004 12:52 PM

i too have been trying to make the collapsible menu's and have managed to make them work but not save in the cookies. i don't know what i'm doing wrong but it's really annoying.

does anyone know what the critera is to make the information be saved correctly in the cookies are variables defined somewhere? its really bugging me because a chunk of the redesign of my site relies on having things saved hideable hmm?

HRM Web Service

12-13-2005 04:44 PM

I would also like to know how to get the cookie file to remember my custom collapses etc.

I can get any thing to collapse just fine.. but when I refresh it goes back to its default state.

Can someone help please.

noppid

12-13-2005 05:11 PM

Quote:

Originally Posted by HRM Web Service

Post your table code.

HRM Web Service

12-13-2005 06:04 PM

That's the block below. I know that only part of it is relevant but I figured it's better all than not.

The functional portion can be seen here ("Icon Meanings" at the bottom of the screen):
http://eservices.halifax.ca/forum2/index.php

HTML Code:

<div align="center">

<table width="100%"  border="0" class="tborder" cellpadding="5" cellspacing="1" >

<!-- Added the following for collapsible menus -->

<tbody>

        <tr>

                <td class="tcat" align="left" colspan="3">

                        <a style="float:$stylevar[right]" href="#top" onClick="return toggle_collapse('iconLegend')"><img id="collapseimg_iconLegend" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_iconLegend}.gif" alt="" border="0" /></a>

                        <a href="#top" onClick="return toggle_collapse('iconLegend')">Icon Meanings</a>

                </td>

        </tr>

</tbody>

<tbody id="collapseobj_iconLegend">

   <tr class="alt1">

      <td align="center" valign="middle"><table width="100%"  border="0" cellpadding="1" cellspacing="0">

         <tr class="alt1">

            <td bgcolor="#FFFFFF" align="center" valign="middle"><table width="100%"  border="0" cellpadding="4" cellspacing="1">

                  <tr class="alt1">

                    <td class="custom_alt2" align="center" valign="middle">



<img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>

                        <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_new_posts]</td>



                        <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>

                        <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>



                        <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_new_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>

                        <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_is_closed_for_posting]



                    </td>

                  </tr>

              </table></td>

         </tr>

      </table></td>

   </tr>

  </tbody>

  </table>

</div>

Thanks for the help :)

Incase you're wondering....

It works fine other than the fact that it doesn't recall whether or not it was collapsed. i.e. the cookies are not being set correctly.

Being able to customize collapsing menus is very important to the layout I wish to achieve.

G

noppid

12-13-2005 07:58 PM

Your table is out of balance. Two opens, three closes and the tbody tag not nested properly.

I did this quickly, but it may work. I did not check the collapse code, just the table code.

HTML Code:

<div align="center">

<table width="100%"  border="0" class="tborder" cellpadding="5" cellspacing="1" >

<!-- Added the following for collapsible menus -->

        <tbody>

        <tr>

                <td class="tcat" align="left" colspan="3">

                        <a style="float:$stylevar[right]" href="#top" onClick="return toggle_collapse('iconLegend')"><img id="collapseimg_iconLegend" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_iconLegend}.gif" alt="" border="0" /></a>

                        <a href="#top" onClick="return toggle_collapse('iconLegend')">Icon Meanings</a>

                </td>

        </tr>

        </tbody>

        <tbody id="collapseobj_iconLegend">

        <tr class="alt1">

    <td align="center" valign="middle">

                <table width="100%"  border="0" cellpadding="1" cellspacing="0">

         <tr class="alt1">

            <td bgcolor="#FFFFFF" align="center" valign="middle"><table width="100%"  border="0" cellpadding="4" cellspacing="1">

         <tr class="alt1">

                <td class="custom_alt2" align="center" valign="middle">



                                        <img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" />

                                </td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_new_posts]

                                </td>



                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" />

                                </td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_no_new_posts]

                                </td>



                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_new_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" />

                                </td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_is_closed_for_posting]

                </td>

         </tr>

       </table>

         </td>

     </tr>

         </tbody>

</table>

</div>

HRM Web Service

12-14-2005 10:41 AM

Hey,

Thanks for reviewing the code Noppid.

I have checked the code I posted using DW8 (Dreamweaver 8). I see no problem with the tags. They are all XHTML compliant and there are equal number of open and close tags for everything in the right locations.

The code you posted however has errors in as you described. Specifically the section below:

HTML Code:

                <table width="100%"  border="0" cellpadding="1" cellspacing="0">

         <tr class="alt1">

            <td bgcolor="#FFFFFF" align="center" valign="middle">

                        

                        <table width="100%"  border="0" cellpadding="4" cellspacing="1">

                         <tr class="alt1">

                <td class="custom_alt2" align="center" valign="middle"><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_new_posts]</td>

                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>

                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_new_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>

                         </tr>

                    </table>

         </td>

     </tr>

         </tbody>

Any other suggestions? The problem is not the code (well it could be the collapsing code - but it appreas fine). Just wondering why cookie or caching isn't taking place.

utw-Mephisto

12-14-2005 10:47 AM

There is an official tutorial on vb.com

http://www.vbulletin.com/forum/showthread.php?t=127499

Should apply to almost every version ..

noppid

12-14-2005 01:58 PM

Quote:

Originally Posted by HRM Web Service

HTML Code:

                <table width="100%"  border="0" cellpadding="1" cellspacing="0">

         <tr class="alt1">

            <td bgcolor="#FFFFFF" align="center" valign="middle">

                        

                        <table width="100%"  border="0" cellpadding="4" cellspacing="1">

                         <tr class="alt1">

                <td class="custom_alt2" align="center" valign="middle"><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_new_posts]</td>

                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>

                                <td class="custom_alt2" align="center"><img src="$stylevar[imgdir_statusicon]/forum_new_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>

                                <td class="smallfont" bgcolor="#F6F8FA" align="left">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>

                         </tr>

                    </table>

         </td>

     </tr>

         </tbody>

Any other suggestions? The problem is not the code (well it could be the collapsing code - but it appreas fine). Just wondering why cookie or caching isn't taking place.

Yep, I missed one. Sorry. :o

To get your cookies to work, change the second <tbody> to....

HTML Code:

<tbody id="collapseobj_iconLegend" style="$vbcollapse[collapseobj_iconLegend]">

You left out the style.

HRM Web Service

12-15-2005 11:02 AM

Wow. That easy eh!! lol

I guess sometimes you just miss something so simple you think nothing of it!

Thanks a lot Noppid!

And thanks utw-Mephisto for the link!

All times are GMT. The time now is 04:49 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01357 seconds Memory Usage 1,838KB 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 (6)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (18)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 bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: