-
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
timerproperty 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
timerproperty 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
Leave a Reply to Greg
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
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.
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
closemethod of meerkat. Example below would mean you would create the anchor or button for the close, and give it the id “close”.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??
Hi Jarod,
Please help! I have implemented as per code, however can’t get to work. Please look at link above.
thanks,
Ken
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.
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.
Greg, did you figure this out? I’m getting the same behavior. Thanks!
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.
Is it possible to have splash, lets say with custom width & height (in pixels) ?
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.
awesome!
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
never mind, I think I got it. I was confusing the background with your logo image. Thanks.
Super!!
BTW, is it possible to also add the click event along with timer?
Yep, just add the “close” parameter.
For instance:
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?
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.
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.
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?
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.
I second this request for loading a URL instead of a image.
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.
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
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):
This would cause the splash page to close itself after 5 seconds, and not show to that user again for 2 days.
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}
Shoot me a URL of what you’re trying to achieve.
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.
Thanks for the find! I don’t know how that snuck in. I appreciate it. It’s been fixed.
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.
Do you have a URL I can look at?
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.
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
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.
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…
I appreciate it!
Let me know if you have any issues getting it implemented.
Thanks,
Jarod
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
Awesome! I’m glad I can be of assistance.
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
Please give me a URL to look at. It’s a lot easier to debug. Thanks.
oh sorry – i figured setting the url as my website in my comments would do it for you – it’s http://producer-girl.com/
Thanks!
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:
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.
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.
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?
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.
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
Johanna,
Your jquery and jquery.meerkat.js files are not being loaded. The ‘src’ path is wrong. Where did you put your JS files?
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.
Hi!
I put them in a folder called js in the root folder (where index.php is).
Cheers
Johanna
I tried changing the path to js/jquery.meerkat.js — no change….
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
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
Sure. Feel free to use my contact form. Thanks.
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!
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
It will not affect your SEO because all of your page content is still there. This is simply a couple divs overlaying your site.
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
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
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