Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


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



Up to => Home / Authoring / DHTML / CB




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers