524CHAPTER 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.1Cross-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.

Declare ChangeView()

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.2Implementing 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 process to work correctly, we alter the CSS classes and position the divs on different z-Index levels. Listing 13.12 shows how this is implemented.

Listing 13.12 ChangeView() function

function ChangeView(){ b

strDisplay = "<span class='RSSFeed'>" + arrayMessage[currentMessage][0] + "</span>: "

strDisplay += "<span class='itemTitle'>" + arrayMessage[currentMessage][1] + "</span><hr>";

strDisplay += arrayMessage[currentMessage][3] + "<hr>";

strDisplay += "<a href='" + arrayMessage[currentMessage][2] +

"' title='View Page'>View Page</a>"; document.getElementById("spanCount").innerHTML =

"Message " + (currentMessage+1) + " of " + arrayMessage.length;

var objDiv1 = document.getElementById("divNews1"); var objDiv2 = document.getElementById("divNews2"); if(layerFront == 1){

objDiv2.className = "opac0";

c	Display RSS title
d	Show element title

e Insert item description

f Output feed’s URL

g Change feed status

h Prepare transition

526CHAPTER 13

Building stand-alone applications with Ajax

objDiv1.style.zIndex = 1; objDiv2.style.zIndex = 2; objDiv2.innerHTML = strDisplay; layerFront = 2;

}

else{

objDiv1.className = "opac0"; objDiv2.style.zIndex = 1; objDiv1.style.zIndex = 2; objDiv1.innerHTML = strDisplay; layerFront = 1;

}

SetClass(0); i Start transition

}

h Prepare

transition

The ChangeView() bfunction has two major roles. The first is to build the HTML to display our data obtained from the RSS feeds. The second role is to prepare our divs for the fading in. Building the HTML is simple since we are using a basic layout. The hardest part is making sure that we keep track of quotes and apostrophes so we do not encounter any errors.

The first line of text we want to display is the RSS channel’s title c, which we stored in the first index of the array, arrayMessage. We need to surround the title with a span and assign a CSS class name of RSSFeed. The next step is to display the item element’s title dby referencing the second index of the array. By surrounding the title with a span and assigning a CSS class of itemTitle to the span, we are able to apply a separate style to our titles. To allow for a separation between the title and the message body, a horizontal rule is inserted.

The item description ewas stored in the fourth index of the arrayMessage. We divide the description from our next section, which holds the last item element we collected. The last item is the link f; we assign the value of the URL element to the link’s HREF attribute. The text that is visible to the user is “View Page,” which the user is able to click. The link sends the user to the RSS feed’s website.

We want to update the current message display counter that we built into our RSS header. To do this, we alter the innerHTML gof our span spanCount by using the arrayMessage length and our current message counter. We need to prepare the divs hfor the transition effect. We initialize the div by setting the zIndex so it is on top of the current one and set the class to our first CSS rule for opacity.

After we load the current message into our div, we start the process of fading the div into view. To do this, we need to create a function that loads the CSS classes in order; therefore, we call the function SetClass()i.

Adding a rich transition effect	527

13.4.3Integrating JavaScript timers

The process of loading our div into view creates a smooth transition effect between messages instead of an abrupt change. Altering the opacity level of the layer with the CSS classes we created earlier creates the effect. The opacity level allows the layers underneath the div to show through, as if we were looking through a window that was tinted. We increase the opacity level in order to block out all the content that is below the div.

As mentioned in section 13.4.1, we are using five CSS classes to handle the fading in and out. The reason for using the classes is that in the future we can add colors to the fading or anything else that we would like to display in the transition effect. In this case, we loop through the classes. This is illustrated in listing 13.13.

Listing 13.13 JavaScript function to set CSS class and to execute the transition effect

function SetClass(xClass){ b Declare SetClass()
if(xClass<5){	c Verify transition step				d
document.getElementById("divNews" +
layerFront).className = "opac" + xClass;					e
timerAmt = setTimeout("SetClass(" +
(xClass+1) + ")",timeColor);
}
else{					f
document.getElementById("divNews"
+ layerFront).className = "";
currentMessage++; g Increment count					h
if(currentMessage>=arrayMessage.length)
currentMessage = 0;

Set next className

Initiate fade timer

Remove CSS class

Verify next message

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 dand apply the next class to the element.