| home / experts / dhtml / column25 |
|
function slideIt(){
elGif.top += slideInc;
if (elGif.top >= 0) {elGif.visibility = "hide";return}
setTimeout("slideIt()",gifInt);
}
If elGif has reached its final position, that is, if its top property no longer has a negative value, then the display text has faded in and is visible. So we hide elGif and return. If not, then slideIt() is called again at the time interval stored in gifInt, and elGif is moved down again. In other words, slideIt() is called, by itself, repeatedly until elGif has completed its journey over elNews.
Version 2 introduces the endIt() function, which contains the statements to be executed when the fader has completed all its loops through the array. As we saw previously, it is called by doIt():
function endIt(){
clearInterval(blendTimer);
if (endWithFirst) {
newsCount = 0;
fadeIt();
}
if (replayOnClick) {
startIndex = endWithFirst ? 2 : 0;
if (IE4) {
elFader.title = "Double click to replay";
elFader.ondblclick = function(){
this.ondblclick = null;
this.title = "";
startIt(startIndex);
}
}
else {
elFader.captureEvents(Event.DBLCLICK);
elFader.ondblclick = function(){
this.releaseEvents(Event.DBLCLICK);
startIt(startIndex);
return false;
}
}
}
}
The first task of endIt() is to stop the repeated calls to doIt(), by clearing the interval timer stored in blendTimer. The fader loops are now complete and elFader is displaying the final item created from the array:
clearInterval(blendTimer);
Next, endIt() checks the value of endWithFirst. If it is true, then the author intends for the first fader item to be displayed after looping is completed. To achieve this, newsCount is set to 0, to point to the beginning of the array, and fadeIt() is called to display the first item. If endWithFirst is false, endIt() does nothing:
if (endWithFirst) {
newsCount = 0;
fadeIt();
}
Finally, endIt() checks the value of replayOnClick. If replayOnClick is false, endIt() does nothing and our script execution is finished. If, however, replayOnClick is true, endIt() has a little more work to do.
Since a replay is called for, endIt() must determine from which item to start replaying the fader. The array index representing that item's display text is assigned to startIndex. If endWithFirst is true, meaning the first item is visible, the replay must begin with the second item. The second item is created by the third (index 2) and 4th array elements, so startIndex is assigned a value of 2. If endWithFirst is false, the final item is visible, and the replay should begin with the first item, so startIndex is assigned 0:
startIndex = endWithFirst ? 2 : 0;
The code used to set up the replay is different for the two browsers. For Explorer, we create a popup tooltip using elFader's title property. The title property has been discussed extensively in DHTML Diner. If the user mouses over the fader, the message "Double click to replay" will appear
if (IE4) {
elFader.title = "Double click to replay";
elFader.ondblclick = function(){
this.ondblclick = null;
this.title = "";
startIt(startIndex);
}
}
We then set elFader's ondblclick event handler by assigning a function to it. This function will be called whenever the user double clicks on the fader. It first cancels further double click handling by nulling the ondblclick handler. We don't want the fader to respond to double clicks while the transitions are in progress. Then the title property is assigned an empty string for the same reason. Finally, startIt() is called to begin looping through the array with startIndex as its argument.
For Navigator, the ondblclick event handler does nothing unless the event is captured first. So we tell elFader to capture the event:
elFader.captureEvents(Event.DBLCLICK);
Next, we assign a function to the ondblclick handler. When called, the function stops capturing the event, by releasing it. Then startIt() is called:
elFader.ondblclick = function(){
this.releaseEvents(Event.DBLCLICK);
startIt(startIndex);
reurn false;
}
 | Note: If you set replayOnClick to true, make sure that the visible fader item is not a link. Otherwise, of course, the link will be followed upon the user's first click. The fader on the left demonstrates a good use for both endWithFirst and replayOnClick. They are both set to true. Notice that the first item is a like a title, which introduces the source of the items to follow. This title is not a link and is the item visible when all loops are completed. Double-clicking starts the looping process again without following a link. |
Well, that's it for our fader. Some final comments on the next page.
Produced by Peter Belesis and
| ||||||||||||||||||||
All Rights Reserved. Legal Notices.
Created: Sep 07, 1999
Revised: Sep 07, 1999
URL: http://www.webreference.com/dhtml/column25/fade2end.html
