Mootools Splash Screen
Every now and then you get a client that absolutely insists on having a “splash screen“. However hard you try to convince them that it is not good for SEO (search engines like content and links) or for visitors (after all, you are wasting their time), they refuse to see it your way and insist on having it.
I had one of them this week and, rather than spending the time and energy on trying to persuade the client, I decided to have a go at making one with my favorite javascript Library – Mootools.
To this end, I came up with the following class. It is really quite simple and could no doubt be improved and features be added but I thought that I would share it anyway.
The HTML:
<div id="splash"> Splash Screen contents (image, text, advert etc.) <div id="btCloseSplash">close now</div> </div>
The CSS:
#splash {
position: absolute;
z-index: 9991;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #FFF;
text-align:center;
display:none; /*hide it incase the user has javascript disabled*/
color:#000;
}
The MOOTOOLS class
var SplashScreen = new Class({
Implements: Options,
options: {
'delay':5000 ,
'showOnce':true
},
initialize: function(element, options){
this.setOptions(options);
this.splash=document.id(element);
if(this.options.showOnce){
// check cookie to see if splash has been shown in this session
var splashCookie = Cookie.read('showSplashCookie') || 'yes';
if(splashCookie=='yes'){
this.showSplash();
Cookie.write('showSplashCookie', 'no');
}
}else{
this.showSplash();
}
},
showSplash:function(){
this.splash.setStyles({
'height':window.getScrollHeight(),
'display':'block',
'opacity':'1'
});
// iframe for ie6 <Bah! Humbug!>
if(Browser.Engine.trident4){
var iframe2 = new Element('iframe',{
styles:{'position':'absolute','width':'120%','height':'120%','top':'-10%','left':'-10%'},
height:'100%',
width:'100%',
frameborder:0
}).setOpacity(0).inject(this.splash,'top');
}
this.closeSplash.delay(this.options.delay, this);
},
closeSplash: function(){
this.splash.fade('out');
}
});
Initiate the Class
window.addEvent('domready', function() {
var splash = new SplashScreen('splash',{'delay':'5000','showOnce':false});
});
Giving the visitor the chance to just get on with it is always a good idea so we can call the closeSplash method like this…
Button to close the Splash Screen
window.addEvent('domready', function() {
var splash = new SplashScreen('splash',{'delay':'5000','showOnce':false});
document.id('btCloseSplash').addEvent('click',function(){
splash.closeSplash();
});
});
Pretty simple stuff really and, as the splash screen is set to display:none in the css, it will only be shown if the browser has Javascript activated.
I have also thrown a cookie in there which can be set to be used or not by an “option” so that the Splash Screen will only be shown once per session.
Now, should I make this my first addition to the Mootools Forge….?
Cool stuff.
I got a usability suggestion for you: You could make the Demo-Button stand out more. Would have not noticed it if i didn’t expect to find one here.
Hi,
Your splash looks great! You say it is not good for SEO. I thought the thing search engines did not like about splash pages was that they often redirect to another page and as such were regarded as spam-sites which became de-indexed as a resut.
But your solution has all code in the same page so why would your mootools-solution above not be SEO-friendly?
Or is there something else that search engines hate about splash screens that would include the one above as well?
Thanks!
Hi, thanks for your comments.
By saying that splash screens are not good for SEO I was referring to the “traditional” ones which place a page, often created in flash, before the content.
The problem being that the search engines find them, find no content, and move on.
That was the reason why I did this little script for a client. As the screen is initiated by javascript, the search engines never see it (other than any text content it might contain) so it doesn’t interfere with the SEO potential of the page.
Hello again, thanks for replying so fast.
Is it possible to have the splash screen fade in over a couple of seconds, rather than being visible from scratch? I am trying to change the display:none and use “fade in” but my javascript knowledge is not very good so it does not work…
Thanks!
For some strange reason I can’t connect to my ftp at the moment.
However this should work for a simple fade in:
Replace these lines (22 to 26 in my demo code above):
this.splash.setStyles({
‘height’:window.getScrollHeight(),
‘display’:’block’,
‘opacity’:’1′
});
with this:
this.splash.setStyles({
‘height’:window.getScrollHeight(),
‘display’:’block’
}).fade(‘in’);
You will notice that I haven’t defined a fade in time, just used the default one that mootools provides.
To alter this you will need to use the complete mootools fx.tween() function to define the options.
Chris
Hi, thanks again.
I did not work but I found out why… It needs to set ‘opacity’:’0′ when going display:block otherwise it shows up instantly.
I guess now alls I have to do is to create another div with just background color that can block out the main content all the time (of course it got visible during the initial fade in (hadn’t thought about that)).
Ciao!
Hi there,
Great and very useful post sir! I wanna use your little hack for my site where I need to display sort of verification age splash page. The only problem I can see with your splash script is that it automatically fades out after 5sec.
Can I turn it off somehow? So after someone hits my site they will presented with a splash with 2 buttons(Yes I am over 18 or No) and it won’t disappear after 5sec . I want this splash to stay there as long as none of the options are clicked. Is it possible?
Thanks!
Hi there,
To remove the auto-close feature of the spashscreen you just need to remove this line from the js file (line 64):
this.closeSplash.delay(this.options.delay, this);
You can then close the splash screen by calling the public function “closeSplash” once your form has is submitted.
Chris
Demo is broken. JS with Splash Screen is missing.
oppps, sorry about that.
I was just trying something for @popujax and forgot to put it back 🙁
Fixed now.
Chris
wow! what can i say sir. It works like a charm. A bit strange though as I am pretty sure I removed this line before when I was playing with this script. Anyway thanks a lot for your help sir and see you in the internets!
Cheers Chris, looks nice 🙂 Even in Opera.
Is it possible to trigger the fade out x seconds after a video has played?
Hi,
If you are able to detect when the movie has finished, I don’t see why not.
You just need to call the public function closeSplash() once the video has ended.
However, I am not sure how you would be able to detect the end of the video…
hey chris, nice work! I was wondering if there is a way to reset the cookie after a period of time.
Hi,
You can set the duration of the cookie by modifying the actual Mootools Class (I should possibly make this an option)
Find this line:
Cookie.write(‘showSplashCookie’, ‘no’)
and change it to this:
Cookie.write(‘showSplashCookie’, ‘no’, {duration: 1})
Where “1” is the number of days. If you don’t set the duration (as per the default) the cookie should only last the length of the browser session.
Hi Chris,
Just wanted to extend my thanks for sving me hours of work – this is exactly what I was looking for for a project I’m working on at the moment!
Thanks again!
Waseem
Great work and thanks for sharing! It works like a charm… 🙂
Jayman
Nice script Chris, thanks for sharing 🙂
I got one question though: is there a way to set the splash screen to be shown only ONE time per session (I think Apple did it on their Beatles homepage)? I want to use on my website but I don’t want to bother visitors with the splash appearing everytime they click home.
Thanks and a Happy 2011!! =)
Hi, thanks for the comments.
This little script already has this ability built in.
The class option “showOnce” is designed specifically for this purpose.
In fact, in the class it defaults to “true” so infact you don’t need do anything for the splash screen to work this way.
Note – I have deactivated it for the demo so that users can test it
Thanks once again Chris 🙂
Hello Chris,
This could is what I am looking for … would you help me to know where to put this code in a wordpress site.
Did you ever make this a plugin?
Hi,
I’m afraid that I don’t work with WordPress so I am not able to help you with how to implement this within WordPress.
Sorry 🙁
Chris
Hi,
This code is not working for Chrome. Can you please confirm what are the browsers this code will work. Thank you.
Hi,
I have tested this in Chrome and have had no problems.
Are you using any other JavaScript code?
Chris
Hi,
Really great splash screen. I’m getting there with HTLM / CSS so branching into the more dynamic stuff and this was excellent.
One question, is there a way to make the splash screen instantly load on the page, as there’s a 0.5 / 1 second gap before fade in?
Thanks!
Hi,
In the js file try changing this line (ln 50):
}).fade('in');to this:
}).fade('hide');Chris
Hi Chris,
Thanks for responding so quick. Thanks for the line 50 change – haven’t implemented yet, haven’t got my laptop with me at the moment, but will give that a try.
Yes there are some other JavaScript codes on that page, might that be a factor in causing a slight delay (0.5 seconds)?
Thanks again, much appreciated.
Hi Chris,
I changed the JS line, as you suggested, via my host. It doesn’t seemed to have worked 🙁
The splash screen links in the ‘head’ of my website are at the bottom (below other JS) might this be causing the lag?