XML Feeds and how to use the content.

XML Feeds and how to use the content.

Hi all, I am learning JQuery at the moment and have stumbled on something which has had me banging my head on my desk for about 8 hours. Any help would be appreciated.

My problem is that i cannot get the information from the XML file to scroll. It will work fine if i use LI tags on the page but not when they are produced in script when pulling data from the XML file.

My page code is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load XML With jQuery</title>
    <script src="jquery-1.2.6.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
   
    <style>
   body {
   margin: 0px;
   padding: 0px;
   font: 12px Arial, Helvetica, sans-serif;
}
a:link, a:visited, a:active {
   color: #000;
   text-decoration: none;
   font-weight: bold;
}
a:hover {
   text-decoration: underline;
   color: #999;
}
.item {
   list-style: url(none) none;
   display: block;
   width: 140px;
   margin: 0px 0px 5px;
   padding: 5px;
   border: 1px solid #e7e7e7;
   text-align: center;
   height: 195px;
}
.bookimage {}
.title {}
.price {
   font-size: 13px;
   font-weight: bold;
   color: #C00;
}

#news-ticker{
   width:170px;
   height:400px;
   overflow:hidden;
   margin:0px;
   text-align: center;
}

   #news-ticker li{
      /*height:100px;*/
}

#news-ticker li{
   list-style: none;
      }
   

    </style>



<script type="text/javascript" src="jquery.serialScroll-min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
//jQuery(function( $ ){
             
       $.get('featured_products.xml', function(d){
        //$('body').append('<h1>Featured Products</h1>');
        $('body').append('<div id="news-ticker" />');

        $(d).find('product').each(function(){

            var $product = $(this);
            var title = $product.attr("name");
            var description = $product.attr('alttext');
            var imageurl = $product.attr('imageurl');
         var price = $product.attr('price');
         var linkurl = $product.attr('linkurl');

            var html = '<li> <a href="' + linkurl + '"><img class="bookImage" alt="" src="' + imageurl + '" /></a> ';
            //html += ' <span class="loadingPic" alt="Loading" />';
            html += '<a href="' + linkurl + '"><p class="title">' + title + '</p></a>';
            //html += '<p> ' + description + '</p>' ;
         html += '<p class="price">£' + price + '</p>' ;
            html += '</li>';

            $('div').append($(html));
            //$('.loadingPic').fadeOut(1400);
        });
    });

   
   var $news = $('#news-ticker');//we'll re use it a lot, so better save it to a var.
   $news.serialScroll({
      
      items:'li',
      duration:3500, // how long to animate.
      force:true,
      axis:'y', // which of top and left should be scrolled
      easing:'linear',
      //lazy:true, NOTE: it's set to true, meaning you can add/remove/reorder items and the changes are taken into account.
      interval:8000, // it's the number of milliseconds to automatically go to the next
      start:0,
      cycle:true,
      exclude:1, // exclude the last x elements, so we cannot scroll past the end
      step:1 // scroll * news each time
      
      /*
      event:'click', // on which event to react.
      start:0, // first element (zero-based index)
      step:1, // how many elements to scroll on each action
      lock:true,// ignore events if already animating
      cycle:true, // cycle endlessly ( constant velocity )
      constant:true // use contant speed ?
      navigation:null,// if specified, it's a selector a collection of items to navigate the container
      target:window, // if specified, it's a selector to the element to be scrolled.
      interval:0, // it's the number of milliseconds to automatically go to the next
      lazy:false,// go find the elements each time (allows AJAX or JS content, or reordering)
      stop:false, // stop any previous animations to avoid queueing
      force:false,// force the scroll to the first element on start ?
      jump: false,// if true, when the event is triggered on an element, the pane scrolls to it
      items:null, // selector to the items (relative to the matched elements)
      prev:null, // selector to the 'prev' button
      next:null, // selector to the 'next' button
      onBefore: function(){}, // function called before scrolling, if it returns false, the event is ignored
      exclude:0 // exclude the last x elements, so we cannot scroll past the end
      */
   });   
   
});
</script>

   

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head>
<body>

</body>
</html>


Any help would be most appreciated.