Display-Once Notice
A display-once notice is displayed once when the site visitor arrives at the website the first time. On page reloads and upon visiting other pages with the same browser, the notice doesn't display again.
Until the browser is closed and exited.
The cookie set with the display-once notice is a volatile cookie. When the browser is relaunched after being completely exited from memory, the cookie is no longer there.
This display-once notice was developed for the Willmaster website after the server move. PHP, MySQL, and Perl at the new server were all the latest versions. The latest version of PHP, especially, introduced code-breaking changes to the software we made for ourselves over the years.
A bit of wisdom gained:
Update to the latest stable version of important software when you can.
Waiting until suddenly it all needs to be done at once is not wise.
A notice was made for the website to alert site visitors that we are diligently working to fix all that broke. When the site visitor taps the "Dismiss" link, a cookie is set so the notice won't appear on subsequent page loads.
For a short while, the willmaster.com website itself is a live example of how the display-once notice works.
This article describes how to make such a display-once notice. Keep it around in case you need it sometime in the future.
Implementing the Notice
Here is source code to show how the display-once notice is implemented at the Willmaster.com website. Notes follow.
<div id="message-holder" style="display:none; font-size:1rem; position:absolute; left:0; right:0; top:1in;"> <div id="message-div" style="position:relative; max-width:550px; margin:0 auto;border:3px solid #ccc; background-color:white; padding:2em 1em; border-radius:1em;"> <div style="position:absolute; top:2px; right:2px;"> <a href="javascript:CloseMessageGood();">(DISMISS)</a> </div> <div style="display:table; margin:0 auto;"> {{MESSAGE}} </div> <div style="position:absolute; bottom:2px; left:2px;"> <a href="javascript:CloseMessageGood();">(DISMISS)</a> </div> </div><!-- id="message-div" --> </div><!-- id="message-holder" --> <script> if( ! document.cookie.match(/temporaryMessageCookie\=closed/) ) { document.getElementById("message-holder").style.display="block"; } function CloseMessageGood() { document.getElementById("message-holder").style.display="none"; document.cookie = "temporaryMessageCookie=closed; path=/; secure"; } </script>
Notes:
To accommodate various screen widths, the notice message is in a div that is inside another div.
The outside div (id="message-holder") is coded for the entire screen width. It is absolutely positioned to correctly place everything it holds.
The message div (id="message-div") is coded for a maximum width that makes the message look good. It is centered within the outer div. The message div will shrink within browsers narrower than the maximum width. (You may change the max-width:550px; and other CSS to accomodate your preferred style.)
The {{MESSAGE}} placeholder is for your message to your site visitiors.
The message div has "Dismiss" links. Tapping one sets a cookie that prevents the message from appearing again.
Implementing a JavaScript Alert Box Notice
If you prefer to omit all that HTML message coding and deliver your message with a JavaScript alert box, this is how it can be done. Notes follow.
<script>
if( ! document.cookie.match(/temporaryMessageCookiePS\=showed/) )
{
alert("{{MESSAGE}}");
}
document.cookie = "temporaryMessageCookiePS=showed; path=/; secure";
</script>
Notes for the JavaScript Alert Box Notice:
When you replace the {{MESSAGE}} placeholder with your own message, any double quotes (") must be escaped. Escaping a character consists of preceding the character with a backward slash (\). An escaped double quote looks like this: \"
When the alert box appears, a cookie is set so the alert doesn't happen again for that browser.
Because the browser decides where to place the alert box with the message, you don't need to specify it.
When the alert box has appeared once, a cookie is set to prevent it from appearing again.
Reason
Because it was realized that it would take some time to fix the many issues related to software versions, the display-once notice was developed and deployed.
The display-once notice will be published on the Willmaster website until it appears that I've fixed all breaks.
(This article first appeared in Possibilities newsletter.)
Will Bontrager
