Thursday, June 12, 2014
Hour of the Blink
Blog Entry #323
Toward the end of the Scripts that Display Text collection there's another blink-themed script, "Blinking Greetings", so why don't we do that one today? Per its title, the Blinking Greetings script displays to the user a blinking greeting, more specifically, it
(a) loads a time-appropriate string into a blink element,
(b) appends to the
<blink>ing string a non-blinking " and WELCOME to xyz HomePage!!" string, (c) formats (
<center>s, sizes, italicizes, and bolds) the resulting string, and(d) writes the formatted string to the page.
The Blinking Greetings script was authored by Effie Ram at some point during the 1996-1998 period.
The script's demo page is here - you'll see the greeting but its time-appropriate part won't blink at you unless you're using an older version of Firefox or Opera - and the script itself is posted here.
Greeting assembly
The Blinking Greetings script comprises a single script element that commingles structure, presentation, and behavior:
<script language="javascript"><!--
var mess1 = "";
var outmess = " and WELCOME to xyz HomePage!!";
document.write("<center><font size='+1'><i><b>");
day = new Date( );
hr = day.getHours( );
if ((hr >= 0) && (hr <= 4)) mess1 = "Good Night...";
if ((hr >= 4) && (hr < 12)) mess1 = "Good Morning";
if ((hr >= 12) && (hr <= 17)) mess1 = "Good Afternoon";
if ((hr >= 17) && (hr <= 23)) mess1 = "Good Evening";
document.write("<blink>");
document.write(mess1);
document.write("</blink>");
document.write(outmess);
document.write("</b></i></font></center>");
//---></script>The script first initializes a mess1 variable to an empty string and an outmess variable to the aforementioned and WELCOME to xyz HomePage!! string. Subsequently the script gets the current
Date( ) and looks at its getHours( ) return (hr).• If hr is in the range 0 to 4 (inclusive) - time-wise this would be 00:00:00 to 04:59:59.999 - then the first if conditional sets mess1 to Good Night....
• If hr is in the range 4 (inclusive) to 12 (exclusive) - 04:00:00 to 11:59:59.999, time-wise - then the second if conditional sets mess1 to Good Morning.
• If hr is in the range 12 to 17 (inclusive) - 12:00:00 to 17:59:59.999, time-wise - then the third if conditional sets mess1 to Good Afternoon.
• If hr is in the range 17 to 23 (inclusive) - 17:00:00 to 23:59:59.999, time-wise - then the fourth if conditional sets mess1 to Good Evening.
The mess1 text is wrapped in a blink element, the blink element is followed by the outmess text, and the
<blink>mess1</blink>outmess message is marked up and outputted as detailed above. Sehr einfach, ja?Ciao, x
Structurally, it is simple enough to put the mess1 text in a span and the
<span>mess1</span>outmess content in a div or span. Presentationally, it is simple enough to move the <center>/<font>/<i>/<b> formatting to a style sheet. But what about the blinking part? The browsers that do not support the blink element - IE, Google Chrome, Safari, recent versions of Firefox and Opera - similarly do not support the blink element's stringObject.blink( ) JavaScript equivalent and text-decoration:blink; CSS equivalent. If you are determined to foist some blinking text on one and all, what are you gonna do?Fortuitously, the Implementation section of Wikipedia's "Blink element" entry sports a JavaScript snippet that's just what we're looking for. The snippet's key statement is:
s.style.visibility = (s.style.visibility === "visible") ? "hidden" : "visible";The s variable references a 'blink object', in this case an object representing a
<blink>Text to blink here</blink> element. The statement's ?: condition reads s's CSS visibility and tests if it's visible:(1) if so, then s's visibility is turned off by setting it to hidden;
(2) if not, then s's visibility is turned on by setting it to visible.
The s object blinks if its visibility is repeatedly toggled in this way - this is pretty close to what we were doing with the Proclaim It! script in the previous post, you may recall. BTW, there's no need to use the === strict equality operator in the ?: condition: the == operator will do.
If s's visibility is not set via an inline style attribute
<blink style="visibility:visible;">Text to blink here</blink>or JavaScriptically
s.style.visibility = "visible";
... visibility-testing code ...then
s.style.visibility will evaluate to an empty string the very first time we read it: in this case the ?: condition returns false (even though s is visible) and visible is (re-)assigned to s.style.visibility so that s can be invisibilized next time.The blinkee
The Wikipedia script will blink any renderable content - text, an image, a form, a table, whatever - whereas the original blink element only blinks text. (I'd have more to say about the blink element's content model if the blink element were not 'on the way out'.)
A blinks array
The Wikipedia script gets the
<blink>Text to blink here</blink> element via a var blinks = document.getElementsByTagName("blink"); operation and is set up to handle any number of blink elements. IMO, however, one blinking element is controversial enough: don't overdo it.An alternative
The code presented in the Losing weight section of the previous post can also be used to blink a single string or other unit of content: just set string2 to an empty string and you're good to go.
I'll wait
The visibility-testing code is part of a recursive blink( ) function that calls itself every 1000 milliseconds and is initially triggered by a DOMContentLoaded event or a load event:
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;I was unfamiliar with the DOMContentLoaded event so I looked it up: it
fires when a document has been completely loaded and parsed, without waiting for style sheets, images, and subframes to finish loading,quoting Mozilla. Are we really in that much of a rush to get the blinking action under way? I'm not. If we don't have any other functions 'listening' for a load event, then a
window.onload = function ( ) { blinkID = window.setInterval(blink, 1000); }trigger is good enough for our purposes, wouldn't you say?
What time of day was it again?
The demo below blends the original Blinking Greetings script, the Wikipedia script, and my Losing weight code. Click the button to replace the beginning ellipsis with a blinking, time-appropriate mess1 string. To stop the blinking, click the button.
... and WELCOME to xyz HomePage!!
- posted by A. Peak @ 1:35 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)