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

Availability Calendar.