1.6 Compatible: Fading category descriptions using jQuery
#1
jQuery is cool. Fading is cool. Clutter most certainly is not. Add all these together and you come up with an elegant solution for displaying category descriptions. In this tutorial, I'll show you how to add fading category descriptions using jQuery.

First of all, why not take a look at what we'll be creating. You can do this by visiting my jsFiddle for it. Feel free to fork it, edit it, share it whatever you wish to it - it mainly existed for me to prototype my styling and html: http://jsfiddle.net/euantor/RLzMr/

Okay, so let's make a start. We first of all need to add jQuery if you don't already have it loaded. The best way to do this is to load it from google. It trims down your bandwidth usage and, chances are, google's servers are at least 9000 times better than yours. Head over to the Templates & Style section of the ACP and load up the headerinclude template for you theme. You can add the code wherever you like in here truth be told. I like to place it below the rest of the JS being initialised, so here we go:

Find:

PHP Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script

After, add:

PHP Code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<
script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {

    $(
".catdesc").hide();

    $(
".cattitle").on('mouseover mouseout', function(event) {

        var 
catdesc = $(this).parent().children('.catdesc');

        var 
content catdesc.text();

        if (
content !== "") {
            if (
event.type == 'mouseover') {
                
catdesc.fadeIn('slow');
            } else {
                
catdesc.stop(truetrue).fadeOut('slow');
            }
        }

    });

});
</
script


Right, step one done. Consider yourself maybe a third through the tutorial. Next step is to edit the forumbit_depth1_cat template. Load it up. In here, we're going to apply a few ID selectors and a few classes etc. This whole step could be entirely different for your theme. I'm writing from the perspective of editing the default theme.

Find:

PHP Code:
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div

Replace with:

PHP Code:
<span class="cattitle"><a href="{$forum_url}">{$forum['name']}</a></span>
                     &
nbsp; <span class="catdesc smalltext">{$forum['description']}</span


That's our jQuery magic. You can, of course, style the description using the catdesc class. For example:

PHP Code:
.catdesc {
    
backgroundrgba(0000.5);
    
padding4px;


Demo

Reply
#2
Could you post some previews??
Reply
#3
Sure, I'll post a demo in the OP. Good idea!
Reply
#4
Is not jsFiddle enough? I think it is.
Reply
#5
Yeah, that's the demo Wink I added it yesterday.
Reply
#6
You could just use pure CSS/HTML for this.
Reply
#7
True, but it wasn't really a viable option when I wrote this Happy
Reply
#8
Good for you for writing this.

But I hate these goddamn things.
Reply
#9
Haha, they were all the rage once Wink
Reply
#10
Thanks for this, I was looking for something like this for my future themes Grin
Reply