Page 1 of 1

Collapsible categories without images

Posted: Wed Jul 31, 2013 8:18 am
by AwesomeStyle
Hello, me again :)

As I am working on eMuza style mod, I would like to implement collapsible categories.
What I need are buttons for collapsing with '+' and '-' but not images.

EDIT: Sorry, wrong forum..... So stupid LOL

Thanks, AwesomeStyle.

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 9:18 am
by Abhishek Srivastava
What do you mean by buttons and not images?

Are you talking about buttons like we have a "Submit" button in quick reply? If yes, then just use the button css instead of background-image and all that, and code "+" and "-" in buttons. (If i am wrong please correct me)

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 9:44 am
by AwesomeStyle
Abhishek Srivastava wrote:What do you mean by buttons and not images?

Are you talking about buttons like we have a "Submit" button in quick reply? If yes, then just use the button css instead of background-image and all that, and code "+" and "-" in buttons. (If i am wrong please correct me)
I am talking about this, but it is using images for buttons and I just want to use textual buttons with '+' and '-' replacing images.

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 1:49 pm
by Abhishek Srivastava
Trying asking at Christian's website. He might help you. :)

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 2:20 pm
by AwesomeStyle
Okay :)

Thanks,
AwesomeStyle.

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 4:01 pm
by Christian 2.0
Hmm. It's not really possible to do this given the complex nature of the jQuery code used to collapse the categories.

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 5:03 pm
by DionDesigns
Christian 2.0 wrote:Hmm. It's not really possible to do this given the complex nature of the jQuery code used to collapse the categories.
Seems to me that in the JS added to forumlist_body.html, if one added:

Code: Select all

$(this).find('.trigger').innerHTML = '-';
to the "show" block, and:

Code: Select all

$(this).find('.trigger').innerHTML = '+';
to the "hide" block, made some minor changes to the .trigger CSS rule (add background, color, line-height properties), and added a default - inside <div class="trigger"></div>, one would be very close to replacing the background image with +/- characters.

I'd personally use CSS transitions for the animation, document.cookie to update the (JSON) cookie when a +/- button is clicked, and reading the (JSON) cookie in functions_display.php and creating a {forumrow.COLL_EXP} template variable to set the default category positions. One would also need a {CE_COOKIE} template variable containing the entire cookie to be able to update the cookie. IE7/8/9 wouldn't see animation, though expand/collapse would still work. This would eliminate the overhead and sluggishness of using jQuery add-ons.

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 9:02 pm
by Christian 2.0
DionDesigns wrote:This would eliminate the overhead and sluggishness of using jQuery add-ons.
On the basis we're in 2013, average home broadband is 30mb/s and average 3G is around 4mb/s , I'm not going to lose too much sleep over fractions of a second. ;)

Re: Collapsible categories without images

Posted: Wed Jul 31, 2013 11:16 pm
by DionDesigns
I agree you shouldn't be losing sleep due to download speeds.

You should be losing sleep due to the JS causing browser sluggishness on the page, for a feature that will be used once and then likely never used again. ;)

Hence my comment about using CSS transitions if I ever had the need for a collapsible-category feature. However, if a client's site was already loading jQuery, I'd probably use $.slideToggle() since it does the animation with no additional JS overhead, and it's compatible with IE7/8/9.

But that wasn't the point of my post. It's pretty easy to modify the code in your article to support text-based buttons (which is what the OP wanted), and I suggested how to approach the task.

Re: Collapsible categories without images

Posted: Thu Aug 01, 2013 10:47 am
by AwesomeStyle
How is it done here? http://clanptg.co.uk/

Re: Collapsible categories without images

Posted: Thu Aug 01, 2013 12:59 pm
by Abhishek Srivastava
That's myBB. Why don't you use a small image similar to it? It would also look like that only. :)

Re: Collapsible categories without images

Posted: Thu Aug 01, 2013 4:45 pm
by AwesomeStyle
Thanks everyone for replying. At the end, I just used Christian's .psd :)

Regards,
AwesomeStyle.