Thursday, June 05, 2014
Give Us a Blink
Blog Entry #322
In today's post we'll go through the "Proclaim It!" script that, with respect to the Scripts that Display Text timeline, precedes the "Flashing Warning" script discussed in the previous post. Like its successor, the Proclaim It! script works with the layer element/object and was authored by Greg Bland in 1998.
You may be familiar with the blink( ) method of the String object, which is poorly supported and whose
<blink> HTML reflection will be obsoleted by HTML5. The Proclaim It! script slowly blinks ('proclaims') two alternating text strings at the user. To see the script's effect, click the button below. To stop the blinking, click the button.Insanity is doing the same thing over and over again...
In the original script (as opposed to my demo, which does not make use of layers), the blinking is achieved not via the blink( ) method but by manipulating the visibility of layers containing the text strings.
The Proclaim It! script's demo page is here - you'll see Greg's two text strings but they won't blink at you unless you're using Netscape 4.x. The script itself is posted here.
Layers, fonts, and centers
The alternating text strings are housed in separate layer elements that, via their left and top attributes, have the same position - i.e., the second-in-source-order layer is stacked on top of the first-in-source-order layer - more specifically, they are both anchored to the origin of the document body. Each text string is sized and colored by a font element and is horizontally centered in the document body by a center element. The display is separated from the rest of the page by a spacer element. Do I really need to put this HTML in front of you? Oh, why not:
<layer name="humble" left="0" top="0" bgcolor="ffffff" visibilty="show">
<font size="7" font color="800080"><center>
It is hard to be humble...........
</font></center></layer>
<layer name="dabomb" left="0" top="0" bgcolor="ffffff" visibility="hide">
<font size="7" font color="800080"><center>
When You are Da BoMB.
</font></center></layer>
<spacer type="vertical" size="60">The preceding code contains several defects that in practice don't cause any problems when I run the script with Netscape Communicator 4.61 in the SheepShaver environment.
• The visibilty attribute name in the start-tag of the humble
<layer> is misspelled - not a big deal in this case as the browser ignores the visibilty attribute, the humble layer inherits the visibility of its <body> parent, and the It is hard to be humble........... string is written out per the author's intention.• A stray
font keyword appears in each font element start-tag; the extra fonts are also ignored by the browser.• The font and center elements are improperly nested.
• The layer and font bgcolor values should be prefaced by # marks.
Not that we want to be holding onto this markup, of course: we'll exchange it for a single
<div> at the end of the post.The visibility cycle
The blinking action is carried out by a recursive chng( ) function and is directed by the value of an x variable.
<script>
x = 1;function chng( ) {
if (x == 1) {
document.humble.visibility = "hide";
document.dabomb.visibility = "show";
x = 3; }
if (x == 2) {
document.humble.visibility = "show";
document.dabomb.visibility = "hide";
x = 4; }
if (x == 4) { x = 1; }
if (x == 3) { x = 2; }
window.setTimeout("chng( );", 4000); }</script>
<body onload="chng( );" bgcolor="ffffff">The script initializes x to 1 before the page loads and calls chng( ) when the page has loaded. The
if (x == 1) conditional immediately turns off the humble layer by setting its visibility to hide and turns on the dabomb layer by setting its visibility to show and then sets x to 3. Subsequently the if (x == 3) conditional adjusts x to 2.Four seconds later chng( ) is re-called. The
if (x == 2) conditional turns on the humble layer, turns off the dabomb layer, and sets x to 4. The if (x == 4) conditional resets x to 1, chng( ) is re-called after another four seconds, and so on.Losing weight
The Proclaim It! script works well as far as it goes but does contain some excess baggage that we ought to clear out. Why use two layer elements when we can cycle the two text strings in and out of the same container? Why use separate conditionals to display the strings? What's with the 3 and 4 x values? Here's how we may deal with these issues and otherwise update the script:
body { background-color: white; }
#proclaimDiv { background-color: white; color: purple; font-size: 48px; text-align: center; }
...
var x = 1;
var string1 = "Insanity is doing the same thing over and over again...";
var string2 = "...and expecting a different result.";function chng( ) {
document.getElementById("proclaimDiv").textContent = (x == 1) ? string2 : string1;
x = (x == 1) ? 2 : 1; }window.onload = function ( ) { window.setInterval(chng, 2000); }
...
<body>
<div id="proclaimDiv">Insanity is doing the same thing over and over again...</div>The center element is a type of div element, so you should replace the humble layer with a div if you want to hold onto the block-level, width=100% rendering of the original display; alternatively, if you want an inline display then you should use a span to house the string1 string (as I do for my demo).
We know from prior work that a
size="7" font element attribute gives a 48px font-size.The related chng( ) conditionals are easily merged via the ?: conditional operator, which is documented here in the Mozilla JavaScript Reference. The parentheses surrounding the ?: conditions are there for the purpose of readability, and can be removed if desired as the == equality operator takes precedence over the ?: operator.
My string1/string2 strings are #PCDATA text, so I load them into the proclaimDiv div via the W3C-valid textContent attribute of the Core DOM's Node interface, which is detailed by Mozilla here; if the strings contained any markup I'd use the nonstandard innerHTML property for this purpose.
Per my preference, I use a window.setInterval( ) command vis-à-vis window.setTimeout( ) to (re-)call the chng( ) function; I recommend a 2000-millisecond delay if a 4000-millisecond delay is too long for your taste. Regarding the very first string1 → string2 string transition, note that my code keeps the string1 string around for two seconds, whereas the original code immediately replaces the string1 string with the string2 string, as noted earlier.
Lastly and least, you can put a 60px vertical spacer between the proclaimDiv div and whatever comes after it by giving the latter a
position:relative;top:60px; styling.- posted by A. Peak @ 1:23 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)