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