Uncle Jim's Web Designs and Tutorials

JavaScript Address Book

Author: Jim Stiles

There are two demo uses of this script. It is the exact same script used in both instances, but with quite different usages:


Perfect for a corporate Intranet or just for your own personal web based address book, we feature the JavaScript Address Book Script this month. The overall idea is this: it pops up a little address book window then waits for you to click on one of the letters of the alphabet. When you do, it displays all the information about people whose last name begins with that letter. And the only code you need to customize is the address code. You will find the following code in the file data.htm below:

rcrd[0]
= "Randy Alms"
+ "
Antiques"
+ "
Tel. 455-8247"
+ "

"

+ "
Shannon Austin"
+ "
Animation"
+ "
Tel. 456-0570"
+ "

"

+ "
Jeffrey Asay"
+ "
Research and Development"
+ "
Tel. 459-2520"
+ "

";

rcrd[1]
= "Roger Baker"
+ "
Public Relations"
+ "
Tel.858-4211"
+ "

"

+ "
Stephanie Bush"
+ "
Clown"
+ "
Tel. 459-0482 ext 13"
+ "

";


rcrd[18]
= "Rodney Richter"
+ "
Classifications Division"
+ "
Tel.800-RUY2K"
+ "

"

rcrd[19]
= "Jim Stiles"
+ "
Web Master"
+ "
Tel.BR-549"
+ "

"

+ "
Sharon Sousa"
+ "
Visitation Systems Specialist"
+ "
Tel. 800-2323 ext 1518"
+ "

";

These are the definitions of the A and B addresses. Simply, rcrd[0] contains a string of HTML which will display the addresses. So inside that string you can put any HTML you wish. Email addresses, images, etc. The only change you have to make to the script is defining all the rcrd array elements. rcrd[0] defines A, rcrd[1] defines B, rcrd[2] defines C, and so on. If you don't have anyone in your address book with a last name beginning with X, just do not define the corresponding rcrd element (rcrd[23] for X).

The only other trick you need to be aware of is the code to spawn the address book window. It looks like this:

newwin=window.open("frames.htm","test","width=380,height=210");

Basically it opens the document frames.htm in the window test (or opens a new window if one by that name doesn't already exist) with a width of 380 and a height of 210.


This script provided for free.