Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Collapsible Board Statistics [SOLVED]
#
Link: Skyrim: Dawnfire

Is it possible to collapse the Board Statistics with the HTML templates? I'm still struggling a bit with learning them, and can't find anything via online searches.

I think it would involve this line in the default template:

CODE
<div class="maintitle"><span class='bstats-text'>Board Statistics</span></div>


being edited like those in the category line, somehow.

CODE
<div class='maintitle<!-- |collapsed_class| -->' align='left'>
<span style='float:right;'><a href='#' onclick='catcollapse("<!-- |cat_id| -->");return false;' id='main_<!-- |cat_id| -->'><!-- |collapse_img| --></a>&nbsp;&nbsp;</span>
<{CAT_IMG}><a href="index.php?c=<!-- |cat_id| -->"><!-- |cat_name| --></a></div>


But I'm not sure if this needs to be a part of it at all.

CODE
<div id='cat_<!-- |cat_id| -->' style="<!-- |collapsed_style| -->">
PM
#
I don't know if you'd be able to leverage the category collapse functionality for this without doing a fair amount of needlessly complex adjustment. You can, however, use just regular markup and CSS to collapse it at will by using hidden checkboxes and labels. If you're using the stock stats template, this will work off the get-go - otherwise you'll need to merge the input and label into your template.

CODE
<style>#bstatcheck:checked + table, #bstatcheck {
   display: none;
}
</style><div id='quick-login'>
 <!-- |quick_login| -->
</div>
   <br />
<!-- |toplinks| -->
   <br />
<div class="tableborder" id="boardstats">
 <div class="maintitle"><span class='bstats-text'>Board Statistics</span><span style='float:right;'><label for="bstatcheck" class="bstatcheck1">Collapse/Expand</label></span></div>
 <input type="checkbox" id="bstatcheck" autocomplete="yes">
 <table cellpadding='4' cellspacing='1' border='0' width='100%'>        <tr>
          <td class='pformstrip' colspan='2'> <!-- |total_users| --> user(s) active in the past 60 minutes</td>
    </tr>
    <tr>
         <td width="5%" class='row2'><{F_ACTIVE}></td>
         <td class='row4' width='95%'>
  <span id='activeusers-stats'><b><!-- |total_guests| --></b> guests, <b><!-- |total_mems| --></b> members, <b><!-- |total_anons| --></b> anonymous members</span>
    <div class='thin'> <!-- |online_list| --></div>
           <span id='activeusers-links'>Show detailed by: <a href='index.php?act=Online&amp;CODE=listall&amp;sort_key=click'>Last Click</a>, <a href='index.php?act=Online&amp;CODE=listall&amp;sort_key=name&amp;sort_order=asc&amp;show_mem=reg'>Member Name</a></span>
         </td>
       </tr>
         <tr>
          <td class='pformstrip' colspan='2'>Today's Birthdays</td>
    </tr>
    <tr>
         <td class='row2' width='5%' valign='middle'><{F_ACTIVE}></div></td>
         <td class='row4' width='95%'><b> <!-- |birthdays| --></b> members are celebrating their birthday today<br /> <!-- |birthdays_list| --></td>
       </tr>     <tr>
      <td class='pformstrip' colspan='2'>Board Statistics</td>
    </tr>
    <tr>
   <td class='row2' width='5%' valign='middle'><{F_STATS}></td>
   <td class='row4' width="95%" align='left'>Our members have made a total of <b><script>document.write(<!-- |total_posts| -->-forum_posts[4]);</script></b> posts<br />We have <b><!-- |total_mem_reg| --></b> registered members<br />The newest member is <b><!-- |newest_member| --></b><br />Most users ever online was <b> <!-- |most_online| --></b> on <b> <!-- |most_online_date| --></b></td>
    </tr> <tr>
 <td class='pformstrip' colspan='2'>Members Online Today:  <!-- |online_today| --> <span id='mot_explink' style='display:none'>[<a href='javascript:expand_mot()'>Expand</a>]</span><span id='mot_collink' style='display:inline'>[<a href='javascript:collapse_mot()'>Collapse</a>]</span></td>
</tr>
<tr id='mot' style='display:inline-compact'>
 <td class='row2' width='5%' valign='middle'><{F_STATS}></td>
 <td class='row4' width='95%'><span id='activeusers-mostevertxt'>Most members ever online in one day was <b><!-- |most_online_oneday| --></b>, last accomplished on <b><!-- |most_online_oneday_date| --></b></span><br /><br /><span id='activeusers-followingtxt'>The following members have visited today:</span><br />
<!-- |online_today_list| -->
</td>
</tr>         </table>
 </div>


You can also very easily add in a secondary label for the input to make it say 'collapse' or 'expand' or what have you, based on the state of the checkbox. Plus, since it's all CSS, you can use whatever transitions you'd like - fading out, smoothly collapsing, zipping off somewhere, etcetera.

This post has been edited by Dusty: May 18 2017, 02:07 PM
PM
#
I use the default Jcink one. Which I think I'm gonna have to stick with.

