We help IT Professionals succeed at work.

Jquery xml auto scroller with reload content at end

benandbecky
benandbecky asked
on
I really need a auto scroller that pulls from an xml file, but on feature nobody has is to refresh the xml at the end of the run so that any updates will be posted.

Here is what i want in flash (doesn't refresh though): http://www.usflashmap.com/component/flash_news_scroller.htm

Here is the xml reader i have:

How would i make this auto scroll and restart the cycle (load xml file again)?

THanks so much!!!
Ben
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" media="all" href="style.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="scroll.js"></script>
	<title>Reading XML with jQuery</title>
     <script>
     	$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "http://grrapiap187/dashboard.3/ChangeScroller/sites.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('site').each(function(){
						var id = $(this).attr('id');
						var title = $(this).find('title').text();
						var url = $(this).find('url').text();
						$('<div class="items" id="link_'+id+'"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap');
						$(this).find('desc').each(function(){
							var brief = $(this).find('brief').text();
							var long = $(this).find('long').text();
							$('<div class="brief"></div>').html(brief).appendTo('#link_'+id);
							$('<div class="long"></div>').html(long).appendTo('#link_'+id);
						});
					});
				}
			});
		});
     </script>
</head>
<body>
	<div id="page-wrap">
     	<h1>Reading XML with jQuery</h1>
     </div>
</body>
</html>

Open in new window

Comment
Watch Question

You can use 2 divs
Load the xml data in both divs and let the both scroll.
When the top div is out of the screen, replace it to the bottom position.
Repeat the last process and you have an infinite loop :-)
Alternatively, you could try the following:

1. First you need to get the XML and store it somewhere, as suggested by SPARC-DESIGN
2. Count how many items there are that you will be displaying, ie 5 news items.
3. Write a Javascript/jQuery function which will display one of the xml entries at a time, with a counter so it knows what item in the list it is displaying.
3. Using the Javascript function "setInterval" (google this) set an interval to run the function from 2 above, each time adding 1 to the count so that the next one is shown
4. When the function counter reaches the total number of available items, it can simply  start from item 1 in the list again.

The important function which does all the work is the one which hides and shows each item on the page. The function below is what I use to do this. Note that in my example my list of data I want to display is formated in an unordered list (ul), so I'm interested in list items.


var newsIntervalID = 0;
//set a global interval 

$(document).ready(function () {	
	newsIntervalID = setInterval('nextnews()', 900000);
        //start an interval which will run the nextnews function after a set interval. 
});

function nextnews() {
	total = $("#newstotal").val();
        //this total has been set as the total number of items in the XML, which would be completed by whatever function gets the XML
	count = $("#currentnewsitem").val();
        //this is the current item in the list being displayed, default to 1
	$("li.newswidget:nth-child("+count+")").hide("slow");
        //this gets the list item with a class of "newswidget" (you can use whatever you want) and hides it
        count++;
        //this increments the counter
	$("#currentnewsitem").val(count);
        //this sets the current item counter to the new value
        if (count > total) {
          //this statement just checks that we haven't gone higher than the total number of items in the list
          count = 1;
	 $("#currentnewsitem").val(count);
       	 }
        //this shows the relevant list item
        $("li.newswidget:nth-child("+count+")").show("slow");
}

Open in new window