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/sPUWh/
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>
PHP Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></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>
PHP Code:
<div><span id="{$forum['fid']}name"><a href="{$forum_url}">{$forum['name']}</a></span> <span class="smalltext forumdesc" id="{$forum['fid']}description">{$forum['description']}</span></div>
At the bottom of this file, add the following too. Make sure it's
right at the bottom. Got it? Bottom.
PHP Code:
<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>
That's our jQuery magic. No conflicts or errors. Just delicious jQuery goodness. You can, of course, style the description using the
forumdesc class. For example:
PHP Code:
.forumdesc {
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
