Bonus Section: Okay, so a little animation won't hurt
March 1st 1998
Above all, it's okay to have a little fun when we work, so I altered the index card application.
I created a Web page easter egg. If you are unfamiliar with this term, an easter egg in the
context of computer applications is a hidden demonstration, usually an animation, that is accessed
through a sequence of events. My egg is a simple animation that hides the "Next Button" and
"Previous Button" navigational blocks, and adds tags to the card stack to use to access
the cards. Animation is used to add the tags.
The function objSetLeft is used to position the tags horizontally.
The animation is created by using the cross-browser functions objGetTop and
objSetTop, to adjust the top position for the tag elements. The positions
are adjusted based on timer events, creating an effect of the index card tags "rising" up
from behind the card stack.
Once the index card tags are shown, the cards can then be accessed by clicking on the
associated tag, rather than using the navigational text.
The complete code for the animation index card application:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Index Card Application - Version 2.0</TITLE>
<STYLE type="text/css">
body { background-color: white; font-family: Arial }
DIV { position:absolute }
H2 { color: red; }
.indexcard { left : 100;
top : 80;
width : 300;
visibility: hidden;
z-index : 3 }
.card { margin-left : 20px;
background-color: white;
font-size : 10pt;
layer-background-color: white;
width : 300;
z-index : 3}
DIV A { text-decoration: none;
color : black;
font-weight : bold}
.tags { top : 90;
visibility: hidden;
width : 80; z-index: 1 }
.names { top : 25;
visibility:hidden;
z-index : 2 }
.nameshref { color : red;
font-weight : 400;
font-size : 10pt }
.diff { color : red;
font-weight : 400 }
</STYLE>
<SCRIPT src="ns4_obj.js" language="javascript1.2">
</SCRIPT>
<SCRIPT src="ie4_obj.js" language="jscript">
</SCRIPT>
<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// global
var cardNumber = 1;
LASTCARD = 5;
// show navigational text, first index card
// position tag elements
function start() {
wdvlObjs["contents1"].objShow();
wdvlObjs["nextbutton"].objShow();
for (var i = 1; i <= 5; i++) {
wdvlObjs["tag" + i].objSetLeft(i * 80);
wdvlObjs["tag" + i].objShow();
wdvlObjs["name" + i].objSetLeft(i * 80 + 15);
}
}
// show card based on which tag clicked
function show_card(cardnum) {
wdvlObjs["contents" + cardNumber].objHide();
cardNumber = cardnum;
wdvlObjs["contents" + cardNumber].objShow();
}
// show card based on using navigational text
// next card
function next_card() {
wdvlObjs["contents" + cardNumber].objHide();
cardNumber++;
wdvlObjs["contents" + cardNumber].objShow();
set_buttons();
}
// show card based on using navigational text
// previous card
function prev_card() {
wdvlObjs["contents" + cardNumber].objHide();
cardNumber=cardNumber - 1;
wdvlObjs["contents" + cardNumber].objShow();
set_buttons();
}
// show/hide navigational buttons
// depending on which card is showing
function set_buttons() {
if (cardNumber > 1)
wdvlObjs["prevbutton"].objShow();
else
wdvlObjs["prevbutton"].objHide();
if (cardNumber < LASTCARD)
wdvlObjs["nextbutton"].objShow();
else
wdvlObjs["nextbutton"].objHide();
}
// globals for animation
MOVEINCR = 7;
LASTCOUNT = 10;
count = 0;
// create tag animation
function move_tags() {
if (count == 0) {
wdvlObjs["nextbutton"].objHide();
wdvlObjs["prevbutton"].objHide();
}
// if animation is not finished
// find current top position and
// decrement it by animation movement amount
if (count < LASTCOUNT) {
var topVal = wdvlObjs["tag1"].objGetTop();
topVal = topVal - MOVEINCR;
for (var i = 1; i <= 5; i++)
wdvlObjs["tag" + i].objSetTop(topVal);
count++;
setTimeout("move_tags()", 100);
}
// show tag text
else
for (i = 1; i <= 5; i++)
wdvlObjs["name" + i].objShow();
}
//-->
</script>
</HEAD>
<BODY onload="wdvlCreateObjects();start()">
<!-- index card background -->
<DIV style="position:absolute;
left : 80;
top : 50;
width : 400;
z-index : 2">
<img src="Card.jpg" width=400>
</DIV>
<!-- index card contents -->
<DIV id="contents1" class="indexcard">
<h2>Adams</h2>
<DIV class="card">
Terry Adams<br>
1234 SomeWhere Lane<br>
SomeTown, Vt. 05458<p>
(802) 555-1212
</DIV>
</DIV>
<DIV id="contents2" class="indexcard">
<h2>Butler</h2>
<DIV class="card">
Sara Butler<br>
P.O.Box 1<br>
Glad Town, Wa. 99141<p>
(206) 555-1212
</DIV>
</DIV>
<DIV id="contents3" class="indexcard">
<h2>Carter</h2>
<DIV class="card">
Joey Carter<br>
18 Nonesuch Lane<br>
Township, OR 98272<p>
(503) 555-1212</DIV>
</DIV>
<DIV id="contents4" class="indexcard">
<h2>Dunard</h2>
<DIV class="card">
Bill Dunard<br>
Box 1.<br>
Anna, WI. 01000<p>
(888) 555-0000
</DIV>
</DIV>
<DIV id="contents5" class="indexcard">
<h2>Jones</h2>
<DIV class="card">
Mark and Helen
<a href="" onclick="move_tags();
return false" class="diff">Jones</a><br>
1600 Penn Ave.<br>
Bigtown, MT. 01000<p>
(501) 555-1212
</DIV>
</DIV>
<!-- index card tags -->
<DIV id="tag1" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name1" class="names">
<a href="" onclick="show_card(1);
return false" class="nameshref">Adams</a>
</DIV>
<DIV id="tag2" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name2" class="names">
<a href="" onclick="show_card(2);
return false" class="nameshref">Butler</a>
</DIV>
<DIV id="tag3" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name3" class="names">
<a href="" onclick="show_card(3);
return false" class="nameshref">Carter</a>
</DIV>
<DIV id="tag4" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name4" class="names">
<a href="" onclick="show_card(4);
return false" class="nameshref">Dunnard</a>
</DIV>
<DIV id="tag5" class="tags">
<img src="tag.jpg" width=80>
</DIV>
<DIV id="name5" class="names">
<a href="" onclick="show_card(5);
return false" class="nameshref">Jones</a>
</DIV>
<!-- navigational buttons -->
<DIV id = "nextbutton"
style = "left: 500;
top: 120;
visibility:hidden">
<a href="" onclick="next_card();
return false">Next Card</a>
</DIV>
<DIV id = "prevbutton"
style = "left: 500;
top: 140;
visibility: hidden">
<a href="" onclick="prev_card();
return false">Previous Card</a>
</DIV>
</BODY>
</HTML>
You can try out this version of the index card application. Once you reach
the last index card (name is "Jones"), click on the last name in the address section to
start the effect.
Have fun!
Adding code to the Index Card Application
Creating an Interactive Index Card Stack with DHTML
|
