Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Creating a splash page over my HTML

irishgrizzly

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
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
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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;
 
irishgrizzly

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
Thanks angelwatt I wasn't thinking of using anything other then flash. But something like this might be a better alternative.
 
irishgrizzly

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
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>
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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_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() {
  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", fx, false);
  } 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.
 
irishgrizzly

irishgrizzly

macrumors 65816
Original poster
May 15, 2006
1,461
2
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?
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
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');
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom