Available Options
| background |
The background option accepts CSS background (shorthand) property values. Example: background: '#000 url(/path/to/bgimage.jpg) no-repeat left top' Default: background: 'none' |
|---|---|
| opacity |
If opacity option is declared, meerkat will append an opacity layer, mirroring your background setting, but with transparency. This will not effect the opacity of the content, only the opacity background layer. Example: opacity: '0.75' Default: opacity: null |
| height |
The height option accepts all CSS height property values (px, em, %, auto, etc). Example: height: '75px' Default: height: 'auto' |
| width |
The width option accepts all CSS width property values (px, em, %, auto, etc). Example: width: '500px' Default: width: '100%' |
| position |
The position setting will determine where Meerkat enters from and exits to. The available options are top, bottom, left, or right. Example: position: 'left' Default: position: 'bottom' |
| close |
The hide option attaches to an html element selector (ie. ".hide" or "#hide"). Example: close: '#hide-popup' Default: close: '.hide' |
| dontShowAgain |
The dontShowAgain option attaches to an html element selector (ie. ".dont-show" or "#dont-show"). Much like the hide option, this will remove Meerkat from the page, however, this also sets a cookie in the users browser telling it not to show Meerkat again. Depending on the cookieExpires setting, Meerkat will not show again for a set amount of days, or until the browser session ends (browser restarts). Example: dontShowAgain: '#dont-show-meerkat' Default: hide: '#dont-show' |
| cookieExpires |
If you use the dontShowAgain option, you can set the amount of days Meerkat will not show for. This option accepts whole numbers beginning with 0. Each number represents a day. If it's set to 0, Meerkat will not show again until that user's browser session has ended (browser restarts).' Example: cookieExpires: 7 Default: cookieExpires: 0 |
| removeCookie |
By giving an HTML element a class or id that is assigned to the removeCookie option, users can click this element and the 'meerkat' cookie will be removed, allowing for meerkat to show again. Example: removeCookie: '.reset' Default: removeCookie: '.removeCookie' |
| animationIn |
This option accepts 'fade', 'slide', and 'none'. This will effect how Meerkat shows itself. Example: animationIn: 'fade' Default: animationIn: 'slide' |
| animationOut |
This option accepts 'fade', 'slide', and 'none'. This will effect how Meerkat hides itself. Example: animationIn: 'fade' Default: animationIn: 'slide' |
| animationSpeed |
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 a number; The number represents the duration of the sliding/fading animation (in milliseconds). The smaller the value, the faster the animation. Example: animationSpeed: 500 Default: animationIn: 'normal' |
| delay |
This option accepts a whole number representing seconds. Setting this option's value to '2' will delay Meerkat from showing for 2 seconds. Example: delay: 2 Default: delay: 0 |
| timer |
This option accepts a whole number representing seconds. Setting this option's value to '5' will hide Meerkat automatically 5 seconds after it's appeared, without needing the user to click your hide element. Example: timer: 5 Default: timer: null |
| dontShowAgainAuto |
This option accepts This method works along side the Example: dontShowAgainAuto: true Default: dontShowAgainAuto: false |
| onMeerkatShow |
The onMeerkatShow option is a callback function, an opportunity to add additional customization to Meerkat. Example: onMeerkatShow: function(){ $(this).animate({opacity: 'show'}) } Default: onMeerkatShow: (an empty function) |
| easingIn |
The use of this option requires the jQuery Easing Plugin by George Smith. Coupled with the animationIn option, you have numerous choices for the easing of its animation. These options will not do anything without making reference to the jQuery Easing plugin BEFORE your jQuery Meerkat reference. Example: easingIn: 'easeInBounce' Default: easingIn: 'swing' |
| easingOut |
The use of this option requires the jQuery Easing Plugin by George Smith. Coupled with the animationOut option, you have numerous choices for the easing of its animation. These options will not do anything without making reference to the jQuery Easing plugin BEFORE your jQuery Meerkat reference. Example: easingOut: 'easeOutBounce' Default: easingOut: 'swing' |
Destroy Meerkat
Using the destroyMeerkat() method will remove all of meerkat's wrappers and containers, leaving (but hiding) its contents.
Example:
$('.destroy).click(function(){
$('#meerkat').destroyMeerkat();
});