• Basic Usage

    In this tutorial, we’re going to implement Meerkat in a basic, mostly “out of the box”, manner.

    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.

Discussion
Notice: Use of undefined constant php - assumed 'php' in /home/jarodcore/prod.meerkat.jarodtaylor.com/wp-content/themes/meerkat-default/comments.php on line 21

  1. Michael Oeser

    Hi there,

    I´m trying to get it running but I can´t manage. I used your examples from the demo for test purposes at http://www.wp-themes.der-prinz.com/branfordmagazine/ but it doesn´t show up.

    If you look into the sourcecode you can see the integration. What´s wrong with it? Maybe because I already use jquery ui.tabs?

    Thanks for the plugin and for your help.

    • Jarod Taylor

      After looking at your source code, I’m seeing that you are calling meerkat on “#meerkat”, but your element is a class. So you need to change your meerkat call to “.meerkat”.

      Hope this helps.

      Thanks,

      Jarod

      • Michael Oeser

        Indeed that changed at least a bit. Now it seems to work half way. It appears but ignores the background I set and it doesn´t fade or slide in. I simplified the source a bit to make it clearer and used one of your examples from this page. But still doesn´t work properly.

        Any other ideas why?

    • Jarod Taylor

      k, two things here.

      1. You’re missing a comma after your opacity setting.

      2. You’re using an alias in the jQuery script above the meerkat call giving $j the namespace for jQuery instead of $. So you need to change your Meerkat code to use the $j as well.

      I would highly suggest using Firefox and Firebug when implementing anything Javascript. It’s a lifesaver in catching these things.

      • Michael Oeser

        Hmmm…OK…now I changed what you mentioned but still it doesn´t work :-(

        $j(document).ready(function(){

        $j(‘.meerkat’).meerkat({
        background: ‘#999′,
        height: ’120px’,
        width: ’100%’,
        position: ‘bottom’,
        close: ‘.close-meerkat’,
        dontShowAgain: ‘.dont-show’,
        animationIn: ‘fade’,
        animationSpeed: 500
        });

        }

        I also tried it on another site at http://wp-themes.der-prinz.com/wyntonmagazine/ where no other jquery script is been called (to make sure it´s not a conflict). There I think I used exactly your example but it does not work :-(

        Unfortunately I´m not familiar with JS and use firefox/firebug for CSS purposes only.

        Any other idea would be appreciated!

      • Michael Oeser

        Figured it out. Thanks anyway

    • Jarod Taylor

      I’m sorry you’re having the issues you’re having, Michael!

      But, the reality here is, you’re using multiple libraries which isn’t recommended practice, however I was able to get it working just fine with the version 1.3.

      I just had to make sure the namespace was correct. You’ve got multiple aliases being used right now. When in doubt, instead of using ‘$’ you can just use ‘jQuery’ as you’ll see in the script I provided.

      Here’s your site with it working just fine.

      Thanks,

      Jarod

      • Michael Oeser

        That´s fantastic! Thanks for your support. I will donate some bucks.

      • Michael Oeser

        Hi,

        me again ;-)

        It worked for some long months but now I was setting up another site that uses “jQuery” Namespace for some scripts as you can see at http://www.wp-themes.der-prinz.com/freelancer/.

        This seems to cause issues again since I use “jquery” for the Meerkat as well. I tried $j and $ for Meerkat but it always “kills” the image slider on the site.

        Any idea what to do?

        Thanks in advance.
        Michael

  2. Jarod Taylor

    You’re welcome. I’m glad it’s working for you.

    Thanks for your support, it’s much appreciated!

  3. chris

    how do I go an avoid it passing the # to the browser bar when you hit the x (close)

    thanks

    • Jarod Taylor

      I apologize for that! I forgot to fix that before I uploaded the most recent fix. Thanks for the heads up. It’s fixed now.

  4. chris

    that fixed it, what about when you select dont show, then the next time you load the page, it shows an error saying meerkat is undefined.

    anyway around this?

    • Jarod Taylor

      Ah, nice catch. That’s actually not to do with the plugin itself. In the demo, I am chaining an “addClass” method to my Meerkat element, and it’s creating that error. I’m looking to see why right now. You will not get that error in your implementation, unless you’re chaining something to your element calling the Meerkat object.

      ie:


      $('.meerkat').meerkat({
      //meerkat stuff here
      }).addClass('foo');

      In most cases, you’ll have no need to do this. If you find a situation where you do, then just do it without chaining:


      $('.meerkat').meerkat({
      //meerkat stuff here
      });
      $('meerkat').addClass('foo');

      I’m going to see why this is occurring, in the meantime. Thanks again for the heads up.

      • Jarod Taylor

        I take that back. This is what the callback function is used for (onMeerkatShow):


        $('#meerkat').meerkat({
        background: '#000',
        height: '120px',
        width: '100%',
        position: 'bottom',
        dontShowAgain: '#close',
        animationIn: 'slide',
        onMeerkatShow: function(){
        $(this).addClass('foo');
        }
        });

  5. chris

    yep that fixed it, thanks ;)

    works great

  6. James

    Hi there,
    First, thank you for this fantastic plugin, this fits perfectly into our website.
    Currently I am have an issue with the timer option, bascially I want to have meerkat pops up, show for 5 seconds, then disappear. whenever I specify a timer “timer: 5″ I get the following error.

    jQuery(meerkatWrap).delay is not a function
    [Break on this error] eval(function(p,a,c,k,e,r){e=function(…placeWith|contents’.split(‘|’),0,{}))

    could you please advise if I have done something wrong?
    $(“#meerkat”).meerkat({
    position: ‘top’,
    close: ‘.close-meerkat’,
    dontShowAgain: ‘.dont-show’,
    animationIn: ‘slide’,
    animationSpeed: 500,
    timer: 5,
    opacity: .9
    });

    Thanks in advance

    James

    • Jarod Taylor

      What version of jQuery are you using? The delay() method wasn’t available in jQuery until version 1.4

      • James

        right, that will explain why.
        nevermind, I will just have to handcode the timeout then.

        cheers

        James

      • James

        just in case if anyone else is having the same problem, this is the workaround

        //brings up a notification banner
        //message – the message you want to display
        //seconds – duration of displaying banner
        function showMeerkatFeedback(message, seconds)
        {
        $(“#meerkat”).html(message);
        $(“#meerkat”).meerkat({
        position: ‘top’,
        close: ‘.close-meerkat’,
        dontShowAgain: ‘.dont-show’,
        animationIn: ‘slide’,
        animationSpeed: 500
        });
        //due to our our jquery is not the latest version, we cannot use timer option of meerkat (requires jquery v1.4)
        //handcoding the timeout instead
        if (seconds > 0)
        {
        setTimeout(‘hideMeerkatFeedback()’, seconds*1000);
        }
        }

        //hides the notification banner
        function hideMeerkatFeedback()
        {
        $(‘#meerkat’).destroyMeerkat();
        }

  7. Carlos

    I’m have a problem.
    I have a flash which overlaps the div, so the content is displayed down the flash. any solution?
    Thanks

    • Jarod Taylor

      Do you have a URL for me to take a look? Thanks.

      • Carlos

        Thanks, the problem was solved.

        Add ‘wmode’,'transparent’ in line

        AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’177′,’height’,’165′,’src’,'path_to_file’,'quality’,'high’,'pluginspage’,'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'path_to_file’,'wmode’,'transparent’ );

        Now, z-index of the flash object respond.

  8. Anoop D

    Thank you for the great plugin …. I was trying this on a site but once i click “dont show again” link .. and when i try to reload the page the close button and dont show link is being show at the top right part …. May i know what went wrong while deploying it .. Hope i am not wasting your time

    • Jarod Taylor

      Two things:

      Thank you for catching that! I fixed it so it will not show. But, that brings me to one other point, you may want to set display: none; on the element you’re calling Meerkat on. If the end user should have Javascript disabled, your content will show.

      Thanks again for the catch. Please download the latest version for the fix.

      -Jarod

      • Anoop D

        Nice to see that fixed … And regarding somebody who disables JS … anyway we need the content to be shown .. let him see it in the ordinary way ..:)

  9. jonice

    Hello, Thanks for the great code..^^
    may i know, can i use this code for top AND bottom site in the same time? currently i just can use this code for top OR bottom only..

    Sorry i am beginner in js, please give me some advice…. Thank you ^^

    here my code:
    ———————————————————————————————————–
    jQuery(function(){
    jQuery(“#top”).meerkat({
    close: ‘#close’,
    dontShowAgain: ‘#dont-show’,
    position: ‘top’,
    animationIn: ‘none’,
    animationOut: ‘slide’,
    animationSpeed: ‘normal’,
    height: ’50px’,
    background: ‘transparent url(images/background_adv.png) repeat-x left top’
    });

    jQuery(“#bottom”).meerkat({
    close: ‘#close’,
    dontShowAgain: ‘#dont-show’,
    position: ‘bottom’,
    animationIn: ‘none’,
    animationOut: ‘slide’,
    animationSpeed: ‘normal’,
    height: ’50px’,
    background: ‘transparent url(images/background_adv.png) repeat-x left top’
    });

    });
    —————————————————————————————————————–

    • Jarod Taylor

      At this time there is no way to implement two meerkat at the same time. I’m sorry.

  10. Mark Joseph Rivera

    Thanks buddy for this great code… Looking forward to the next level. Soon I’ll send some donation as well. :)

  11. Giannis

    Great script. Thank you.

    I am still testing and configuring it but it is excellent.

    I hope to have it online soon ;)

    Regards,
    Giannis

  12. Kim

    Hi.
    This is great stuff. However, I got a question for you.

    I know theres a Close/Hide thingy for the container, but is there a Open/Show thingy for this?

    Also, is there a way to show lets say 30px of the container and then by clicking on a link showing the rest of it? And also by clicking a link closing the cointainer to the beforehand decided height of 30 px.

    A sort of Minimize, Maximize deal.

    Anyways, it´s a nice script. :-)

    • Jarod Taylor

      I will be implementing this feature in the next release, but it will be a couple months.

      Thanks,

      Jarod

      • Kim

        That sounds good.
        Thanks

      • Kim

        btw, you should get a support forum going. :-)

  13. Simon

    Hi there. Just looking at meerkat from Safari for iPad/iPhone where the meerkat container does not stick to the bottom of the page but scrolls with the content. Has anyone come across a fix for this?

    • Jarod Taylor

      Unfortunately, the iPhone and iPad do not render the CSS fixed positioning as expected. You can read more about it here. Sorry I don’t have a solution for you, but I believe there are solutions on that site, or links to solutions.

      Thanks,

      Jarod

  14. James Holloway

    This is a terrific addition to any website.

    I’m not certain it works with .rhtml though. I’ve played about with it for a bit, but struggle to get it working properly.

    It might be down to .rhtml, the fact that I’m using an ‘include header/footer’ function, or that I’ve simply got it wrong somewhere along the lines.

    Has anybody produced Meerkat effectively in .rhtml or using include functions for different elements of the page?

    Full marks for going to this much effort, Jarod!

    • Jarod Taylor

      I’m not positive if it’s any different with the earlier versions of ROR, but you should be able to easily add Meerkat, regardless what CMS, Framework, etc.

      Do you have a URL I can take a look at?

  15. ais242

    Hi Jarod,

    I’d like to implement your script into my wordpress blog, which wordpress file should I add the script in so that it will appear wherever do user goes when they’re in my blog?

    Thank you so very much

    • Jarod Taylor

      The script should be included in the header.php file (within your theme directory) and the best spot for the div would be in the footer.php file (within your theme directory) just above the closing body tag.

  16. Olin

    Hey Jarod,

    Just would like to say totally awesome script and top notch support you have going on here! I was just wondering how one would go about integrating this cool script into a Joomla install. I’m sure it’s easy, but could you break it down for me?

  17. Chris

    Hi Jarod,

    looks to be an interesting bit of scripting you’ve developed.

    I’ve tried and tried to figure out how to implement this but I’m at a loss, not exactly sure where to copy/paste what.

    Is it possible to show a complete html page fully implementing a working version of the meerkat script? I’ve seen the sample page you have listed above but feel it’s missing something. I copied it as is and uploaded the page along with the javascript files and still don’t see anything.

    Also how would one go about creating a popup footer ad that has a transparent logo (graphic) that rises above the popup section, where the top part of the transparent graphic shows on to the page below it?

    Two questions there 1. can you show a completed html page on how to implement it as well as 2. the transparent logo/graphic overlay?

    Any assistance would be greatly appreciated. To get this working would be a great timesaver on a current project I’m working on. Thanks so much.

  18. Joel

    Hi Jarod,
    I saw this script used on Heart Internet’s site, it looks great! I’m struggling to incorporate it into my site, though. Is there any chance that you could give me an example html code, like the example above but including the $(‘.meerkat’).meerkat({ section, also including the most recent source links (I was getting a bit confused about the changing file names).
    Thanks!

  19. Joel

    Hi again Jarod,
    I’ve managed to get the script working, but for some reason, when I include the div, the rest of the page become no longer centrally justified. Any ideas where this conflict may be?

  20. France

    Hey Jarod,
    Is there any way of specifying a different position than top,bottom,right,or left? I’d like to be able to to give exact coordinates or at least ‘bottom-right’.

    • Jarod Taylor

      Yep, but it’s going to require some CSS. You have to think of Meerkat as just a “container”. If you’re looking to put a 200px square box in the bottom right, for instance, you’d declare Meerkat with the bottom positioning, 100% width, transparent background (so it’s just an invisible container), then you can absolutely position a div INSIDE the meerkat element you created to the right.

      Does this make sense? Think of it this way, you could give Meerkat 100% width and height, like in the Splash Page tutorial, and then put a div inside your Meerkat element (HTML element you’re attaching Meerkat to), and absolutely position that anywhere in the viewport.

      Hope this helps.

      • France

        yep, that makes complete sense THANKS!

  21. Jim Mimlitsch

    Hi Jarod,

    I like your plugin although I noticed that if I call Meerkat more than once on the same page, the opacity doesn’t work after the first time.

    • Jarod Taylor

      Hmm, I thought I fixed this issue. Can you shoot me a URL to take a look at?

  22. Mark

    Hey-
    This is great tutorial. Can you please explain in more detail. I am a new web designer not familiar with JQuery,
    Thanks in Advance!

  23. Mark

    When you say “Meerkat stuff goes here”, What does this mean?

    Thanks!

    • Jarod Taylor

      Well, when I say “Meerkat Stuff Goes Here”, it was only used because that part of the tutorial was not specific to the Meerkat code. That was just showing you how to get ready to use it by including jQuery’s source and the Document Ready method. The “meerkat stuff” comes in the next few steps afterward.

  24. Andrey

    I’m trying to use wonderful meerkat in Drupal. Works lovely. But I came around a situation:

    In Drupal you can show block in a region. The whole region say is #meerkat. But some blocks in this region may be shown on this or other page. I may want to “close” the whole #meerkat AND I may want to “don’t show” exactly this block.

    So is there a way NOT to create a whole bunch of IDs/Classes in meerkat init but assign exactly “don’t show” to say #meerkat .block-X?

    Thanks!

    • Jarod Taylor

      I apologize for not getting to you sooner, but I’m not sure I’m understanding exactly what it is you’re trying to accomplish. Could give me another example? I apologize, I’m not familiar with Drupal.

  25. Sarah Howells

    Hey Jarod, I’m having a small issue. When I click the close button Meerkat does disappear, but the page will reloads and jumps to the top. Like if a a href=”#” was used. Is there a return: flase missing somewhere? Great work!

    • Jarod Taylor

      Sarah, this should not be happening. Do you have a URL for me to look at? Also, are you using FF w/Firebug? If so, check the console and see if its saying anything when you click it.

  26. Tom

    Hello there,

    this is a very good tutorial that i ve been searching,
    ur code works great on both IE and FF
    but some do not work with Chrome.

    Do u have any idea why?

    Thanks a lot

    • Jarod Taylor

      Tom,

      I’m sorry you’re having an issue with implementing it. This has been tested in all the major browsers including IE6+, FF, Opera, Safari, and Chrome. It works in all of them.

      Do you have a URL I can look at? Maybe I can figure out what’s going wrong.

      Thanks,

      Jarod

  27. Tom

    my Chrome : 5.0.375.125

    i checked it again this morning
    and the demo link from your blog that didn’t work last night works now

    i suspect , it might be the case that my browser has not finished dowlnoading the JS file completely so the slider ad does not perform..

    mmmm.. i’ll test more late and let you know Jarod

    Thanks anyway

  28. Martin Crumlish

    Hi,

    Great script. I’ve been looking for a nice slick implementation of this for a while.

    Can you tell me, how do I get it to show again after I have clicked “Don’t show again”…..for testing purposes.

    Thanks.

  29. Martin Crumlish

    It’s ok, found the answer in the documentation.

  30. Agha Adnan

    Jarod Taylor, I m getting this error “Object Does not this property or Method” in IE8. Kindly help me. Code works fine in Chrorom and Firefox. here is the page link
    http://www.bolfm.com/Shakira-Waca-Waca-This-Time-for-Africa-The-Official-2010-FIFA-SongHD-8250.html

    • Jarod Taylor

      You shouldn’t be having any problems in any major browsers IE6+, FF, Safari, Chrome, or Opera.

      No offense, but after looking at the source of the site, there is a lot of messy javascript all over the place. I’m also seeing in Firebug, another error where you’re using $ instead of your alias $j. There could be a number of reasons you’re having issues with it. Please open your site in Firefox, and debug your scripts using firebug, and then test again.

      You also might want to ditch a lot of the raw javascript you have in the head of your document. You’re already using jQuery, so why use all that XMLHttpRequest stuff, when you can use jQuery’s built in Ajax methods.

  31. Mike Pearce

    Hi,

    I love this plugin, it’s made my life so much easier! Thank you!

    I’m having a small problem with IE8 however, my banner isn’t appearing at the bottom of the page, it’s appearing at the top. If I use:

    meta http-equiv=”X-UA-Compatible” content=”IE=7″

    To get IE8 to pretend to be IE7, it works. Unfortunately, I can’t show you the code as it’s not public yet, so I was wondering if you’d experenced this before at all?

    Again, thanks for this most excellent plugin.

    All the best,

    Mike

    • Mike Pearce

      Wait, I figured it out. I have to use an earlier jQuery (1.3.2), so I wrapped it in setTimeout() and that has alleviated the problemo.

      Again, great plugin – thanks!

  32. Vesper

    Hi Jarod,

    This is a terrific plugin. Thank you.

    Question:

    Currently, if I have one Meerkat on a website configured with the “dontShowAgain” option, and this link is clicked, different Meerkats (without that option) on different pages obey the cookie and don’t open.

    Is it possible to have different Meerkats on different pages that operate independently regarding cookie implementation?

    Thanks again.

    Vesper

    • Jarod Taylor

      Yes, that is because the cookie lives inside that domain. If you were to have a Meerkat on “www.foo.com” and clicked “Don’t Show”, it would no longer show in the entire site (www.foo.com), but if you were to go to “www.bar.com” and it too had Meerkat, it would ignore the cookie, because it’s a different domain.

      In order to use the dontShow multiple times inside a domain, you’ll have to use the “removeCookie” option when going to another page that you want to use Meerkat. At this time Meerkat does not have the functionality to use multiple cookies.

      Thanks.

    • Jarod Taylor

      Also, if you’re going to use it throughout your site, it’s best to just use the close function rather than the dontShow.

  33. Reptilians

    Okay. I went to this website.
    http://css-tricks.com/redirecting-to-a-splash-page-but-only-once-with-cookies/

    I need help. I’m not expert using meerkat. What the code for cookie when first time user enters website without showing second splash screen or noobs presses refresh button?

  34. Scott

    Hi Jarod,

    Fantastic script. Ive implemented it fine, no worries at all.

    Wondering if its possible for it to only display on two pages within the site if the visitor ignores it? So it pops up on the homepage, then the next page they go to, but not the one after that.

    Also if someone clicks “Dont show again” can i have it so that it wont show for 12 hours on that persons browser?

    Thanks

  35. Scott

    Ive sorted the above..all good.

  36. imran

    Hi jarod,

    im trying to deploy your plugin on my website, but im testing it on my localhost first.

    I copy and pasted your demo html text, downloaded the java file and kept them in the same directory. I then pasted the meerkat call into:

    $(document).ready(function(){

    }

    so now it looks like this,

    Meerkat: A jQuery Plugin (Basic Demo)

    $(document).ready(function(){
    $(‘.meerkat’).meerkat({
    background: ‘header.jpg repeat-y left top’,
    height: ’100%’,
    width: ’300px’,
    position: ‘right’,
    close: ‘.close-meerkat’,
    dontShowAgain: ‘.dont-show’,
    animationIn: ‘slide’,
    animationSpeed: 500
    });
    });

    am i doing something wrong? please help! thanks :)

    • Jarod Taylor

      The background property needs to be declared exactly as you would do in CSS. So it would be more like:

      background: ‘url(header.jpg) repeat-y left top’

  37. Nino

    Hello, i have tried your plugin, it’s working great but not in ie, what should i add to the script to make it work in ie? the meerkat will show at the bottom only it won’t overlap the whole page. Thank you so much.

    • Jarod Taylor

      This plugin works with all versions of IE (6+). If you have a URL to your page, I’ll take a look.

      • Nino

        hello,

        thank you for support and i have figured it out….

        Great plugin…

  38. Imran

    Hi again Jarod,

    I got it to work great! love meerkat

    my last issue is that when i click close, have to click it again for it to work.

    Any ideas?

    Thanks!

  39. Greg

    Hey Jarod, great plugin. There’s an issue where it doesn’t display on top of flash (ex: a youtube video). This only seems to occur in webkit (safari/chrome) browsers.

    Is this happening to anyone else?

    • Jarod Taylor

      Could you shoot me a URL so I can take a look? Thanks.

      • Greg

        Sure, check out angrybirdsguide.com

      • Greg

        Sorry, I meant angrybirdsguide.com/seasons

    • Jarod Taylor

      Sure thing. You need to add “wmode” parameters to your flash videos.

      so you need:


      object tag:
      param name="wmode" value="transparent"

      embed tag:

      wmode="transparent"

      <object width=”425″ height=”300″>
      <param name=”movie” value=”http://www.youtube.com/v/oyT7BJZyfQM?fs=1&hl=en_US”>
      <param name=”allowFullScreen” value=”true”>
      <param name=”allowscriptaccess” value=”always”>
      <embed src=”http://www.youtube.com/v/oyT7BJZyfQM?fs=1&hl=en_US&showinfo=0″ type=”application/x-shockwave-flash” wmode=”transparent” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”300″>
      </object>

      • Greg

        Yep that works thanks. Any other fixes you think?

        I’d have to edit a lot of code to use the wmode parameter.

    • Jarod Taylor

      Well, this is a flash issue, not an issue with the plugin. Unfortunately you would have to add those params to all of them. Two ways to do it, would be to simple Find/Replace using regex if your text editor supports it, or you could use jQuery to find all instances of the object tag and add the attributes to them. Although, this method may not work due to the fact that the flash object has already loaded at this point.

      • Greg

        So after playing around with this a little more. I realized that wmode=”transparent” doesn’t work for the iPhone, so it’s still displaying on top. It works in Safari/Chrome, but not mobile. Any ideas there?

      • Greg

        FWIW, I found a script that adds the wmode parameter here: http://www.onlineaspect.com/2009/08/13/javascript_to_fix_wmode_parameters/

        I still can’t get Meerkat to display above my videos on an iPhone. I know there’s no flash there, so should I be changing something with the z-index?

  40. Eric

    Hey Jarod… great Plug-in… many thanks for making it available. I am not having any luck in getting it implemented. Perhaps you can please take a look and see where it is failing? Many thanks in advance.

    • Jarod Taylor

      First thing’s first, you need to change “background-color” in the Meerkat script/call to “background”. The “background-color” is not a property/method of Meerkat. Also, you need to make sure that the <div class=”meerkat”></div> is at the VERY bottom of your document just above the closing body tag. Right now it’s inside of another div. Also, it looks like you forgot to close one of your divs so it’s going to need to be closed for it to work.

      Here is a working copy of your page on my server:

      http://jarodtaylor.com/clients/meerkat-debug/balddaddys.html

      • Eric

        Many thanks again Jarod. Nice piece of code.

  41. somnamblst

    I am having an issue just with IE7. I have no choice but to use a 940 width implementation that is being inserted into a 728×90 div. I implemented a -100px margin, that works fine in FF, Google Chrome, Safari, & IE8. In IE7 I am not seeing Meerkat at all

    #meerkat-wrapper {
    width: 940px;
    margin-left: -100px;
    }
    .close-meerkat {
    position: absolute;
    display: block;
    height: 13px;
    width: 13px;
    background: url(“http://somedomain.com/closeSm.gif”) no-repeat 0 0;
    cursor: pointer;
    text-indent: -9000px;
    z-index: 10000;
    }

    .dont-show {

    position: absolute;
    display: block;
    height: 11px;
    width: 70px;
    background-color: #cccccc;
    font-family: arial narrow, sans-serif;
    font-size:0.625em;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
    }

    a.dont-show:hover {color:#FFF;}
    .adsense {z-index: 5;}

    .meerkat {
    position: relative;
    display: none;
    z-index: 5;

    }

    .pos-bot .adsense, {
    width: 940px;
    height: 90px;
    position: absolute;
    left: 0;
    margin-left: 0;
    }

    a.click-through
    {
    display: block;
    position: absolute;
    top: 5px;
    right: 25px;
    height: 70px;
    width: 880px;
    background: url(“http://somedomain.com/spacer.gif”) no-repeat 0 0;
    z-index: 100;
    }
    .pos-bot .close-meerkat {right: 2px; top: 2px;}
    .pos-bot .dont-show {right: 0px; top: 79px;}
    .pos-bot .adsense {top: 1px;}

    $(function(){
    $(‘.meerkat’).meerkat({
    background: ‘url(‘http://somedomain.com/meerkatBG_940x90.gif’) repeat-x left top’,
    height: ’90px’,
    width: ’940px’,
    position: ‘bottom’,
    close: ‘.close-meerkat’,
    dontShowAgain: ‘.dont-show’,
    animationIn: ‘fade’,
    animationSpeed: 1000,
    removeCookie: ‘.reset’
    }).addClass(‘pos-bot’);
    $(‘#bottom’).click(function(){
    $(‘.meerkat’).destroyMeerkat();
    $(‘.meerkat’).meerkat({
    height: ’90px’,
    width: ’940px’,
    position: ‘bottom’,
    close: ‘.close-meerkat’,
    dontShowAgain: ‘.dont-show’,
    animationIn: ‘fade’,
    animationSpeed: 1000,
    removeCookie: ‘.reset’
    }).removeClass(‘pos-bot’);
    $(‘.meerkat .adsense’).replaceWith(function(){
    $(‘.meerkat’).append(‘Your browser does not support iframes.’);
    });

    $(‘.code’).hide();
    $(‘.bottom_’).show();
    return false;
    });

    });


    close
    Don’t Show Again

    Your browser does not support iframes.

    • Jarod Taylor

      Do you have a URL I can look at?

      • somnamblst

        Unfortunately, I don’t as the campaign bookers, put this up, & then take it down, as soon as I check IE7. I may have figured out the problem based on my multitude of tests. An actual ad tag has no HTML, HEAD, BODY tags, as it is an include. I know I inadvertantly left a closing tag, though I wonder if that would be something that would have an effect on IE7 only. I do have a FF Web Developer plugin View Generated Source file, of the last test tag that did not show up in IE7.

  42. somnamblst

    Oops that was a closing HEAD tag

  43. somnamblst

    Hi Jarod

    I just sent you a message with a URL you can look at. To recap, in IE7 only, meerkat is not showing up

    • somnamblst

      The div that meerkat is being inserted into has this style

      .footerAd{clear: both; height: 90px;width: 728px; padding: 18px 115px 20px; overflow: hidden;

      IE 6 & 7 reportedly both have issues with overflow, still surely I should be able to see something, as opposed to nothing

  44. Ameya

    The moment I saw this, I had decided to use it. But unfortunately, It isn’t working the way it is for you. I am not getting the close button and the background image :( can you please help me fix this one?

    URL is: http://www.ameyablog.com

    I really appreciate your help in fixing this.

    Ameya

    • Jarod Taylor

      You’re getting some javascript errors, which are probably preventing meerkat from even loading. Are you using Firebug or Chrome’s developer tools?

  45. Rebecca

    Hi Jarod, great script (hopefully!), having some trouble in implementation can’t the splash image to show at all, any ideas? http://www.clubconnection.com.au/prelive/index-2.html

  46. Filly

    Great plugin, works excellent on all modern browsers. However on IE7 the meerkat div gets positioned halfway on the page, instead of covering the half bottom (I have it configured to slide up from bottom. Please advise…thanks!

    • Jarod Taylor

      This plugin (if implemented properly) works in all the major browsers including IE6+.

Leave a Reply to Anoop D

Please be courteous. Meerkat knows Kung-Fu, and he is not afraid to use it. He also likes kind words, and his ego stroked.

If you have any questions regarding this implementation of Meerkat, please use the comment form below to ask your question. Chances are, if you're having an issue, or need help understanding something, you're not the only one.

marks required field