Tutorial: Create a Super Cool Sliding jQuery Drawer

I love tutorials, especially tutorials that are simple, easy to reproduce, and those that produce great results. This is my tutorial on how to use the Meerkat plugin by Jarod Taylor.

In the event you’ve already closed the slider at the bottom, here is a picture of what it looks like, and you can customize whether it shows up on the top or bottom of the page.

Download jQuery and Meerkat

Download Meerkat

Download jQuery

Make Changes to Your Document head

Now that you have downloaded your 2 .js files, you need to load them into your Wordpress install.

I placed them in my current theme, and created a new folder “js” and dropped both files in there.

From here, we need to link to these files in the head of the document, view the code to insert in there below.

Make sure to change the path to your reflect exactly where you place the files if you choose not to use the “js” folder like I did.

Place these files in between the <head> </head> of the header.php file.

<script src="<?php bloginfo( 'template_url' ) ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ) ?>/js/jquery.meerkat.1.0.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
	meerkat({
		close: '.close',
		dontShow: '.close',
		animation: 'slide',
		animationSpeed: 500,
		dontShowExpire: 0,
		removeCookie: '.remove-cookie',
		meerkatPosition: 'bottom',
		background: '#2e2a22 url(/wp-content/themes/wisestartupblog/images/meerkat-bg.png) repeat-x 0 0',
		height: '110px'
	});
});

</script>

What Does This Code Mean?

This code may seem extremely confusing to the majority of you, and honestly I don’t fully understand it, but you can think of each of these lines as switches.

close: ‘.close’,

This line says, to make the drawer close (or hide it), we are going to call the div class “close”. So in our case, inside the div class “close” we are putting our little X graphic in the corner, to make it easy to close.

The only other main item you need to know is the “dontShow” item. This is what prevents the drawer from popping up over and over. So in this case, we are using the same div class “close”, so that when you click the X, it closes the drawer and doesn’t show it again.

Now, if you want to change the amount of time the drawer is hidden, we can refer to the documentation from Jarod:

dontShowExpire

If you set the dontShow option, you have the option of setting the length of time Meerkat will not show to that user for.

The dontShowExpire option accepts an integer (whole number) or a float (decimal) (ie. 0 or 1.5) between 0 and 365.

If dontShowExpire is set to 0; Meerkat will not show until the browser session has ended.

If dontShowExpire is set to 0.5; Meerkat will not show for 12 hours.

If dontShowExpire is set to 1; Meerkat will not show for 24 hours.

If dontShowExpire is set to 7; Meerkat will not show for 7 days.

For the full documentation, visit the Meerkat documentation page.

So if we want to set the expire for 7 days, our code would look like this.

<script type="text/javascript">$(document).ready(function(){
	meerkat({
		close: '.close',
		dontShow: '.close',
		animation: 'slide',
		dontShowExpire: '7',
		animationSpeed: 500,
		dontShowExpire: 0,
		removeCookie: '.remove-cookie',
		meerkatPosition: 'bottom',
		background: '#2e2a22 url(/wp-content/themes/wisestartupblog/images/meerkat-bg.png) repeat-x 0 0',
		height: '110px'
	});
});

</script>

Let’s Create Our Drawer

First of all, if we want to have the cool background effect and the X close button like we have in my example, you’ll want to download these files:

Download meerkat-bg.png

Download close-btn.png

Place these files in your theme’s “images” folder.

In the code example, I am using my own URL for where my images are located “/wp-content/themes/wisestartupblog/images/” you will need to replace the ‘wisestartupblog’ with the name of your theme.

The Drawer Code

The code itself is very simple, it contains 2 files, and some CSS to go into style.css. One of which goes in your footer.php file of your Wordpress theme and the other you create yourself and it’s called meerkat-ad.html.

<a href="http://wisestartupblog.com/jquery/tutorial-create-a-super-cool-sliding-jquery-drawer/4152/">
<img src="http://wisestartupblog.com/wp-content/uploads/2010/01/drawer-tutorial.jpg">
</a>

Copy the code above and rename it meerkat-ad.html and place it in the root directory of your theme. You will now want to change the href=”" to point to your link, and the img src=”" to point to your image.

Now, place this code below in the footer.php of your Wordpress theme.

<div id="meerkat">
	<div id="meerkat-ad" style="color: #FFF;">
		<a href="http://wisestartupblog.com/jquery/tutorial-create-a-super-cool-sliding-jquery-drawer/4152/">
			<img src="http://wisestartupblog.com/wp-content/uploads/2010/01/drawer-tutorial.jpg">
		</a>
	<a class="close">Close</a>

	</div>
</div>

Finally, let’s add some CSS styling for our meerkat-ad div ID. Place this code in your style.css of your wordpress theme:

#meerkat-ad {
	margin:0 auto;
	padding-top:10px;
	width:730px;
}

a.close {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(/wp-content/themes/concept/img/close-btn.png) no-repeat scroll 0 0;
	display:block;
	height:26px;
	position:absolute;
	right:3px;
	text-indent:-9000px;
	top:7px;
	width:26px;
}

Make sure that you replace the “/wp-content/themes/close-btn.jpg” with the URL of your image.

Testing Everything Out

Okay, so we have the code, we have the html, we have everything setup. Now your next step is to do testing. Test the .close feature, make sure the drawer stays closed.

If all looks good then you have yourself a great sliding drawer that you can use to showcase everything to your readers.

Hope you enjoyed this post, and please: