Creating a splash page over my HTML

Discussion in 'Web Design and Development' started by irishgrizzly, Sep 23, 2009.

  1. irishgrizzly macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #1
    A client has asked for a splash page before their home page (can't talk them out of it).

    I'd like to place it in the code of the index page – it needs to cover the page and I'll have it disappear on button click or after 5 secs (whatever comes sooner).

    Is there anything I should look out for? For instance – how would I ensure to cover the whole display across all resolutions? Does anyone know of examples of anything similar?

    Thanks
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Here's some quick code. You can change the colors and opacity. They were just quick pieces of code to make things apparent.

    Have the splash div just inside the body tag, as in not inside other content. The skip link calls some JavaScript to make it go away sooner.
    HTML:
    <body>
    ...
    <div id="splash">
      <p>Splash</p>
      <p><a href="#" onclick="SplashBeGone(); return false;">Skip</a></p>
    </div>
    </body>
    Some initial CSS making sure the splash is not displayed yet as visitors without JavaScript enabled won't be able to get past the splash.
    Code:
    #splash {
     position: absolute;
     display: none;
     top: 0; left: 0;
     width: 100%;
     height: 100%;
     text-align: center;
     background: #ff0;
     opacity: .8;
    }
    Some JavaScript to display the splash content, then make it go away after 5000 milliseconds (5 seconds).
    PHP:
    function SplashBeGone() {
      
    document.getElementById('splash').style.display 'none';
    }
    function 
    Init() {
      
    document.getElementById('splash').style.display 'block';
      
    setTimeout(function(){ SplashBeGone(); }, 5000);
    }
    window.onload Init;
     
  3. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #3
    Thanks angelwatt I wasn't thinking of using anything other then flash. But something like this might be a better alternative.
     
  4. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #4
    This works nicely, but I think I'm getting a conflict when used in alongside my image preload script. I think it might be due to the "onload=" . The splash won't appear when the preload script is left in.

    I've got this inside my opening <body> tag;

    Code:
    <body bgcolor="#CCCCCC" onLoad="MM_preloadImages('images/example.gif')">
    And this in my <head>

    Code:
    <script language="JavaScript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function SplashBeGone() {
      document.getElementById('splash').style.display = 'none';
    }
    function Init() {
      document.getElementById('splash').style.display = 'block';
      setTimeout(function(){ SplashBeGone(); }, 5000);
    }
    window.onload = Init;
    </script>
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I have a function for append to the onload. Here's an updated script block that should work. Using this you can remove the onload attribute from the body tag.

    PHP:
    <script type="text/javascript">
    function 
    MM_preloadImages() { //v3.0
      
    var d=document; if(d.images){ if(!d.MM_pd.MM_p=new Array();
        var 
    i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0i<a.lengthi++)
        if (
    a[i].indexOf("#")!=0){ d.MM_p[j]=new Imaged.MM_p[j++].src=a[i];}}
    }
    function 
    SplashBeGone() {
      
    document.getElementById('splash').style.display 'none';
    }
    function 
    Init() {
      
    MM_preloadImages('images/example.gif');
      
    document.getElementById('splash').style.display 'block';
      
    setTimeout(function(){ SplashBeGone(); }, 5000);
    }
    function 
    appendOnLoad(fx) { 
      try { 
    // For browsers that know DOMContentLoaded (FF, Safari, Opera)
        
    document.addEventListener("DOMContentLoaded"fxfalse);
      } catch(
    e) {
        var 
    old window.onload;
        if (
    typeof old != 'function') { window.onload fx; }
        else { 
    window.onload = function() { old(); fx(); } }
      }
    }
    appendOnLoad(Init);
    </script>
    </head>
    <body bgcolor="#CCCCCC">
    Also, for the script tag use,
    HTML:
    <script type="text/JavaScript">
    The language attribute is deprecated now so using the type attribute is better.
     
  6. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006
    #6
    Thanks Anglewatt! I've so much to learn about web design.

    I've put the site up here to test. There's lots of messy code here (I've inherited the site to maintain). I can get the required splash screen effect in Safari/Firefox on mac and Firefox on a PC. But IE 6 & 8 (the two I tried) didn't display the splash. Thankfully they went on to display the rest of the content.

    Is there conflicts in the javascript or is it something else?
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I mentioned getting rid of the onload attribute on the body tag. I think that's overwriting the onload stuff we're initializing. Move the contents of that onload attribute to the Init function. It will just be it's own line.

    PHP:
    function Init() {
      
    document.getElementById('splash').style.display 'block';
      
    setTimeout(function(){ SplashBeGone(); }, 5000);
      
    MM_preloadImages('images/centra_template/roll_over_03.gif','images/centra_template/roll_over_05.gif','images/centra_template/roll_over_07.gif','images/centra_template/roll_over_09.gif','images/centra_template/roll_over_11.gif','images/centra_template/roll_over_13.gif','images/centra_template/roll_over_17.gif','images/centra_template/franchise_roll.gif','images/centra_template/hot_offers_roll.gif','images/centra_template/stores_roll.gif');
    }
     
  8. irishgrizzly thread starter macrumors 65816

    irishgrizzly

    Joined:
    May 15, 2006

Share This Page