Simple collapse/expand for any prosilver container

Looking for a MOD? Have a MOD request? Post here for help. (Note: This forum is community supported; phpBB does not have official MOD authors)
Scam Warning
User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Thu Jul 19, 2012 2:16 pm

I just want to add it to any prosilver box (container) created by this code:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>
don't know if it's possible :/
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
martin123456
I've Been Banned!
Posts: 726
Joined: Sat Mar 05, 2011 7:44 pm

Re: Simple collapse/expand for any prosilver container

Post by martin123456 » Thu Jul 19, 2012 4:14 pm

Jessica wrote:I just want to add it to any prosilver box (container) created by this code:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>
don't know if it's possible :/

To make that code you have work you will need this http://www.christianbullock.com/2011/ph ... th-cookies

As that code come from my site and is in use there as a stats box.

Code: Select all

<!-- IF S_CODE_UNTIDY and S_MESS_ON_INDEX Good If_Not_TIDY_Then_SUBMIT -->

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Thu Jul 19, 2012 4:47 pm

I told you, I can't use that because the jQuery slide won't work because of jQuery conflicts.
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Thu Jul 19, 2012 5:22 pm

As long as you have already loaded jQuery, the following would work. It's probably best to add cookie support and a custom toggle function with "+" and "-" images, but those are separate issues.

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist" style="position:relative">
            <span style="position:absolute;right:5px;bottom:2px" onclick="$(this.parentNode.nextSibling).slideToggle()">Toggle</span>
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul><ul class="topiclist forums" style="display:block">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>
Please note that I removed the whitespace between the </ul> and <ul class="topiclist forums" style="display:block"> tags. This is critical -- the code will not work unless this is done.

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Fri Jul 20, 2012 2:41 pm

thanks

I tried this and the text (I put in + instead of toggle) appears, but I can't click it...

forum: http://area51.chenschool.elementfx.com/
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Fri Jul 20, 2012 5:32 pm

What is on your test board bears no resemblance to the code I provided above...

Why are you using duplicate .forabg elements for each category? There is absolutely no need for such duplication in a show/hide toggle! The following is a COMPLETE replacement for your current category toggle function, and it includes cookie support:

Code: Select all

<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist" style="position:relative">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
            <img src="./styles/prosilver/theme/images/hide.png" style="position:absolute;right:5px;bottom:5px" onclick="toggleCat(this)" />
         </ul><ul id="c{FORUM_ID}" class="topiclist forums" style="display:block">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
Note that I removed the DIV tag which enclosed the .forabg element, as it's not needed. You also don't need the duplicate "hide" .forabg element any more. You will also need the following javascript:

Code: Select all

<script type="text/javascript">
function toggleCat(button) {
    var cat = button.parentNode.nextSibling;
    if (cat.style.display ==  'none') {
        button.src = "./styles/prosilver/theme/images/hide.png";
        document.cookie = '_' + cat.id  + '=; path=/; expires=Wed, 1 Jan 2020 00:00:00 GMT;';
    }
    else {
        button.src = "./styles/prosilver/theme/images/show.png";
        document.cookie = '_' + cat.id  + '=1; path=/; expires=Wed, 1 Jan 2020 00:00:00 GMT;';
    }
    $(cat).slideToggle('slow');
}

cookies = document.cookie.split('; ');
for (i in cookies) {
    if (cookies[i].charAt(0) == '_') {
        cookie = cookies[i].split('=');
        if (cookie[1] == '1') {
            cid = cookie[0].substring(1);
            if (document.getElementById(cid)) {
                document.getElementById(cid).style.display='none';
            }
        }
    }
}
</script>
It should be placed at the end of forumlist_body.html.
Last edited by DionDesigns on Fri Jul 20, 2012 6:24 pm, edited 1 time in total.

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Fri Jul 20, 2012 5:44 pm

I'm using a collapse/expand mod for the categories, but what I want is not for the categories. it's for the prosilver blue box I have for the stats box :/
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Fri Jul 20, 2012 6:30 pm

There was an error in the toggleCat() function in the script...I just fixed the error in my post.

It would have helped to know that you only wanted this for the stats. ;) In that case, after replacing the toggleCat() function with the new code, the only other change you need to make is to change id="c{FORUM_ID}" to id="cstats".

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Fri Jul 20, 2012 8:56 pm

DionDesigns wrote:There was an error in the toggleCat() function in the script...I just fixed the error in my post.

It would have helped to know that you only wanted this for the stats. ;) In that case, after replacing the toggleCat() function with the new code, the only other change you need to make is to change id="c{FORUM_ID}" to id="cstats".
okay thanks I'll try the new code

and not just stats, but if I create a box with this:

Code: Select all

<div class="forumlist">
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
               <dt>TITLE</dt>
              </dl>
            </li>
         </ul>
         
         <ul class="topiclist forums">
         <li class="row">
   <div style="text-align: center;">

       CONTENT HERE

</div>
         </li>
         </ul>
       </div>
      
<span class="corners-bottom"><span></span></span></div></div>
</div>
    </div>
or any mod that adds a box like that...if that makes any sense :/

I guess that would be too complicated? I think it would be.
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Fri Jul 20, 2012 10:34 pm

The code I provided will work with any box you create using the same structure, as long as the ID of the box being toggled (in the case of the stats box, cstats) is unique.

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Fri Jul 20, 2012 11:43 pm

ah okay. but how would I know what ID to use?

EDIT: okay I changed it, and it's working now. one little thing though. is there anyway you can make it so that when you hover your cursor over the toggle image, the cursor changes to a hand?
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Sat Jul 21, 2012 2:46 am

To add the pointer, find the hide/show IMG tag, and change this:

Code: Select all

style="position:absolute;right:5px;bottom:5px"
to this:

Code: Select all

style="cursor:pointer;position:absolute;right:5px;bottom:5px"

User avatar
Jessica
Former Team Member
Posts: 4341
Joined: Sun Jul 18, 2010 2:53 pm
Location: Pennsylvania, USA
Name: Jessica
Contact:

Re: Simple collapse/expand for any prosilver container

Post by Jessica » Sat Jul 21, 2012 2:57 am

thanks again!


also,

for this:
DionDesigns wrote:The code I provided will work with any box you create using the same structure, as long as the ID of the box being toggled (in the case of the stats box, cstats) is unique.
how do I figure out the ID?
Please do not PM me for support unless it is absolutely necessary
Pro-choice, Atheist, Pro-LGBT rights

Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid. - Albert Einstein

User avatar
DionDesigns
Registered User
Posts: 515
Joined: Sun Feb 26, 2012 11:22 pm
Location: Uncertain due to momentum.
Contact:

Re: Simple collapse/expand for any prosilver container

Post by DionDesigns » Sat Jul 21, 2012 3:43 am

You do what I did with the cstats ID...you make it up! Basically, as long as there is no other ID on the page with the same name, it doesn't matter what you call it.

clight77
Registered User
Posts: 907
Joined: Sun May 11, 2003 11:09 pm

Re: Simple collapse/expand for any prosilver container

Post by clight77 » Mon Jul 27, 2015 9:29 pm

@DionDesigns
I had to post and say thanks for all the info,this in depth solution work great for me.

Thanks...
I Follow Up On My Posts.
So Should Everybody...

Locked

Return to “[3.0.x] MOD Requests”

Who is online

Users browsing this forum: Yahoo [Bot] and 21 guests

cron