Creating an Interactive Index Card Stack with DHTML
March 1st 1998
|
In part 1 of of this 3-part series, I demonstrated how to use JavaScript to
create cross-browser objects to handle the differences in Dynamic HTML (DHTML) between
Netscape Navigator 4.x and Microsoft Internet Explorer 4.x. This article uses these
objects to create an index card stack with pre-loaded information.
When I say pre-loaded, I mean content that is loaded with the page that implements
the DHTML effect. The content can be displayed immediately, or it can be displayed based o
page reader interaction or some other factor. Based on this, and wanting to keep a reasonable
download page size, the content is usually brief and finite. In this first index card
DHTML page, the content is the names and addresses of five fictional people.
|
Creating the Page Content
To add to the index card effect, I created a JPEG image of an image card, and used this for
the background of the names and addresses. Then, I created DIV blocks for each of my "cards",
one block for each card. I used DIV blocks as these HTML elements are used as containers
for other HTML content, any HTML content, and both Netscape and Microsoft have implemented
dynamic positioning of DIV blocks. Additionally, both companies have implemented dynamic
modification of all "CSS-P" attributes, such as the left and top position of an element,
its width and height, its clipping region, Z order, and visibility.
The names for each card are created using a H2 header element and the addresses are created using
paragraph elements (<P>). As I wanted the background to be transparent for the header, but
set to white for the address, I created two different CSS1 styles, one for each, setting the
background colors and positions of the content, and setting all of the elements invisible. In addition,
I created a style setting for the entire web page setting the background color to white, and all
text to Arial, and a style setting for all DIV blocks (setting them to absolute positioning) :
<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;
layer-background-color: white;
width: 300; z-index: 3}
</STYLE>
Note the use of the z-index attribute. This is necessary to ensure that
the content layers correctly.
Larger z-index values are layered on top of those with smaller z-index values.
Next, I created the page content. First was the DIV block containing the background image.
A DIV block
must be used in order to position the image specifically in the page:
<DIV style="position:absolute;
left : 80;
top : 50;
width : 400;
z-index : 2">
<img src="Card.jpg" width=400>
</DIV>
After the background image, each of the card blocks are created. The card blocks are actually
one DIV block containing the name header and another DIV block containing the address. All of
the cards use the same style sheets, and all are positioned one on top of the other in a stack:
<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 Jones<br>
1600 Penn Ave.<br>
Bigtown, MT. 01000<p>
(501) 555-1212
</DIV>
</DIV>
Lastly, to allow the Web page reader to move back and forth within the index card stack, two more
DIV blocks are added to the Web page. Within the first block is a link with the text "Next Card", and
within the second block is another link with the text "Previous Card". When the reader clicks on these
links, functions are called to change the card in the stack. The style sheet is adjusted for the
new elements, and the new style sheet is shown next, in its entirety:
<STYLE type="text/css">
body { background-color: white; font-family: Arial }
DIV { position:absolute }
H2 { color: red; }
.indexcard { left : 100;
top : 80;
width : 200;
visibility: hidden;
z-index : 3 }
.card { margin-left : 0.5in;
background-color: white;
font-size : 10pt;
layer-background-color: white;
width : 200;
z-index : 3}
DIV A { text-decoration : none;
color : black;
font-weight : bold}
.diff { color: red }
</STYLE>
Finally, the last two elements are added to the HTML document:
<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>
With the navigational elements, all of the HTML page contents have been added. Next up is adding the code.
Adding code to the Index Card Application
|
