Enhance your Blog Design with jQuery II
Last week I explained a simple show/hide method with jQuery to allow you to declutter your sidebar. However, the show/hide methods are not very graceful, but now that you have a basic understanding of jQuery, we can look into the other methods available for you to try out.
Sliding
Rather than an instant show or hide, a sliding animation is much nicer. This is a fairly quick change on what we had last week. Instead of the code
$('#archives').click(function() {
$('#archives ul').toggle();
});
We use the slideToggle() method instead eg.
$('#archives').click(function() {
$('#archives ul').slideToggle('slow');
});
Notice I’ve also passed a parameter of slow, to control the speed at which it slides. This will then toggle between sliding up and sliding down of the archives list.
Fading
Another option is that you can use the fadeIn or fadeOut methods. There isn’t a toggle option of these methods, so we need to use the toggle method to call two functions. This works by running the first function on the first click, then the second function on the second click, then back to the first on the third click and so on. So the first function runs on the odd numbered clicks and the second on the even numbered clicks.
The code to do this is
$('#archives').toggle(function() {
$('#archives ul').fadeIn('slow');
}, function() {
$('#archives ul').fadeOut('slow');
});
The fadeIn/Out methods are a nice animation effect however the sliding effect comes across with a bit more style in my opinion.
The Comment Form
So far the examples have been designed to target the sidebar, however we can also give the same effect to the comment form.
The WordPress comment form usually has an id of commentform, so we can use this as the target. We’ll also need a trigger, such as a heading to the form. Your theme file may already have this in however if it doesn’t then suggested code could be
<h3 id="jqcommentform">Leave a Comment</h3> <form id="commentform" ... > .... </form>
Our trigger is now #jqcommentform and our target is #commentform. So for this to then do its job we need to modify our header code to include these in it. I’ll use the slideToggle method for this, and also include the archives and blogroll too:
jQuery(document).ready(function($) {
$('#archives ul, .categories ul, #commentform').hide();
$('#archives, .categories, #jqcommentform').css("cursor","pointer");
$('#archives').click(function() {
$('#archives ul').slideToggle('slow');
});
$('.categories').click(function() {
$('.categories ul').slideToggle('slow');
});
$('#jqcommentform').click(function() {
$('#commentform').slideToggle('slow');
});
});
This would then work with the archives list, categories list and the comment form (note the selectors have been used from the Classic theme, you would need to check your own theme and possibly modify it to get this to work with that).
For an example of how this all works, you can view this on my own site.
TechZoomIn | October 12th, 2008 at 11:07 am #
Hey Sarah,
Good to see all these….
I have to plan my time to experiment on this.
Ofcourse i saw ur personal site .Good looking dude
Si Philp | October 13th, 2008 at 3:03 am #
Rather than adding each onclick event why not just create a function like:
function Showthis(object)
{
var inputObject = document.getElementById(object);
var undefined;
if(inputObject != undefined)
{
$(inputObject).slideToggle('slow');
}
}
Then something like
Recent Posts <a href="#" rel="nofollow">[+]</a>
<a href=”#” rel=”nofollow”>Post 1</a>
<a href=”#” rel=”nofollow”>Post 2</a>
Si Philp | October 13th, 2008 at 9:33 am #
doh! and add the onclick=”Showthis(object)” to the h3 element or just the [+]
Sarah (Post Author) | October 13th, 2008 at 2:04 pm #
Si, I didn’t actually do each individual one on my site if you check my source, but considering the post is designed for newbies to jQuery I wouldn’t want to go into complex stuff like the stuff you wrote, considering I don’t get it
I was also aiming to not change the markup, just to show how jQuery can be used without interfering with the original markup.
But the additional code is always good for those who want to take it further
Doug | October 27th, 2008 at 2:46 pm #
Hi Sarah–
Thanks for the tutorial. I’m trying to add expandable sidebar sections to my wordpress blog, and have been comparing the various jquery + mootools techniques.
I’ve noticed that some techniques –like the one in use on stuffbysarah.net (same as this tutorial, yes?)– display the hidden content while the page is loading and then snap it shut … it’s as if the js instructions to hide the content aren’t loaded until the end. I’m wondering if this glitch concerns you and if you have any solutions.
I’m looking for a technique that 1) doesn’t have this glitch; i.e. hides hidden content from the very beginning of page load, 2) is lightweight, 3) works with nested lists, 4) is not true accordion (i.e. open a section doesn’t close another open section; user must close section). ideally i’d add persistent states to the list but i’m not sure how to use the jquery cookie plugin.
–D
Sarah (Post Author) | October 27th, 2008 at 3:29 pm #
Hey Doug. The reason why you see the content initially is because the JavaScript doesn’t activate until the page is loaded as it’s browser side not client side. You can prevent it from showing by using CSS to not display the (eventually) hidden content on page load, however non JS users will not get to see the content at all which of course isn’t a great idea.
It’s unlikely you’ll find any accessible JS solution that will have everything hidden on page load.
As for the Cookie, it’s not too hard to use. If you look in my header.js file on my own site you’ll see how I’ve used it. Feel free to grab the code and have a play
I didn’t go into that here as I just felt it a bit too advanced.