help with "once per session" splash page.

awisher

Our company is closing down for lack of funding in a couple of months. Our website is a portal for may of our products and services. Being such, the logs show that people bookmark many different landing pages. I want to add an informational page that every user must read before continuing. I have seen some site that have some sort of js pop-up box (that doesn't get blocked) that users click to close for some duration, however I can't figure out how to do this. I have been trying to get a "splash page" to work with the same idea.
I am open to any suggestions or alternatives.

We run, on this server, IIS, php, perl
I hesitate to change the overall site structure since we have embedded mapping applications that would have to be reconfigured if the URLs changed.

Thanks for any info you can give.

Here is what I have tried, without luck. I am not married to cookies, session js, etc. I just need something that works. :-)

on the splash page:

 <?php
session_start();
setcookie ("no_splash", "", '0');
?>

<html>
<head>
<title>splash page</title>
</head>
<body>
This is a splash page
</body>

and the 'other' pages:

<?php
    session_start(); // this needs to be declared on the top of every page, specially before sending any output to the browser.
if(!isset($_COOKIE['no_splash'])) {
session_write_close();
header('location: http://website/splash.php');
exit();
}

?>

<html>
<head>
<title>not splash</title>
</head>
<body>
This is NOT a splash page
</body>

Aaron

johanafm

You don't need to set cookies.

// before any output
session_start();
// ...
echo '<body>';
if (!isset($_SESSION['splash_shown'])) {
	require 'splash.html';
	$_SESSION['splash_shown'] = 1;
}

As for the splash.html, there are various options. If by popup you mean a new window, then it is impossible to prevent this from being blocked by user settings. Javascripted window.open can be blocked by user. A link or button executing a javascript doing the same thing will never be blocked, unless of course the user has disabled javascript. A link with target="_blank" would open a new window.
But, it is possible to show a div on top of the ordinary content, thus giving pretty much the same impression as a popup.
splash.html

	<div style="position: fixed; width: 100%; text-align: center; top: 100px;">
		<div style="width: 150px; height: 50px; margin: 0px auto; padding: 10px; text-align: left;
			background-color: #FFF;">
			<div>
				Site is closing down
			</div>
			<div style="padding: 10px; text-align: right;">
				<script type="text/javascript">
					function closeSplash(o) {
						var splashDiv = o.parentNode.parentNode.parentNode;
						splashDiv.parentNode.removeChild(splashDiv);
					}
					document.write('<input type="button" onclick="closeSplash" value="Close"/>');
				</script>
				<noscript>
					<a href="">Close</a>
				</noscript>
			</div>
		</div>
	</div>

Nothing fancy, but it will show the "popup" regardless of wether the user has javascript or not. It will also let the user close it, regardless if js is enabled or not. Without script, the page is reloaded and the splash isn't shown again.

To improve appearance, you can give the "popup" a shadow border and a slight transparency with a background image instead of background color.

awisher

That is exactly what I had in mind! Thanks.
I do have one question, I have implemented this as such:


<html>
<head>
<title>Splash test</title>
</head>
<body>
<div style="position: fixed; width: 100%; text-align: center; top: 100px;">
		<div style="width: 150px; height: 50px; margin: 0px auto; padding: 10px; text-align: left;
			background-color: #FFC1C1;">
			<div>
				This is splash content
			</div>
			<div style="padding: 10px; text-align: right;">
				<script type="text/javascript">
					function closeSplash(o) {
						var splashDiv = o.parentNode.parentNode.parentNode;
						splashDiv.parentNode.removeChild(splashDiv);
					}
					document.write('<input type="button" onclick="closeSplash" value="Close"/>');
				</script>
				<noscript>
					<a href="">Close</a>
				</noscript>
			</div>
		</div>
	</div>


</body>
</html>

However, the close button does not seem to work. It just doesn't do anything when clicked, am I missing something?

Aaron

johanafm

Ah yes, it should be onlick="closeSplash(this)" to begin with and also supply the function which is

function closeSplash(o) {
	var div = o.parentNode.parentNode.parentNode;
	div.parentNode.removeChild(div)M
}

awisher

that did it, thanks

Aaron