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.

See Demo

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

Post to Twitter

chris@cbolson.com

There are 29 comments in this article:

  1. 3/02/2010derschreckliche says:

    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.

  2. 8/03/2010Peter says:

    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!

  3. 8/03/2010Chris says:

    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.

  4. 8/03/2010Peter says:

    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!

  5. 8/03/2010Chris says:

    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

  6. 8/03/2010Peter says:

    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!

  7. 25/03/2010popujax says:

    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!

  8. 25/03/2010Chris says:

    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

  9. 25/03/2010Juraj says:

    Demo is broken. JS with Splash Screen is missing.

  10. 25/03/2010Chris says:

    oppps, sorry about that.
    I was just trying something for @popujax and forgot to put it back :(

    Fixed now.
    Chris

  11. 25/03/2010popujax says:

    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!

  12. 29/03/2010Juraj says:

    Cheers Chris, looks nice :) Even in Opera.

  13. 6/05/2010jeremy says:

    Is it possible to trigger the fade out x seconds after a video has played?

  14. 6/05/2010Chris says:

    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…

  15. 25/08/2010robb says:

    hey chris, nice work! I was wondering if there is a way to reset the cookie after a period of time.

  16. 25/08/2010Chris says:

    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.

  17. 7/12/2010Waseem Sadiq says:

    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

  18. 11/12/2010Jayman says:

    Great work and thanks for sharing! It works like a charm… :)

    Jayman

  19. 29/12/2010Christian Sisson says:

    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!! =)

  20. 29/12/2010Chris says:

    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

  21. 31/12/2010Christian Sisson says:

    Thanks once again Chris :)

  22. 21/01/2012tyler says:

    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?

  23. 21/01/2012Chris says:

    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

  24. 1/11/2012Hari says:

    Hi,

    This code is not working for Chrome. Can you please confirm what are the browsers this code will work. Thank you.

  25. 15/11/2012Lewis says:

    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!

  26. 15/11/2012Chris says:

    Hi,
    In the js file try changing this line (ln 50):
    }).fade('in');
    to this:
    }).fade('hide');
    Chris

  27. 15/11/2012Chris says:

    Hi,
    I have tested this in Chrome and have had no problems.
    Are you using any other JavaScript code?

    Chris

  28. 15/11/2012Lewis says:

    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.

  29. 15/11/2012Lewis says:

    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?

Write a comment: