Absolution

[SOLVED ]Collapsible Shou Box area in Absolution - Absolution

[SOLVED ]Collapsible Shou Box area in Absolution

by jenshenrik » Thu Mar 28, 2013 7:43 pm

I´ve made a litte shout box - baset on the shout box from the former linux-user.at

I want to implement it as an iframe in index_body.html template, but i cannot find out, how to make this area collapsible as the forum categories.
I know, it´s possible through BBCODE in the subforum description of a category, but this is not optimal..

    1. How do I do the trick
    2. The area should be closed as default

index_body.html template as it looks as a "non-collapsible" area

Code: Select all

<!-- COLLAPSIBLE AREA START -->
 <!-- IF S_GROUP_5 --><!-- ONLY VISIBLE FOR ADMINS WHILE TESTING -->
  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
   <br /><br />
    <div class="catglow">
     <div class="cathead-m">
        <div class="cathead-r">
            <div class="cathead-l">
               Shout Box Header
            </div>
        </div>
    </div>
    <div class="collapsethis">
        <!-- CONTENT START -->
           <div class="statspanel" style="background-image: url('{T_THEME_PATH}/images/chat-icon.png');">
               <iframe src="./my_little_shout_box_script.php" width="100%" height="400" scrolling="no" frameborder="0" allowTransparency="true" style="margin-bottom: 5px;"></iframe>
            </div>
        <!-- CONTENT END -->
     </div>
    </div>
  <!-- ENDIF -->
 <!-- ENDIF -->
<!-- COLLAPSIBLE AREA END -->


I hope, you understand my "odd" english. I really appreciate your help :)

Here´s how it should look like:
shoutbox_category.png
Click for larger image (Collapsible shout box)
Last edited by jenshenrik on Thu Apr 04, 2013 7:32 pm
jenshenrik
Registered User
Posts: 75
Joined: Tue Dec 28, 2010 3:09 pm
Location: Denmark (Scandinavia)
Contact:

Re: Collapsible Shou Box area in Absolution

by jenshenrik » Thu Mar 28, 2013 9:12 pm

I think, I got it some of the way, but i forumlist_body instead of index_body :)

Before

Code: Select all

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT  -->


- i inserted

Code: Select all

<!-- COLLAPSIBLE AREA START -->
    <!-- IF forumrow.FORUM_ID eq '6' --><!-- my uppermost category -->
 <!-- IF S_GROUP_5 --><!-- ONLY VISIBLE FOR ADMINS WHILE TESTING -->
  <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
   <br /><br />
    <div class="catglow">
     <div class="cathead-m">
        <div class="cathead-r">
            <div class="cathead-l">
               Title...<marquee scrollamount="2" style="float:right;margin-right:40px;">Show / Hide by using +/-</marquee>
            </div>
        </div>
    </div>
<div class="trigger active"></div>
    <div class="collapsethis">
        <!-- CONTENT START -->
           <div class="statspanel" style="background-image: url('{T_THEME_PATH}/images/chat-icon.png');">
               <iframe src="http://www.vfr-forum.dk/viffertalk_test.php" width="100%" height="400" scrolling="no" frameborder="0" allowTransparency="true" style="margin-bottom: 5px;"></iframe>
            </div>
        <!-- CONTENT END -->
     </div>
    </div><br /><br  />
  <!-- ENDIF -->
 <!-- ENDIF -->
   <!-- ENDIF -->
<!-- COLLAPSIBLE AREA END -->


Now I just need to know, how to make this area closed as default? :

I found a tip here, which helped me so far: http://www.christianbullock.com/2011/phpbb-add-code-between-categories Thanks to Christian ;)

P.S. The code is perhaps a bit "messy" for now... :D
jenshenrik
Registered User
Posts: 75
Joined: Tue Dec 28, 2010 3:09 pm
Location: Denmark (Scandinavia)
Contact:

Re: Collapsible Shou Box area in Absolution

by jenshenrik » Fri Mar 29, 2013 4:26 pm

BUMP! :)
jenshenrik
Registered User
Posts: 75
Joined: Tue Dec 28, 2010 3:09 pm
Location: Denmark (Scandinavia)
Contact:

Re: Collapsible Shou Box area in Absolution

by jenshenrik » Thu Apr 04, 2013 7:32 pm

Nevermind. I solved it my self :)
jenshenrik
Registered User
Posts: 75
Joined: Tue Dec 28, 2010 3:09 pm
Location: Denmark (Scandinavia)
Contact:

Re: [SOLVED ]Collapsible Shou Box area in Absolution

by Nuramon » Sun Apr 14, 2013 2:08 am

For all who want to have the answer to get it run themself,
I write a bit more than "it works for me" :P

If you want to make an element at the index-page collapsible, you need to write the ajax-code AFTER this elements. It doesn't matter if you have this code two times now.
I mean this code:

Code: Select all

<!-- IF $COLLAPSIBLE_CATEGORIES -->
    <script type="text/javascript">
        // <![CDATA[
        $(".yourelement").collapse({
            show: function () {
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 300);
            },
            hide: function () {
                this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 300);
            }
        });
        // ]]>
    </script>
<!-- ENDIF -->


And you must do a second change. You are not in the "forumlist"-div, so you need to enter the parent-div-id from the position where you are at yourelement in the code. The it should work.
For your element you need:

Code: Select all

                <!-- IF $COLLAPSIBLE_CATEGORIES -->
                    <!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active"></div><!-- ENDIF -->
                <!-- ENDIF -->
                <div class="collapsethis">

before, and a

Code: Select all

</div>

after.

Hope it works.
My MODs (Development Forum): dev.pinkes-forum.de
My own Forum: Pinkes Forum
User avatar
Nuramon
Registered User
Posts: 15
Joined: Wed Feb 15, 2012 10:50 am
Name: Clemens
Contact: