How to Create Your Very Own “Archive Navigator”
Last week I received an email from fellow reader Jaap asking if I could provide a link to a plugin that would implement something like my very cool Archive Navigator you see to the right.
I did some searching and found a jQuery plugin that is capable of the same effect called Coda-Slider. The reason this plugin is called ‘Coda-Slider’, is because this effect was made popular on Panic’s product site for their web development software called Coda.
If you’re looking for a quick solution to pull this off, head on over to Niall Doherty’s blog (the author of the Coda-Slider plugin) and download it. There’s enough documentation there to pull off the effect in a matter of minutes if you know what you’re doing.
But if you’re looking to improve on your web developing skills, I’ll show you how to pull this off from scratch and customize it for WordPress using just the jQuery library.
Step 1: Building the Navigator
First, we’re going to build out the elements needed for the Navigator. Open up your favorite text editor and create a couple of divs which will nest like this:
1 2 3 4 5 6 7 8 9 10 11 12 13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Since the .crop div is a parent div of the other divs, specifying fixed dimensions as well as assigning hidden to the overflow attribute will effectively crop out anything not inside its dimensions. Although this example only has three divs, you can create as many as you want as long as you make the .widearea div wide enough.
Next, we’ll need to add some controllers available to the user so that they can interact with this. For simplicity’s sake, let’s add three buttons:
1 2 3 4 5 6
Now that we’ve built out the HTML, we will start getting into the fun stuff.
Effects with jQuery
Once you’ve dropped the library into your host, add a reference to it in your html like so:
- Add a click event handler to our buttons
- Create one (or more) functions which will produce the sliding effect
So for the first objective, creating a click event handler (also known as onClick) is real simple using jQuery:
1 2 3
Hopefully it’s intuitive enough that you clued in that to create the other click event handlers for the other two buttons, you just had to copy and paste that line of code and replace buttonone with buttontwo or buttonthree. To explain this a little better: we are targeting the button with id buttonone (as done with $(“#buttonone”)) and then assigning a click event handler which will call a function.
Next, we will create the functions inside these click event handlers which will “scroll” the .widearea div horizontally:
1 2 3 4 5
In our function, we are instructing the .widearea div to animate to margin-left (note how jQuery’s syntax is a little different from CSS) of 0. If you got this set up, you’ll notice clicking on the button doesn’t do anything, that’s because by default, we are already seeing divone so there’s no reason to move the .widearea div. Let’s set it up for buttontwo:
1 2 3 4 5
If you add this in and click on buttontwo, the .widearea div should move 300px to the left so that #divtwo is in view. If you’re wondering what the “500” is for, it specifies how long the animation should last in milliseconds.
Putting it all together now…
Eventually, after coding everything up, you’d end up with something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
If you want, you can copy and paste the above into an html file, stick it in a directory with version 1.2.3 of the jQuery library (the latest stable version as of this post) and run it for a quick demo. It functions the exact same as my archive navigator.
Customizing it for WordPress
If you’ve ever created or modified a WordPress theme before, you might have come across the template tags. You can use these inside the divs of .widearea to list categories, tags, and more. Here are a few examples:
- Last five posts:
1 2 3 4
Still with me?
I tried to make this mini-tutorial as newbie friendly as possible but there are some advanced topics in here that might have gone over your head. If you have any questions, feel free to ask through the comments as I’m sure I might have not explained something very well or left out something.