Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Integrating splash page on my site

Featured Replies

I've got this code that I'd like to use for a splash page. I like that I can use this instead of flash and that I can keep the code in my index.html page (not having to use two separate pages). I'm very green to web design, but I am learning lots by stumbling about :/

 

head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function SplashBeGone() {
 document.getElementById('splash').style.display = 'none';
}
function Init() {
 document.getElementById('splash').style.display = 'block';
 setTimeout(function(){ SplashBeGone(); }, 8000);
}
window.onload = Init;  
</script>

<style type="text/css">
#splash {
position: absolute;
display: none;
top: 0; left: 0;
width: 100%;
height: 100%;
text-align: center;
background: #ff0;
opacity: .8;
}
</style>
</head>

<body>
Site
<div id="splash">
 <p>splash</p>
 <p><a href="#" onclick="SplashBeGone(); return false;">skip</a></p>
</div>
</body>
</html>

 

However, when I try and place it into my existing code it fails. Here's the code I have to work with. (There's alot of it to work the menus). If I take the onLoad= out from my <body> tag it works again, so I'm guessing there a conflict there.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome</title>
<meta name="description" content="SNIP">
<meta name="keywords" content="SNIP">
<meta name="robots" content="all">
<meta name="robots" content="index,follow">
<meta name="language" content="English">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--
function mmLoadMenus() {
 if (window.mm_menu_0515130918_0) return;
       window.mm_menu_0515130918_0 = new Menu("root",103,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);  mm_menu_0515130918_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515130918_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515130918_0.addMenuItem("SNIP","location='SNIP'");
  mm_menu_0515130918_0.hideOnMouseOut=true;
  mm_menu_0515130918_0.bgColor='#FFFFFF';
  mm_menu_0515130918_0.menuBorder=1;
  mm_menu_0515130918_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0515130918_0.menuBorderBgColor='#FFFFFF';
window.mm_menu_0515131415_0 = new Menu("root",174,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);
 mm_menu_0515131415_0.addMenuItem("SNIP","location='SNIP'");  mm_menu_0515131415_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515131415_0.addMenuItem("SNIP","location='SNIP'");
  mm_menu_0515131415_0.hideOnMouseOut=true;
  mm_menu_0515131415_0.bgColor='#FFFFFF';
  mm_menu_0515131415_0.menuBorder=1;
  mm_menu_0515131415_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0515131415_0.menuBorderBgColor='#FFFFFF';
window.mm_menu_0515131628_0 = new Menu("root",156,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);  mm_menu_0515131628_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515131628_0.addMenuItem("SNIP","location='SNIP'");
  mm_menu_0515131628_0.hideOnMouseOut=true;
  mm_menu_0515131628_0.bgColor='#FFFFFF';
  mm_menu_0515131628_0.menuBorder=1;
  mm_menu_0515131628_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0515131628_0.menuBorderBgColor='#FFFFFF';
   window.mm_menu_0515132019_0 = new Menu("root",143,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);
 mm_menu_0515132019_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515132019_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515132019_0.addMenuItem("SNIP","location='SNIP'");
 mm_menu_0515132019_0.addMenuItem("SNIP","location='SNIP'");
  mm_menu_0515132019_0.hideOnMouseOut=true;
  mm_menu_0515132019_0.bgColor='#FFFFFF';
  mm_menu_0515132019_0.menuBorder=1;
  mm_menu_0515132019_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0515132019_0.menuBorderBgColor='#FFFFFF';          window.mm_menu_0515133506_0 = new Menu("root",125,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);
 mm_menu_0515133506_0.addMenuItem("SNIP","location='SNIP'");    mm_menu_0515133506_0.addMenuItem("SNIP","MM_openBrWindow('SNIP')");
mm_menu_0515133506_0.hideOnMouseOut=true;
  mm_menu_0515133506_0.bgColor='#FFFFFF';
  mm_menu_0515133506_0.menuBorder=1;
  mm_menu_0515133506_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0515133506_0.menuBorderBgColor='#FFFFFF';    window.mm_menu_0827101329_0 = new Menu("root",104,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);
 mm_menu_0827101329_0.addMenuItem("SNIP","location='html/SNIP'");
 mm_menu_0827101329_0.addMenuItem("SNIP","location='html/SNIP'");
 mm_menu_0827101329_0.addMenuItem("SNIP","location='html/SNIP'");
  mm_menu_0827101329_0.hideOnMouseOut=true;
  mm_menu_0827101329_0.bgColor='#FFFFFF';
  mm_menu_0827101329_0.menuBorder=1;
  mm_menu_0827101329_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0827101329_0.menuBorderBgColor='#FFFFFF';                  window.mm_menu_0506113122_0 = new Menu("root",109,18,"Verdana, Arial, Helvetica, sans-serif",12,"#CC0000","#990000","#FFFFFF","#FFFFFF","left","middle",3,0,500,-5,7,true,true,true,12,true,true);
 mm_menu_0506113122_0.addMenuItem("SNIP","window.open('http://SNIP', '_blank');");
  mm_menu_0506113122_0.hideOnMouseOut=true;
  mm_menu_0506113122_0.bgColor='#FFFFFF';
  mm_menu_0506113122_0.menuBorder=1;
  mm_menu_0506113122_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0506113122_0.menuBorderBgColor='#FFFFFF';

mm_menu_0506113122_0.writeMenus();
} // mmLoadMenus()

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 MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
 window.open(theURL,winName,features);
}
//-->
</script>
<script language="JavaScript" src="html/mm_menu.js"></script>
</head>

<body bgcolor="#CCCCCC" background="images/centra_template/background_tile.gif" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" onLoad="MM_preloadImages('images/SNIP.gif')">
The rest of the site
<body>

That's a LOT of messy code for the sake of a splash screen, I'd just use two separate pages to be honest. You should only have one <body> tag though.

  • Author

Thanks for the reply. Yeah, I know the codes messy, but I've inherited from another designer. I'm put off having it on a page before it as there'd be a delay when the user waits for the main page to load. The splash page is based on the idea of a light switch going on – so the concept would fail if this was the case.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.