AJAX In Action [255]
Listing 13.10 Function to handle the errors generated from the XMLHttpRequest function BuildError(){
strErrors += "Error:" + "" + "
"; UpdateStatus();
}
BuildError() allows us to display an error to the user. This tells the user that not all of the files were loaded. We just append the error to our global variable strErrors and call our UpdateStatus() function that we just developed to inform the user of the application’s current loading state. We can verify that our preloader works by saving the document and running the web page in our browser (figure 13.8).
When we test the viewer, we should see the status update on the screen. In figure 13.8, the preloader is loading file 2 of 4 and there have been no error messages. When all of the files have loaded, we should see that the files have been loaded successfully and there are no errors in the list. However, there is a JavaScript error indicated in our status bar since we still have not created our function ChangeView(). We’ll do that in the next section, but first we will create the crossbrowser fading transition effect. Licensed to jonathan zheng 524 CHAPTER 13 Building stand-alone applications with Ajax Figure 13.8 The preloader is loading file 2 of 4 as indicated by the status message with no errors. 13.4 Adding a rich transition effect The code that we have written so far has loaded the files into an array. We now have to take the data stored in an array and build a slideshow. The slideshow is based on DHTML. By changing the content within divs by using innerHTML, we can display the different articles that our preloader has loaded. Changing CSS classes of the elements and altering the z-Index of layers allows us to create fading transition effects with the divs. By placing all of the steps together, we are going to create a dynamic fading slideshow. 13.4.1 Cross-browser opacity rules When we are creating the fading effect, we need to change the opacity of the top layer. Changing the opacity of the layer lets the content underneath show through. With an opacity level of 0 percent, we are allowing all of the content to show through. An opacity level of 100 percent blocks anything on the layer underneath from showing through. Now, as always, we have issues with Internet Explorer and Mozilla-based browsers. Both browsers view opacity differently, so in our stylesheet rules we must account for the differences. Mozilla uses opacity, whereas Internet Explorer uses a filter specifying the alpha opacity, as listing 13.11 shows. Licensed to jonathan zheng Adding a rich transition effect 525 Listing 13.11 CSS Opacity filter classes .opac0{opacity: .0;filter: alpha(opacity=0);} .opac1{opacity: .2;filter: alpha(opacity=20);} .opac2{opacity: .4;filter: alpha(opacity=40);} .opac3{opacity: .6;filter: alpha(opacity=60);} .opac4{opacity: .8;filter: alpha(opacity=80);} Listing 13.11 shows that we created a series of style rules that have different opacity levels. Using CSS rules instead of using JavaScript to manipulate the values is a matter of preference. By using CSS rules, we can change other properties; maybe we want the colors to change as the fading occurs, or maybe we want to increase the text size. Using CSS classes allows us to do that without adding any extra JavaScript code, and it also encapsulates the cross-browser differences in a single place. Now that we have created our classes, we can start the process of loading the RSS feed information into our divs. 13.4.2 Implementing the fading transition In section 13.3.2, we received an error message when testing the code since we had not created the function ChangeView(). ChangeView() initiates the process of the fading in and out of the content divs. For the fading