MyBB Community Forums

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:

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

After, add:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

    jQuery(".catdesc").hide();

    jQuery(".cattitle").live('mouseover mouseout', function(event) {

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

        var content = catdesc.text();

        if (content !== "") {
            if (event.type == 'mouseover') {
                catdesc.fadeIn('slow');
            } else {
                catdesc.stop(true, true).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:

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

Replace with:

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

That's our jQuery magic. No conflicts or errors. Just delicious jQuery goodness. You can, of course, style the description using the catdesc class. For example:

.catdesc {
    background: rgba(0, 0, 0, 0.5);
    padding: 4px;
}

That's all there is to it. Simple, eh? This technique can, of course, be replicated for individual forum descriptions. I'll leave you to play with it on that front though

I have problem wit The Cure template when I add this script on the very bottom

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {

jQuery("#{$forum['fid']}description").hide();

jQuery("#{$forum['fid']}name").mouseover(function() {

var content = jQuery("#{$forum['fid']}description").text();

if (content === "") {} else {
jQuery("#{$forum['fid']}description").fadeIn('slow', function() {
// Animation complete
});
}

});

jQuery("#{$forum['fid']}name").mouseout(function() {
jQuery("#{$forum['fid']}description").stop(true, true).fadeOut('slow', function() {
// Animation complete
});

});

});
</script>

It shows on the forum but not the effect, you see the scripts between the catogories, can you help me please?

I'm guessing it's because The Cure already uses jQuery and it's somehow conflicting. Can you post a link to your forums where you have this set up?

for better performance.. upload lite version of jquery.min.js to your forum.
and still become

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.min.js"></script> 

nice tuts

Yeah, you can include it whichever way you wish

Since Jquery might conflict with MyBB prototype, I'm using a simple CSS trick to use Forum's description in a tooltip.

It would conflict if I hadn't used .noconflict I don't like to use CSS tricks sometimes because they often aren't cross browser compatible.

That's correct, but now majority of the internet surfers using CSS compatible browsers.

You are correct, of course, but old habits die hard haha

I've just updated my jsFiddle version of this code to make it a lot lighter for me new theme. I'll update this tutorial tonight, but here's a working example now - some of you may be able to work it out http://jsfiddle.net/euantor/RLzMr/