• Meerkat Splash Page

    Although, rarely used anymore (and for good reason), we’re going to implement a splash entry page using Meerkat.

    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.

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. Nicolas

    Hi,

    I am using this tutorial and it works perfectly fine for me. The only thing I want to add is as “close” button so that users have the chance to close the window before the timer does its job. I have no idea how to do that and would appreciate some info and guide with this issue.

    Many thanks.

    • Jarod Taylor

      In the demo, I’m using the dontShowAgain on the #enter element. You could easily place a “close button” on the splash page, and assign its class or id to the close method of meerkat. Example below would mean you would create the anchor or button for the close, and give it the id “close”.

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

    Ok i have problem with that…
    I have add script in

    and
    [code]

    $(function(){
    $('.meerkat').meerkat({
    background: '#E0E5D7',
    height: '100%',
    width: '100%',
    position: 'bottom',
    dontShowAgain: '#enter',
    //close: '#close',
    animationIn: 'fade',
    animationOut: 'fade',
    animationSpeed: 500,
    timer: 2,
    removeCookie: '.reset'
    });
    });
    [code]

    before
    [code]

    [/code]

    it's hiding me all website after splash.png and not fade out...

    what hapend hire??

  3. Ken

    Hi Jarod,

    Please help! I have implemented as per code, however can’t get to work. Please look at link above.

    thanks,
    Ken

    • Jarod Taylor

      First thing’s first, you have declared meerkat using a class (.meerkat), but your meerkat div at the bottom of your page is an id (#meerkat). They need to match. Second thing is, you’ll need to modify the height attribute of Meerkat if you’re wanting it to be a splash page (use 100%), and you’ll need to change the background image to something local, or a color.

  4. Greg

    Hey Jarod, great plugin. I’ve got a quick question for you…

    Do you know why my splash page flickers on a page load? Meaning that the site loads and for about a half of a second I see the regular site… then the splash page shows up.

    The page works fine. I thought it may be because I was running a the coda slider script also with the meerkat plugin, but it’s doing it for every page.

    Here’s a link: http://www.governorbranstad2010.com/redesignn1n1n/archive.html

    Any help would be really appreciated.

    • Christina

      Greg, did you figure this out? I’m getting the same behavior. Thanks!

      • Jarod Taylor

        This is happening because it takes time for the browser to load the javascript. The best suggestion I can give you is to minimize the amount of Javascripts you’re including on your site, and be sure to use minimized versions of the scripts/plugins so they load faster. I would suggest placing the jquery and meerkat scripts first in your stack of scripts, and maybe put your other scripts at the bottom of your document, just below the closing body tag.

  5. webmonger

    Is it possible to have splash, lets say with custom width & height (in pixels) ?

    • Jarod Taylor

      The easiest way to achieve this, is to change the background property of your Meerkat method to ‘transparent’, then absolutely position your html element (<div id=”splash-content”>) where ever you want inside the viewport with your desired width and height.

      So whatever element you’re attaching Meerkat to (ie. <div id=”meerkat”>), you’d put <div id=”splash-content”> inside of it (ie. <div id=”meerkat”> <div id=”splash-content”>Content goes in here.</div></div>), and give it CSS rules like so:


      #splash-content { background-color: #000; width: 500px; height: 300px; position: absolute; top: 50%; margin-top: -150px; left: 50%; margin-left: -250px; }

      This would put a black box with the the dimensions of 500 x 300px in the center (both horizontally and vertically) within your browser’s viewport.

      • webmonger

        awesome!

  6. Stephen

    I can’t get this to work :( The fade part is working, but my image won’t show up no matter what I do. I have a couple of other jquery animations running on top of the image, but even removing those has no effect, I can’t get the image to show. Any ideas?

    Here is my test page: http://rb.thefinaldomain.com/splash.php

    Thanks

    S

    • Stephen

      never mind, I think I got it. I was confusing the background with your logo image. Thanks.

  7. Wolfe

    Super!!
    BTW, is it possible to also add the click event along with timer?

    • Jarod Taylor

      Yep, just add the “close” parameter.

      For instance:

      
      $(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,
      		close: '#close-meerkat',
      		removeCookie: '.reset'
      	});
      });
      
      
      
  8. Alexander Sergeyev

    Good day, Jarod.
    Both demos have no body width, let’s set one and examine the output.
    Real world case: body {width: 960px; margin: 0 auto;}
    Upon Meerkat’s execution (it resets width to 100%), layout distorts.
    I’m upset with this behavior.
    Any ideas how to fix it?

    • Jarod Taylor

      The only way to fix this is going into the source and removing the body width. Otherwise, you’ll need to use a div container to center your content, instead of the body. Personally, I never use a body width. Sorry I don’t have another solution for you.

  9. Michael Pehl

    I added a different solution instead of a “close” button.

    Look at http://1click.at … you just need your mouse over the viewport and meerkat closes :)

    Now implementing meerkat on my new forum :)

    Good job, I like meerkat very much.

  10. Sami Hoda

    Is there an easy way to have Meerkat load a url, instead of showing inline div? Would onMeerkatShow be the best spot to include an ajax call and have it write to an empty div?

    • Jarod Taylor

      Hmm.. that’s an interesting idea! I haven’t tried that. I don’t see there being a problem attempting that. Please let me know how that goes. I may tie an AJAX call into my next release.

    • Joseph

      I second this request for loading a URL instead of a image.

      • Jarod Taylor

        You don’t have to load an image. I’ve said it many times, and I’ll say it again, Meerkat is simply a container for you put ANYTHING YOU WANT in it. If you’re wanting to load a url via AJAX, by all means do so. Simply use the onMeerkatShow method.

        onMeerkatShow: function(){
        $(‘.meerkat’).load(‘path/to/url.html’);
        }

        Just be sure the element you’re using the load method on is the selector (ie. “.meerkat”).

        Hope this helps.

  11. David Horton

    Thanks for the great scirpts. I have one question:

    As you can see here: http://palacecars.janddmedia.com/

    The splash screen works perfectly, the only issue is when the user clicks home the splash screen reappears every time.

    Do you have any recommendations on how to avoid this?

    Thanks

    • Jarod Taylor

      I just added a new method to the most recent Meerkat release (about 5 minutes ago). This method is called “dontShowAgainAuto”. If you set its value to “true”, it will trigger the “dontShowAgain” method, which adds a cookie to the users browser to prevent Meerkat from appearing again until the cookie expires (based off of your “cookieExpires” setting).

      Example (add the following method/properties to your call):

      
      	timer: 5,
      	dontShowAgainAuto: true,
      	cookieExpires: 2
      
      

      This would cause the splash page to close itself after 5 seconds, and not show to that user again for 2 days.

  12. Ken Y

    For a class project final…that was due Monday (5 days ago).
    All I want to do is have a splash screen with the referenced image fade in and fade out to the home page. I’ve been messing with this for hours and can’t quite get it. Can you help me out? Here’s my code thus far. (At least my newest version). I should note that I’m also a newbie. This is my first time on your site and this plus your blog are pretty sweet. Thanks for sharing the knowledge!

    Meerkat: A jQuery Plugin (Basic Demo)

    $(document).ready(function(){
    $(‘.meerkat’).meerkat({
    background: transparent,
    height: ’100%’,
    width: ’100%’,
    position: bottom,
    close: ‘.close-meerkat’,
    dontShowAgain: ‘.dont-show’,
    animationIn: ‘fade’,
    animationSpeed: 500,
    delay: 1,
    timer: 5,
    opacity: .5
    });
    });

    body {margin: 0 auto}

    • Jarod Taylor

      Shoot me a URL of what you’re trying to achieve.

  13. David I.

    Jarod,

    dontShowAgainAuto: true

    This wasn’t working for me… tried it several times, then took a peek in the jquery.meerkat.1.3.js file.

    There is a typo where it says dontShowAuto instead of dontShowAgainAuto.

    • Jarod Taylor

      Thanks for the find! I don’t know how that snuck in. I appreciate it. It’s been fixed.

  14. Greg A

    Awesome plugin and very nice website, I was able to get this to work right away but I had a conflict when I added Video Lightbox, I also tried Videobox just to make sure. I tried adding a noConflict but it wasn’t working. Have you had any problems with other libraries, once again great stuff, thanks.

    • Jarod Taylor

      Do you have a URL I can look at?

      • Greg A

        thanks for the help Jarod. For anyone else having a similar conflict, (Video Lightbox was conflicting with Meerkat) put the code below from Jarod before the Video Lightbox code in the header and they will work together:

        var $j = jQuery.noConflict(true);
        $j(document).ready(function(){
        $j(‘.meerkat’).meerkat({
        background: ‘#000 url(http://www.locationofyourSplashimage) no-repeat center top’,
        height: ’100%’,
        width: ’100%’,
        position: ‘top’,
        dontShowAgain: ‘#enter’,
        animationIn: ‘none’,
        animationOut: ‘fade’,
        animationSpeed: 900,
        //timer: 2,
        removeCookie: ‘.reset’
        });
        var fadeOutMeerkat = function(){
        $j(‘#meerkat-wrap’).fadeOut(900, function(){ $j(‘.meerkat’).destroyMeerkat(); });
        }
        setTimeout(fadeOutMeerkat, 2000);
        });

        this is a Lightbox problem which doesn’t seem to play nice with others.

  15. Peter Harrison

    Hi Jarod,

    I was wondering if it was possible to include a HTML file instead of just a background image as the splash page.

    I want to incude a few links at the bottom of the splash screen e.g. terms and conditions etc…

    Can you think of a way to do this using your plugin?

    Cheers
    Pete

    • Jarod Taylor

      You can put anything you want within your ‘meerkat’ div. It doesn’t have to be an image. It can be any HTML or Embedded elements.

  16. Sam Davies

    Hey how are you?

    I haven’t used meerkat yet but I am planning on it for a ‘splash’ screen an annoying client wants (why do people still ask for them!!) It seems like a very nice solution though.

    I love this site as well, very nicely done. If it all works out I will send you a link to the finished product and add a few bucks towards your kids education (beer money!)

    Cheers…

    • Jarod Taylor

      I appreciate it!

      Let me know if you have any issues getting it implemented.

      Thanks,

      Jarod

  17. Adrian

    Hello! I’m a student at McGill University. Just thought I’d leave you a message how great this plugin is! I’ve been more interested in the implementation than using it for my projects. Nevertheless, I keep finding myself coming back here to look at the source :)

  18. Sander-Martijn

    I’m so incredibly frustrated. Read all the documentation and read all the comments but cannot get this working. I had wanted to use the Meerkat drupal module but that doesn’t seem to be available for download any more. No matter what I try it doesn’t load, and I get an error message in my javascript console:

    Error: $(“#splash”).meerkat is not a function
    (before I changed the div to id=”splash” I had it as class=”meerkat” exactly as your demo – same error but with (“.meerkat”) instead of course)

    jquery and meerkat files are at the top

    css is quite simple at the moment (and kept it in the doc rather than a loading css:
    #splash {
    color: #FFF;
    display: none;
    margin-left: auto;
    margin-right: auto;
    }

    javascript looks like this (but have also tried it exactly as the working code in your demo):
    // $(document).ready(function(){ // tried this
    $(window).load(function(){ // then this

    $(function(){
    $(‘#splash’).meerkat({
    background: ‘#ffffff’,
    height: ’100%’,
    width: ’100%’,
    position: ‘bottom’,
    dontShowAgainAuto: true,
    cookieExpires: 1,
    animationIn: ‘none’,
    animationOut: ‘fade’,
    animationSpeed: 500,
    timer: 2,
    close: ‘#close-meerkat’,
    removeCookie: ‘.reset’
    });
    return false;

    });
    });

    and the html looks like this:

    Any idea what is going on? are there possibly some known conflicts – perhaps with lightbox which also loads on the home page? Maybe something stupid I’m doing wrong because I’ve been working too many hours?

    I really hope you can help out with this

    • Jarod Taylor

      Please give me a URL to look at. It’s a lot easier to debug. Thanks.

    • Jarod Taylor

      Well I looked at your code and you have a bunch of nested ‘on load’ style functions with a ‘return false;’ thrown in there. I’m not sure what exactly is causing your problem, but it works for me if you replace everything you have inbetween the script tags with this:

      
      $(function(){
      	$('#splash').meerkat({
      		background: '#ffffff',
      		height: '100%',
      		width: '100%',
      		position: 'bottom',
      		dontShowAgainAuto: true,
      		cookieExpires: 1,
      		animationIn: 'none',
      		animationOut: 'fade',
      		animationSpeed: 500,
      		timer: 2,
      		close: '#close-meerkat',
      		removeCookie: '.reset'
      	});
      });
      
      
      
      		
      			  
      			
      • Sander-Martijn

        yeah that’s what I had there in the first place, when that didn’t work I started messing around with it based on various things mentioned in your tutorials or viewing source. I just changed it back to that and still the same error message. Only things I can think of is either the page load is just too long (drupal throws in so much stuff), or there’s a conflict with someething. Most likely candidate is Lightbox, which I can switch to thickbox or one of the others so I’m going to try turning that off.

      • Sander-Martijn

        nope, it’s not lightbox either. Only thing I can think to do is not use meerkat but instead use the splash module (which works but doesn’t have a fadeout option), and then write my own jquery fadeout, if I can get that working – that or try one more time to convince the client that it’s not a good idea anyway.

    • Jarod Taylor

      Well, one thing I did notice (but shouldn’t effect Meerkat in a ‘javascript’ way, but will definitely give you problems in IE) is the gap between your doctype and the top of the document. There shouldn’t be any whitespace between the top of your document and your doctype, otherwise you’ll throw IE into quirks mode (causing A LOT of problems).

      As for Meerkat not working, I ripped your source from the URL you gave me and replaced all the URLs with absolute paths so that I could have exactly what you were working with. That’s the only thing I changed. Here’s a copy of what I did and it’s working. Maybe look through this and see if yours is different?

      • Sander-Martijn

        You’re right, it works locally for me too. Only thing I can figure is that it’s load time related then, and the only solution i can think of for that (since it’s a pretty simple layout and I’ve already tried it both with caching on and off) is to see if there are modules enabled that I’m not using and disable them. I have to go and do that anyway so now is as good a time as any.

        Interesting about the doctype, since I tried viewing source on both firefox and safari and there’s no whitespace above the doctype in either.

  19. Johanna

    Hi! I am doing something wrong and I can´t get this to work. I have implemented the code in your Basic Tutorial, but cannot get any effects.
    Please see the page: armivondesign DOT com.

    What I am trying to achieve is:
    - Logo Fade In
    - Stays for 3 seconds
    - Logo Fade Out/Dissolve
    - Page redirect to other URL

    I kindly appreciate your support!!
    Johanna

    • Jarod Taylor

      Johanna,

      Your jquery and jquery.meerkat.js files are not being loaded. The ‘src’ path is wrong. Where did you put your JS files?

  20. Oscar

    Hello guys,

    Another nice thing to add if you want to keep div content centered (like a logo) is to add some css properies to it. For example meerkat logo:

    #splash-content {
    /*fixed or absolute*/
    position:fixed;
    left:50%;
    top:50%;
    /*Rounded logo dimensions for easy math*/
    width:474px;
    height:138px;
    /* Negative left and top margins; half its width and height accordingly*/
    margin:-69px 0 0 -237px;
    }

    Works fine if you have different screen resolutions and your div has fixed dimensions.

    Regards.

  21. Johanna

    Hi!

    I put them in a folder called js in the root folder (where index.php is).

    Cheers
    Johanna

  22. Johanna

    I tried changing the path to js/jquery.meerkat.js — no change….

    • Jarod Taylor

      I’m assuming you’re using WordPress? If you are, try using the path including your theme directory like:

      /wp-content/themes/insert-theme-name/js/jquery.min.js

      and

      /wp-content/themes/insert-theme-name/js/jquery.meerkat.js

      • Johanna

        Jarod,

        can I email you to send you some login information for you to take a look?
        It is not working over here at all :(

        Thanks
        Johanna

    • Jarod Taylor

      Sure. Feel free to use my contact form. Thanks.

  23. Karl

    Hi Jarod!!1…first of all I want to thank you for this great script….it´s very easy and works perfectly….and well, I have a question: is ti possible to add more than 1 element into the splash screen???..What I wanto to do is to show 3 different elements one by one and after the 3rd one fade out to my home page.

    I really appreciate your time!

  24. Armando Ortiz

    I like the effect and have a client that insists for a splash. I tell him not good for SEO. How is your splash page with SEO. Does it allow for meta tags and can the crawlers, spiders find the site . Thanks

    • jarodtaylor

      It will not affect your SEO because all of your page content is still there. This is simply a couple divs overlaying your site.

      • Armando Ortiz

        Jarod,
        Thank you for the quick response. That is great! that the SEO can stay intact.

        I was wanting to install the script but my Norton detects bad code when want to download.

        What are the steps in installing. Is there an example html page I can copy and paste and then alter the content?

        Please advise… Thanks again…

        Armando

      • Armando Ortiz

        Could you take a look at the code on my site I am trying to install the Meerkat. Could you tell me what I am missing. I would like to get it to work like yours and then I can modify with no problem. I video would be a great help on installing.
        Perhaps you can walk me through it. It appears to work when in dreamweaver in the live mode. And I can see the text appear after a second or two if I refresh the page. But when trying it in explore it doesn’t seem to be working.

        Is ther something that goes near the footer area?

        I am a novice in trying to get it going… Thanks

  25. Armando Ortiz

    Jarod,
    Need your help. I am more of a visual type. I need to see how it is installed.

    I am lost on how to install your Splash Page. I tried many different ways. I even tried by installing your page to see if it would work and it doesn’t. I know i don’t have the css. But I will build it. I am just trying to get the mechanics going. If you click on url you should see your page not looking like yours because of the missing css. That is okay, I would just like to know what is missing. Seems it needs an engine to run it.

    Please advise… Thanks

    Armando

Leave a Reply

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