How to Scroll XML in AJAX
With AJAX, you can perform different functional tasks, such as XML page scrolling and website automation. It is also interoperable with such programming technologies as PHP, ASP.Net, HTML and VB.Net. AJAX stands for Asynchronous JavaScript and XML, which simply means that it can integrate flawlessly with any production environment that supports JavaScript and XML. Because of its interactive and advanced capabilities, AJAX is the preferred development tool of many Web programmers.
Other People Are Reading
Instructions
-
-
1
Paste the code below into the "HEAD" section of your page. Replace the portion that states "YOUR-API-KEY" with your own Google-generated API. This CSS project will highlight the flexibility of AJAX as it scrolls your XML page in various colors. XML namespace, or XLMNS, will perform this action:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/REC-xml-names/">
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="gfeedfetcher.js"></script>
<script type="text/javascript" src="gajaxscroller.js">
</script>
<style type="text/css">
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}
.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}
.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}
#example1{ /*Demo 1 main container*/
width: 450px;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}
</style>
-
2
Download the file labeled "gfeedfetcher.js," which is a script inherited from gAjax Feed Displayer, so you don't need to edit it. Download the file labeled "gajaxscroller.js," which must be configured to load the animated gift on display. Right-click the "animated gif" and choose "Save As" to retrieve it as well. Name the gif "indicator."
-
-
3
Add the HTML code to see your AJAX code in action. It scrolls your RSS feed with XML, JavaScript and HTML elements:
<h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, 1 entry per page</h3>
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
-
1
Tips & Warnings
Study as many tutorials as you can to gain basic knowledge of AJAX and XML. Discussion forums are also a good source for learning about these Web technologies.
Always generate a new API key if you will use this script on another domain; your API key is useful only for the domain you registered it with.
References
Resources
- Photo Credit Ablestock.com/AbleStock.com/Getty Images
