Adding code to the Index Card Application
March 1st 1998
The first code to add to the application, is the cross-browser objects, and the function call to create the cross-browser objects.
The cross-browser objects are added at the top of the page as follows:
<SCRIPT src="ns4_obj.js" language="javascript1.2">
</SCRIPT>
<SCRIPT src="ie4_obj.js" language="jscript">
</SCRIPT>
The call to create the objects is made with the onLoad event handler:
<BODY onload="wdvlCreateObjects()">
A new scripting block is created just after the calls to the two external JavaScript files.
To start the page, an additional function is created to display the first index card,
and the "Next Card" navigational block. In addition, two global variables are created,
one to track which index card is currently shown, and another to act as a constant
representing the number of index cards currently contained in the document.
This function is shown in the next block:
<SCRIPT LANGUAGE = "JAVASCRIPT">
<!--
// global
var cardNumber = 1;
LASTCARD = 5;
// called when page loaded, to show first
// index card and next button
function start() {
wdvlObjs["contents1"].objShow();
wdvlObjs["nextbutton"].objShow();
}
Notice from the function start, that the cross-browser objects are used to
show both the first index card, and the "Next Button" text block.
Next up is the functions to handle card navigation. These two functions, one for
accessing the next index card in the stack, and one for accessing the previous card in
the stack, access the global card number variable, and access the next or previous card based
on this value. To do this, the functions first hide the index card currently showing, adjust
the card number variable, and then show the new card. The code for these two functions is
shown next:
// get next card in stack
function next_card() {
wdvlObjs["contents" + cardNumber].objHide();
cardNumber++;
wdvlObjs["contents" + cardNumber].objShow();
set_buttons();
}
// get previous card in stack
function prev_card() {
wdvlObjs["contents" + cardNumber].objHide();
cardNumber=cardNumber - 1;
wdvlObjs["contents" + cardNumber].objShow();
set_buttons();
}
Again, notice how the use of cross-browser objects simplifies the code? There is no having to
test for each browser type and provide code for each action taken, the browser differences
are all handled with hidden code. Notice that each function also calls another function
set_buttons. This function checks to see if the reader is at the last or first
card in the index card stack and shows and hides the associated navigational button. This
prevents incrementing the card number and accessing index cards that don't exist, and which
will cause an error. The code for this new function is:
// show or hide navigation buttons
// depending on location in stack
function set_buttons() {
if (cardNumber > 1)
wdvlObjs["prevbutton"].objShow();
else
wdvlObjs["prevbutton"].objHide();
if (cardNumber < LASTCARD)
wdvlObjs["nextbutton"].objShow();
else
wdvlObjs["nextbutton"].objHide();
}
//-->
</script>
Another approach I could have taken was just to cycle around the stack,
starting with the first card when the end of the stack is reached. The end of
the script block is also added as this is the last function created for this page. All
that's left now, is to add in the call to the start function to the
onLoad event handler:
<BODY onload="wdvlCreateObjects();start()">
That's it for this simple example. You can try the page using
either Netscape Navigator 4.x or Microsoft Internet Explorer 4.x.
One thing you don't see from this example, is the use of animation. Instead of moving the
index card off the page, or having the buttons dance around, I show and hide content, only.
And this leads to a discussion of what I call the "ooh" factor.
The "ooh" Factor
No sooner had Netscape and Microsoft given us the ability to dynamically alter Web page contents, then
we were off creating sliding menus and vanishing headers. We dissolve, alter,
clip, move, hide, show, light, and dance our elements around the page,
enjoying the sheer joy of FINALLY being able to do something with a page after it is loaded.
However, perhaps we got a bit caught up in DHTML for the sake of DHTML, only. I call this
phenomena the "ooh" factor: we all want to create Web pages that have the readers going
"ooh, look at that!". I know I did.
However, every effect, even the fun ones, has a price. First, the more animation your page has
the longer it will take you to create the page and the harder it is to maintain the page. Second,
animations take time to run their course. If your Web page reader has to wait a long time
for an animation to finish just to click on a menu option, your page is going to begin
resembling that great television commercial that they used to like,
until it was played too much. Third, code you add to a page adds to the
download size of the page.
The effect for the index card application is content layering. The code used isn't too large,
the page downloads relatively quickly, and the reader doesn't have to wait long for results.
For a Web page that just wants to list names and addresses that can be accessed easily and
quickly, this use of DHTML is balanced by the result. However, if I had added animation, such
as having each card "fly" off the page and a new one "fly" into the page, I will have added
a considerable amount of code to create the effect, and my reader would have to wait
for the results of his or her button click. In this case, the results may not balance the
cost of the DHTML.
Does this mean you shouldn't use DHTML animations, or use them rarely? No, this just means
consider your audience, consider the effect, consider the cost, and then consider what
the effect buys you and your audience. The resources section contains several links
to sites that I consider make effective use of DHMTL.
It's also important to have a little fun when creating a Web page, as I did, by adding
just a little bit of animation to the index card application. You can access the
second version of the page, which contains a little surprise when
you click on the last name in the address section of the Jones card. You can see the
code for this example in the bonus section of the article, located in the next page.
In the last part of this three-part series, I demonstrate an index card example that uses
external HTML source, using Navigator's layer load method, and the use
of inline frames with for Internet Explorer. This last article also talks about
DHTML and page presentation persistence.
Resources
About the Author. Shelley Powers has authored and co-authored several books
on Web development and other technology,
including books on Dynamic HTML, ASP, LiveWire, Perl, CGI, Java, JavaScript, PowerBuilder 5, and
others. In addition she has been a contributor to several online magazines such as
NetscapeWorld (now Netscape Enterprise Developer), Web Review (http://www.webreview.com),
and Digital Cats (http://www.javacats.com/). Shelley has her own consulting company, located
in Vermont. Her web site can be seen at http://www.yasd.com, and
she can be reached at shelleyp@yasd.com.
Creating an Interactive Index Card Stack with DHTML
Creating an Interactive Index Card Stack with DHTML
Bonus Section: Okay, so a little animation won't hurt
|
