• Choose a category
• All
• Classic-Fiction

By Root 4053 0

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

Declare ChangeView()

strDisplay = "" +

c Display RSS title

arrayMessage[currentMessage][0] + ": "

strDisplay += "" + d Show element title

arrayMessage[currentMessage][1] + "

---

"; strDisplay += arrayMessage[currentMessage][3] e

Insert item

description

+ "

---

";

strDisplay += "View Page";

document.getElementById("spanCount").innerHTML =

g Change feed status

"Message " + (currentMessage+1) +

" of " + arrayMessage.length;

var objDiv1 = document.getElementById("divNews1");

var objDiv2 = document.getElementById("divNews2");

if(layerFront == 1){

h Prepare transition

objDiv2.className = "opac0";

Licensed to jonathan zheng

526

CHAPTER 13

Building stand-alone applications with Ajax

objDiv1.style.zIndex = 1;

objDiv2.style.zIndex = 2;

objDiv2.innerHTML = strDisplay;

layerFront = 2;

}

h Prepare

else{

transition

objDiv1.className = "opac0";

objDiv2.style.zIndex = 1;

objDiv1.style.zIndex = 2;

objDiv1.innerHTML = strDisplay;

layerFront = 1;

}

SetClass(0); i

Start transition

}

The ChangeView() b function 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 d by 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 e was 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 g of our span spanCount by using the arrayMessage length and our current message counter. We need to prepare the divs h for 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.

Licensed to jonathan zheng

Adding a rich transition effect

527

13.4.3 Integrating 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