That one, the Collapse/Expand gets all muddled up with the top links on the right side of the board stats. And there is no Group Legend on it.
PM
#
These things are all easily fixable. With the above template in the Board Stats template, the top links should be moved outside of the board stats table. The group legend can be appended anywhere in the template by adding the <!-- |online_legend| --> variable.
PM
#
I got the group legend in. But for whatever reason the right side of the tab is still overlapped text.

If I remove the <br /> between the top links and the collapse/expand link, it puts the top links stuff below collapse/expand.

How could I simply put the +/- button like categories get and so it was after the top links?

This post has been edited by Crysis: May 18 2017, 05:27 PM
PM
#
The text is overlapped because the .toplinks class has a large negative margin.
CODE
.toplinks {
   margin: 0 11px -37px 0;
   text-align: right;
   color: transparent;
}


If this is the result you're looking for, you'll need to do just a touch more work:
user posted image

Firstly, clear the margin for .toplinks and change it to a margin-right of 20px

Secondly, use this as your template:

CODE
<style>#bstatcheck:checked ~ table, #bstatcheck:checked + .maintitle .labelwrap label.bstatcheck2, #bstatcheck:not(:checked) + .maintitle .labelwrap label.bstatcheck1, #bstatcheck {
  display: none;
}
</style><div id='quick-login'>
<!-- |quick_login| -->
</div>
  <br />
  <br />
<div class="tableborder" id="boardstats">
<input type="checkbox" id="bstatcheck" autocomplete="yes">
<div class="maintitle"><span class='bstats-text'>Board Statistics</span><span class="labelwrap" style='float:right;'><!-- |toplinks| --><label for="bstatcheck" class="bstatcheck1"><{B_MINUS_HIDE}></label><label for="bstatcheck" class="bstatcheck2"><{B_PLUS_SHOW}></label></span></div>
<table cellpadding='4' cellspacing='1' border='0' width='100%'>        <tr>
         <td class='pformstrip' colspan='2'> <!-- |total_users| --> user(s) active in the past 60 minutes</td>
   </tr>
   <tr>
        <td width="5%" class='row2'><{F_ACTIVE}></td>
        <td class='row4' width='95%'>
 <span id='activeusers-stats'><b><!-- |total_guests| --></b> guests, <b><!-- |total_mems| --></b> members, <b><!-- |total_anons| --></b> anonymous members</span>
   <div class='thin'> <!-- |online_list| --></div>
          <span id='activeusers-links'>Show detailed by: <a href='index.php?act=Online&amp;CODE=listall&amp;sort_key=click'>Last Click</a>, <a href='index.php?act=Online&amp;CODE=listall&amp;sort_key=name&amp;sort_order=asc&amp;show_mem=reg'>Member Name</a></span>
        </td>
      </tr>
        <tr>
         <td class='pformstrip' colspan='2'>Today's Birthdays</td>
   </tr>
   <tr>
        <td class='row2' width='5%' valign='middle'><{F_ACTIVE}></div></td>
        <td class='row4' width='95%'><b> <!-- |birthdays| --></b> members are celebrating their birthday today<br /> <!-- |birthdays_list| --></td>
      </tr>     <tr>
     <td class='pformstrip' colspan='2'>Board Statistics</td>
   </tr>
   <tr>
  <td class='row2' width='5%' valign='middle'><{F_STATS}></td>
  <td class='row4' width="95%" align='left'>Our members have made a total of <b><script>document.write(<!-- |total_posts| -->-forum_posts[4]);</script></b> posts<br />We have <b><!-- |total_mem_reg| --></b> registered members<br />The newest member is <b><!-- |newest_member| --></b><br />Most users ever online was <b> <!-- |most_online| --></b> on <b> <!-- |most_online_date| --></b></td>
   </tr> <tr>
<td class='pformstrip' colspan='2'>Members Online Today:  <!-- |online_today| --> <span id='mot_explink' style='display:none'>[<a href='javascript:expand_mot()'>Expand</a>]</span><span id='mot_collink' style='display:inline'>[<a href='javascript:collapse_mot()'>Collapse</a>]</span></td>
</tr>
<tr id='mot' style='display:inline-compact'>
<td class='row2' width='5%' valign='middle'><{F_STATS}></td>
<td class='row4' width='95%'><span id='activeusers-mostevertxt'>Most members ever online in one day was <b><!-- |most_online_oneday| --></b>, last accomplished on <b><!-- |most_online_oneday_date| --></b></span><br /><br /><span id='activeusers-followingtxt'>The following members have visited today:</span><br />
<!-- |online_today_list| -->
</td>
</tr>         </table>
</div>


Odds are, there will be one or two little bugs that we'll need to iron out afterwards, but we'll get there.
PM
#
Yeah, the +/- image is located beneath the top links now. Roughly center of the Board Stats.

PM
#
Whoops! I forgot one of the properties. Add display:inline; to the .toplinks class.

EDIT:.. Also mixed up the icons. Swap the positions of the <{B_PLUS_SHOW}> and <{B_MINUS_HIDE}> tags

This post has been edited by Dusty: May 19 2017, 01:19 PM
PM
#
That works great. Thanks for the help. http://files.b1.jcink.com/html/emoticons/smile.gif
PM
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature
email: admin@jcink.com :: blog: John C.
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll