| home / experts / dhtml / column4 |   
|
|
It's JavaScript time, once again!
In addition to our usual browser variables, we will initialize three others: curRecord to keep track of the current (i.e. displayed) record, maxRecords which stores the number of records in our database. Taking the length of arRecord (6, i.e. 0-5) and subtracting 1 for unused arRecord[0], it stores 5 which corresponds to the record total. Likewise, maxFields stores the number of fields in our record.
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
var curRecord = 1;
var maxRecords = arRecord.length-1;
var maxFields = arRecord[1].length-1;
Next, we create our primary function, upDate(), which will display the current record when called.
function upDate() {
if (document.images) { document.images["imPic"].src="Cynic00" + curRecord + ".jpg" };
if (!ver4) { return };
for (i=1; i<=maxFields; i++) {
if (NS4) {
whichEl = eval("document.elField" + i + ".document");
with (whichEl) {
open();
write("<B>" + arRecord[curRecord][i] + "</B>");
close();
}
}
else {
whichEl = eval("document.all.elField" + i);
whichEl.innerHTML = "<B>" + arRecord[curRecord][i] + "</B>";
}
}
}
upDate()first does an image swap, replacing the image with one that corresponds to the current data. Notice that all our images have the same filename, ending with a final incrementing digit. In the case of our example, they are named Cynic001.jpg, Cynic002.jpg, etc. Images can be preloaded, but advisable only if the database is small.
If the visiting browser is not dynamic, the function returns. If it
is, the function continues. It sets up a loop to address each field in
the current record, then it updates the appropriate CSS element containing that
field. For Navigator, it identifies the CSS element to be updated and
then writes to its document object.
For Explorer, it gets the CSS
element from the all collection and then changes the HTML it contains.
The details of these two methods are covered in detail in column3.
We need two more short functions to increment and decrement the current record number, causing either the next or previous record to be displayed:
function showNext() {
curRecord = (curRecord < maxRecords) ? ++curRecord : 1;
upDate();
}
function showPrev() {
curRecord = (curRecord > 1) ? --curRecord : maxRecords;
upDate();
}
showNext() compares the current record number to the total records. If it is smaller, curRecord is incremented, otherwise it is looped back to 1
showPrev() checks to see if the current record is the first one. If it isn't, curRecord is decremented. If it is, the last record is displayed.
Now, all we need is to display the initial record when the page loads. We can do this by calling upDate()through the onLoad event handler of the BODY tag:
<BODY ...HTML attributes....ending with... onLoad="upDate()">
With all the coding, done, let's see the example we've created again:
Sampling Code Number: CYNIC-001
And now, let's see all of the code discussed, in its proper order...
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: 09/09/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column4/dispRecs.html
