AJAX In Action [257]
Declare SetClass()
if(xClass<5){ c
Verify transition step
document.getElementById("divNews" +
d Set next className
layerFront).className = "opac" + xClass;
timerAmt = setTimeout("SetClass(" +
e Initiate fade timer
(xClass+1) + ")",timeColor);
}
else{
document.getElementById("divNews"
f Remove CSS class
+ layerFront).className = "";
currentMessage++; g
Increment count
if(currentMessage>=arrayMessage.length)
h Verify next message
currentMessage = 0;
if(!bPaused)
i Start viewer
timerSwitch = setTimeout(
timer
"ChangeView()",flipLength);
}
}
Listing 13.13 shows the function SetClass()b, which has a parameter, xClass, passed to it. This parameter allows us to track the current state of our transition effect without using another global variable. We call this function for every step of our transition to update the status until the fading transition is complete. Since we are dealing with five CSS classes, we need to verify that the current step of our transition c has a value under five. If that’s the case, we know that there are still more CSS classes that need to be applied to our transition. If we are below five, we apply the next CSS class to the element. We reference the attribute className d and apply the next class to the element.
Licensed to jonathan zheng 528 CHAPTER 13 Building stand-alone applications with Ajax After we set the new class, we need to create a timer to call the next step. The setTimeout e method has two parameters. The first is the function or JavaScript statement to execute, and the second is the amount of time in milliseconds before it is executed. In this case, we are going to call our SetClass() function with the incremented state of our class. The timeout is set to our global variable, flipLength, which we declared in section 13.3.1. The else portion of our script handles the situation when we have looped through our five CSS classes and applied them to the div. First, we remove the CSS Class f from our div. The default opacity is 100 percent and allows the div to cover the other one completely with nothing showing through from the bottom layer. We increment the currentMessage g variable, allowing the next message to be loaded. We check to see if that message number h is greater than the number of messages contained in our array arrayMessage. If it is greater, we set the current message back to the start. The timer is restarted to load the next message i after our set period of time. The setTimeout method calls our function, ChangeView(), and our global variable, flipLength, determines the length of time. In order for this to execute, we make sure that our global variable, bPaused, is not true. We will be coding the pause feature of this script in section 13.5.2. The transition effect of the slideshow is now complete. We can test what we have created so far and see if it works. If everything is working correctly, we should see the page-loading counter slowly increasing as the files are being loaded into the script, and the first message should begin to fade in. As you can see in figure 13.9, there are two different messages in the viewer since the one is slightly transparent. The current message (6) is displayed in the header, and we are able to see that in total 31 messages were loaded. Now, all we have left to do is add the pause, back, forward, and add functionality to our viewer. 13.5 Additional functionality The code that we already developed can be used on its own, without the other features, but they can make the script more flexible for users and for us. The first feature that we want to add allows us to import other RSS feeds that are not included in the preload function. Perhaps we want to check a site once in a while for new content, or maybe we want to grab