AJAX In Action [252]
}
We apply the CSS to our footer div divControls b so it matches the header row. The background color c is added to the div to match the header’s background color. We align the text d so the content is centered in the div horizontally. Top and bottom padding e is added to the div, which means the content doesn’t have to sit on the border. We don’t have to add a border to our div since the middle row has the top border defined and the holder div has the other three borders covered. The last step in the CSS for formatting our footer is applying styles to our form elements so they fit in with the style of the reader. The button elements f that are located inside the divControl div are referenced with the div’s name and then a space followed by the tag name. That means only the elements within that div tag get these properties assigned to them. Any of the other elements with the same tag name on the page will not.
Since the text in each of our buttons is a different length, we apply the width property g to the buttons so they will all be the same width, causing the buttons to look more uniform. We change the background color so it is not the default color of the user’s operating system. The text color and the size of the font for the element’s text can be assigned also. Figure 13.7 shows us how our footer is now styled to match the feel of the RSS reader.
Licensed to jonathan zheng 518 CHAPTER 13 Building stand-alone applications with Ajax Figure 13.7 CSS applied to the footer In figure 13.7, we see all of the properties that we applied to the divs. We applied widths, colors, font sizes, borders, padding, and much more. We can customize the CSS properties of these elements so they fit the needs and styles of any website theme or personal taste. The next thing we need to do is get content into our RSS reader! 13.3 Loading the RSS feeds In this example, we will load files from multiple feeds. We will use our ContentLoader object to do the work, as we have throughout this book. In the first version, we use a series of global variables to quickly develop an RSS feed viewer. 13.3.1 Global scope Global variables allow for easy adjustments to our script so we do not have to change the functionality inside the for loops and timers. We will be able to adjust the contents of the global variables to make changes throughout the script and communicate between the different functions. We want to use global variables rather than local variables in this script so they can be shared and we don’t have to pass them from function to function. Later on in this chapter, when we refactor our script, you will see a solution that doesn’t use global variables; but for now, they keep our example simple. One downfall to JavaScript is that there is no variable type for constants, so we are simulating the effect with global variables. However, global variables can be Licensed to jonathan zheng Loading the RSS feeds 519 overwritten, so we must be careful when using them. The variables in listing 13.5 will not be overwritten at any time during the application. Listing 13.5 Global constant variables var flipLength = 5000; var timeColor = 100; var strErrors = " var arrayRSSFeeds = new Array( "http://radio.javaranch.com/news/rss.xml", "http://radio.javaranch.com/pascarello/rss.xml", "http://radio.javaranch.com/bear/rss.xml", "http://radio.javaranch.com/lasse/rss.xml"); In listing 13.5, we assign the global variables that affect how our viewer performs. The first global variable, flipLength, determines how many milliseconds our current message is displayed before it is replaced with the next message. In this case, the value 5000 represents the total number of milliseconds between messages. Another timer variable is timeColor. This time span is the number of milliseconds between the coloring or fading steps in our script. The larger the number, the longer the transition takes to complete. The next global variable that we use is strErrors. This line is the heading
Error List:
"