This comes in handy, especially in a situation where you’re utilizing Meerkat as a Splash Page alternative. If you set up your ‘splash page’ to automatically fade in after 5 seconds (using the timer method), you wouldn’t want the user to see this splash page again immediately (I would hope not) so you’d want to use the dontShowAgainAuto method so that the splash page wouldn’t appear again to that user until the cookie expires (based on your cookieExpires settings).

$('.meerkat').meerkat({
	background: '#000',
	height: '100%',
	width: '100%',
	animationIn: 'none',
	animationOut: 'fade',
	animationSpeed: 500,
	timer: 5,
	dontShowAgainAuto: true,
	cookieExpires: 2
});

The above code would create a black overlay (Splash page, if you will) when the user visited the page. It would automatically fade out after 5 seconds (timer: 5), and will not appear again (dontShowAgainAuto: true) for 2 days (cookieExpires: 2).

Rather then annoy the user, and require them to click “Enter Site” or something similar to, we’re going to take advantage of Meerkat’s timer property and have it fade in after a couple seconds. This is going to be super easy, let’s get started.

As I’ve already said, splash pages have become a thing of the past, due to their annoyance, lack of real benefit, and arbitrary purpose. What we’re going to do is slightly different, and more of a brief welcome splash. I’m going to assume you already have jQuery and the Meerkat source files referenced in the head section of your HTML document. I’m also assuming you already have the element in your document, you plan to attach Meerkat to. If you do not, I recommend visiting the Basic Usage tutorial first.

Once you have everything ready to go, let’s add Meerkat!

 
$(function(){
	$('.meerkat').meerkat({
		background: '#f7fcfa url(images/bg-splash.png) repeat-x left top',
		height: '100%',
		width: '100%',
		position: 'bottom',
		dontShowAgain: '#enter',
		animationIn: 'none',
		animationOut: 'fade',
		animationSpeed: 500,
		timer: 2,
		removeCookie: '.reset'
	});
});

Note: don’t forget to include your script tags!

That’s it! You could remove the timer property if you wanted to, and require the end user to click either the image, or add an anchor tag, to enter the site. This, however, could be quite annoying to your visitors.

If you have any questions, please ask them in the comments, so that anyone else that may have the same question, may see the answer.

For example, if you wanted to fade your content in with Meerkat, you could do the following:

$('#meerkat').meerkat({
	height: '120px',
	width: '100%',
	position: 'bottom',
	close: '.close-meerkat',
	dontShowAgain: '.dont-show',
	animationIn: 'slide',
	animationSpeed: 500,
	removeCookie: '.reset',
	onMeerkatShow: function() { $(this).animate({opacity: 'show'}, 1000); }
});

Example:

$('.destroy').click(function(){
	$('#meerkat').destroyMeerkat();
});

First, we’ll begin by including the necessary files in the head of our HTML document. Once these files are in place, it’s just a matter of attaching Meerkat to an element in the DOM and setting any options that are desired, or simply use Meerkat with its default settings.

Meerkat, depending on the options you have set, will slide or fade in from the top, right, bottom or left side of the browser window and remain in its fixed position while the rest of the page will scroll normally. You have a choice of providing a close option which will simply close Meerkat until the page has been reloaded, or a dontShow option, which will close Meerkat until the browser session has ended, or for a set amount of days, depending on the options you have defined.

Like any jQuery plugin, the first thing we need to include is the jQuery library source, and then the meerkat file.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.meerkat.js" type="text/javascript"></script>

Now, before anything, per usual, we need to make sure the document is ready before calling our meerkat.

  
<script type="text/javascript">
$(document).ready(function(){
	//meerkat stuff goes here 
}
</script>

Now for a basic implementation of meerkat. First you must choose what HTML element you want to attach Meerkat to. In our example, we’ll use a div with the class “meerkat”. For consistent results, it’s best to put your HTML element below your page content, just before the closing body tag.

Here’s an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Meerkat: A jQuery Plugin (Basic Demo)</title>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="jquery.meerkat.js" type="text/javascript"></script>
	<script type="text/javascript">
    $(document).ready(function(){
      //Meerkat stuff goes here
    });
    </script>		
</head>
<body>
<div id="wrapper">
	Web page content goes here
</div>
<div class="meerkat">
	Meerkat content goes here
</div>
</body>
</html>

Now, you simply need to add the meerkat call to your script tags (document ready) in the head of your document.

 
$('.meerkat').meerkat({
    background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
    height: '120px',
    width: '100%',
    position: 'bottom',
    close: '.close-meerkat',
    dontShowAgain: '.dont-show',
    animationIn: 'slide',
    animationSpeed: 500
});

As you’ll see in the demo, it’s a very basic implementation of Meerkat. If you wanted the same effect, but wanted it to come from the left, rather than the bottom, you’d simply change the width, height, and position values.

 
$('.meerkat').meerkat({
    background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
    height: '100%',
    width: '150px',
    position: 'left',
    close: '.close-meerkat',
    dontShowAgain: '.dont-show',
    animationIn: 'slide',
    animationSpeed: 500
});

What if you wanted it to fade in, instead of slide in? How about it doesn’t fade in until 3 seconds after the page loads?

 
$('.meerkat').meerkat({
    background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
    height: '120px',
    width: '100%',
    position: 'bottom',
    close: '.close-meerkat',
    dontShowAgain: '.dont-show',
    animationIn: 'fade',
    animationSpeed: 500
    delay: 3
});

It’s that simple.

What if you wanted it to fade in right when the page loads, but you’d like it to close automatically after 5 seconds? For fun, let’s drop the opacity to Meerkat as well!

 
$('.meerkat').meerkat({
    background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
    height: '120px',
    width: '100%',
    position: 'bottom',
    close: '.close-meerkat',
    dontShowAgain: '.dont-show',
    animationIn: 'fade',
    animationSpeed: 500,
    timer: 5,
    opacity: .9
});

Voila!.

One last example for our ‘basic usage’ demo. This demo example will require a third party plugin known as jQuery Easing. Go ahead and download the source file and include it above your meerkat script (it is important this script is called prior to Meerkat, or it will not work).

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.meerkat.js" type="text/javascript"></script>

Now that you have included this plugin, you can use any of the several options available like so:

 
$('.meerkat').meerkat({
    background: 'url(images/meerkat-bot-bg.png) repeat-x left top',
    height: '120px',
    width: '100%',
    position: 'bottom',
    close: '.close-meerkat',
    dontShowAgain: '.dont-show',
    animationIn: 'slide',
    animationSpeed: 500,
    easingIn: 'easeInBounce'
});

As you can see, meerkat presents itself a little differently. There are a lot of options to choose from so be sure to check out the plugin’s documentation. Keep in mind you can change the easing of meerkat’s exit as well, simply by using the easingOut option.

That’s it, if you have any questions, be sure to ask in the comments section. Also, be sure to check out the documentation page for descriptions of each of the different Meerkat options.

Due to this release being a complete makeover, I am no longer supporting the earlier release. Please update to the new version, but beware of the option name changes while doing so.

As always, if you find a bug or have any issues with it, be sure to let me know.