Completing a 3D HTML Table Image Gallery
(Page 1 of 4 )
In the first two articles of this series, I showed you a number of steps involved in constructing a 3D HTML table and putting an image gallery in such a table. I discussed the capabilities we'd want our gallery to have, and the three modes in which it would function. In this conclusion to the series, I will show you how to get those modes working and pull everything together.
The Function for the Three Modes
The Automatic Mode
The three modes are the automatic mode, the freezing mode and the manual mode.
The start body tag has the following attribute:
onload = "scrollInwardCont()"
scrollInwardCont() means Scroll Inward Continuously. This is the name I have chosen to use; you can give it your own name. So as the page is loaded, the scrollInwardCont() function is called. This function is responsible for changing the planes (sets of pictures) automatically.
The scrollInwardCont() Function
We saw the scrollInward() function and its global variable, present, in the first part of this series. Our scrollInwardCont() function uses it to display the next plane. Our scrollInwardCont() function works with its own global variable, called manualScrolling. This variable is initialized to false. It can also have the value true. When its value is false, it means the page is in the automatic mode. When its value is true, it means the page is in the manual or freezing mode. The scrollInwardCont() function and its global variable are:
var manualScrolling = false; //when true, allows you to scroll manually
function scrollInwardCont()
{
//set manual scroll variable to false if it was true - this is the default
manualScrolling = false;
//call the scrollInward() function every 15s
TIDI = setInterval("scrollInward()", 15000);
}
This function is called as soon as the page is loaded. The default mode is the automatic mode, and we can say that this is the default function. When the function is called, it first of all sets the manualScrolling variable to false. This indicates that you are in the automatic mode. Then you have the statement,
TIDI = setInterval("scrollInward()", 15000);
setInterval() is a DOM function. Its first argument in our case is a call to a function that will be executed after every interval whose particular duration is the second argument in milliseconds. The function called is “scrollInward(),” which we want to be executed every 15 seconds. We know that 1000ms makes 1s. That is why we have 15000 as the second argument. The units, ms, are not typed into the function.
This DOM function returns an ID, which we assign to the TIDI variable. It is actually a global variable that can be accessed from elsewhere in the program. In the freezing or manual mode, we use this ID to stop the setInterval() function from re-executing itself.
Next: Freezing and Manual Modes >>
More HTML Articles
More By Chrysanthus Forcha
