View Full Version : Accessible Splash page

07-03-2006, 09:16 PM
so, im making this site for dude, and he REALLY wants a splash page, despite my better design advice.

The way im attempting to do this is by adding some JS on the index page that would perhaps fade out the content or block it out and show a little animated graphic or flash file on top. (hopefully similar function to LightBoxJS (http://www.huddletogether.com/projects/lightbox2/))

I think it should write a cookie denoting that it had been played once already, then when returning to index during normal navigation it wouldnt play again.

Does this sound like a reasonable compromise/plan-of-action?
Any pointers toward the right direction?
(am farmilliar with http://www.dynamicdrive.com/dynamicindex3/dynamicsplash.htm which seems bad because it incorporates a redirect...)

I did find this (on cookies and redirection) (http://codingforums.com/showthread.php?t=72933) which seeems applicable to some extent.

Just wondered if anyone could weight-in and point me in the right direction.
Thanks in advance!

07-03-2006, 09:42 PM
Well, if browsers across the board supported CSS opacity and alpha-blending I'd recommend doing that. You could try a browser detect (shudder) so you can get that effect.

The cookie idea seems fine to me.

The one thing you want to look out for is to check for people not using javascript. You don't want the splash screen permanently in those people's faces.

07-03-2006, 09:50 PM
There is no such thing as an accessible splash page. The only reason the accessibility experts have downgraded accessibility issues with splash pages is that almost no one uses them any more. Trying to set up any means of bypassing the redisplay of the splash page would have to be done server side since Javascript also has accessibility issues when used for required rather than enhancement processing.

Most people treat a splash page as a "Go Away - Visitors are not welcome on this site" message anyway so there shouldn't be anyone coming back to the spash page for the second time anyway.

07-03-2006, 09:58 PM
Well, wait a minute, why not?

If he had a div that was style to be hidden by default, and then used javascript to display it, then you have a splash that adds to the page but isn't a requirement. Or perhaps I'm misinterpreting the meaning of your comment. Perhaps you mean you can't have a required AND accessible splash, which is true at this point in technology. But if you have an enhancement splash, I think that could be done accessibly.

07-03-2006, 10:00 PM
I understand that splash pages are bad.
I don't want it on my site, and i told dude that it was a bad idea.

reguardless, some poeple jsut dont listen, and want the flash annoying site anyway.... (you should of heard me trying to talk him out of animation head to toe...)

But, yes, I suppose Acessible is not the best choice of words... perhpas slightly less obtrusive?

Would it be better to test url referers on the php side?
Hmmm... ne more insight would be GREATLY Appreciated (especially on implementation.)

07-03-2006, 10:45 PM
Make the splash page hidden in a div by default and then make it display using JS. One other possiblity would make an index page, this page will redirect the user using JS to the splash page which would be named like index2.html. Put a meta refresh in the head tags of the index page which will redirect to the main page. The javascript I think might run before the meta. I just tested this in Firefox and the javascript does run before the meta refresh. It doesn't seem to matter where the meta refresh is located.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="refresh" content="0;http://www.yahoo.com" />
<script type="text/javascript">
window.location = 'http://www.google.com';


07-03-2006, 11:50 PM
Ya, i didnt like the idea of a redirect, cause id rather have content no the top level, i dont like the idea of having to code links "home" to something like index2, and other things seems bad about it also....

I wanted it to be "not required". I wasnt planning on it having ANY "REAL" functionality.... other than to satisfy dudes want for a flashy intro type thing.

I just have to figure out how to add a div if JS is enabled and images and css are enabled, and then take it away after clicking or time limit, and then add a cookie if it was done already.... and not do it if the cookie is there...

im lookin into it right now, but my JS is pretty newb-ish and rusty, so itll prolly take me a min. ... any examples would be loved, of course....

(thnx fr the feedback thus far.)

07-04-2006, 06:26 AM
Use the following Javascript in the head of your page:

<script type="text/javascript">
function init() {
document.getElementById('annoyingSplash').style.display = 'block';
setTimeout(function() {document.getElementById('annoyingSplash').style.display = 'none';}, 10000);
window.onload = init;

and use the following around the splash content:

<div id="annoyingSplash" style="display:none">
splash page content goes here

Just change the 10000 to 1000 times as many seconds as you want the content to appear for. It will appear when the page finishes loading and disappear again that many milliseconds later (10 seconds with my example code).

07-04-2006, 08:21 AM
Thanks so much!
that REALLY helps... i think i'll try to tweak it a bit for a tad more "unobtrusive" functionality... again, thanks!

i think its reasonably hilarious that nay-sayer in my endeavour actually currently HAS IMPLEMENTED an incredibly simlar function on their own site! ...fun fun, thanks for the hard time, tho... made me read up on it more... always appreciate being forced to rtfm!)