First thing's first, you need to link to the most recent jQuery file and Meerkat file. Be sure to include these inbetween your <head> tags.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.meerkat.js"></script>
Before you can do anything, you need to now include your script tags and the basic jQuery Dom is ready function call.
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
Before you can do anything, you need to now include your script tags and the basic jQuery Dom is ready function call.
<script type="text/javascript">
$(document).ready(function(){
meerkat();
});
</script>
Add the Meerkat Div element to the HTML document and give it the meerkat id. This element needs to be below the rest of your page content, right above the </body> tag.
<div id="meerkat"> Meerkat Content Goes Here </div>
In this particular Meerkat call, we didn't set any options. Without setting any options, Meerkat's default options will be set. Calling the Meerkat function without setting any options is essentially the same as this:
meerkat({
showMeerkatOnLoad: 'false',
close: 'none',
dontShow: 'none',
dontShowExpire: 0,
removeCookie: 'none',
meerkatPosition: 'bottom',
animation: 'slide',
animationSpeed: 'slow',
height: 'auto',
background: 'none'
});
The showMeerkatOnLoad option accepts 2 values: true or false
When showMeerkatOnLoad is set to true; Meerkat will be set to show() when the function is called.
When showMeerkatOnLoad is set to false; Meerkat will be set to hide() until the function is called.
Default: 'false'The close option accepts any selector (ie. ".close" or "#close")
When a user clicks on the selector you have set as your close option, Meerkat will close until it's reloaded again.
Default: 'none'The dontShow option accepts any selector (ie. ".dont-show" or "#dont-show")
When a user clicks on the selector you have set as your dontShow option, Meerkat will close and not show again until the browser session has ended (the user's browser has been restarted) or for a specific amount of days, depending on the dontShowExpire setting.
Default: 'none'Note: dontShow depends on browser cookies. If the user does not accept cookies, this option will be ignored.
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.
Default: 0Note: dontShowExpire depends on browser cookies. If the user does not accept cookies, this option will be ignored.
Used mainly for development purposes, the removeCookie option is used to delete the cookie created by the dontShow option.
The removeCookie option accepts any selector (ie. ".remove-cookie" or "#remove-cookie")
Default: 'none'Note: removeCookie depends on browser cookies. If the user does not accept cookies, this option will be ignored.
The meerkatPosition option accepts 2 values: top or bottom
When meerkatPosition is set to top; Meerkat will be positioned at the top of the browser window.
When meerkatPosition is set to bottom; Meerkat will be positioned at the bottom of the browser window.
Default: 'bottom'The animation option accepts 2 values: slide or fade
When animation is set to slide; Meerkat will slide in on load and slide out when closed.
When animation is set to fade; Meerkat will fade in on load and fade out when closed.
Default: 'slide'The animationSpeed option accepts the following values: ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000)
When animationSpeed is set to slow; Meerkat will slide/fade in and out slowly.
When animationSpeed is set to fast; Meerkat will slide/fade in and out quickly.
When animationSpeed is set to a number; The number represents the duration of the sliding/fading animation (in milliseconds). The smaller the value, the faster the animation.
Default: 'slow'The height option accepts all CSS height property values (px, em, %, auto, etc).
If this option is not set it will depend on styles you apply to the meerkat div in your CSS.
Default: 'auto'The background option accepts CSS background (shorthand) property values.
example
background: '#000 url(/path/to/bgimage.jpg) no-repeat left top'