XML jQuery Paging / Slide / example

XML jQuery Paging / Slide show example.

Script - include jquery library

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

Add the following inside a script tag in head section

  
var myArray = [];
  var count2 = 1;
  var xmlRowCount = 0;
      $(document).ready(mainFunction);
  
  function mainFunction()
  {
   var xmlGlobal={}; // variable to shore xml data  
   
   callAjaxFunction(); 
  }
  function callAjaxFunction()
  {
   $.ajax(
   {
    type: "GET",
    url: "sites.xml",
    dataType: "xml",
    success: doXmlFunction
   });      
  }
  
  function doXmlFunction(XML)
  {
   
    xmlGlobal = $(XML);
    var content = $(XML).find('site');
    
    //show first content
    $(XML).find('site').eq(0).each(loopXmlFunction);
    
    //for each item attach the showXmlFunction handler
    $(XML).find('site').each(loopXmlFunction2);

  }
  
  // show content of item clicked
  function showXmlFunction(e)
  {
   var tempCount = parseInt( e.data.msg) -1;
   $(xmlGlobal).find('site').eq(tempCount).each(loopXmlFunction);
  }
  
  //Attaching the showXmlFunction handler
  function loopXmlFunction2()
  {
   $(''+count2 +'').bind('click', {msg: count2},showXmlFunction).appendTo($('#nav-wrap'))
   count2++;
  }

  //Function to show content
  function loopXmlFunction()
  {
   xmlRowCount = 0;
   
   var id = $(this).attr('id');
   var title = $(this).find('title').text();
   var url = $(this).find('url').text();
   
   myArray[parseInt(xmlRowCount)] = new Array(id, title, url);
   xmlRowCount++;
   
   //remove any revious elements
   $('.items').remove();
   
   //add new title element
   $('


').html(''+title+'').appendTo('#page-wrap')
   
   //add sub elements
   $(this).find('desc').each(function()
   {
    
    var brief = $(this).find('brief').text();
    var long = $(this).find('long').text();
    
    $('


').html(brief).appendTo('#link_'+id);
    $('


').html(long).appendTo('#link_'+id);    
   });   
  }  
   

Add the following html in body tag

 <div id="page-wrap">
      <h1>XML jQuery Paging - Show items one by one on click</h1>
     </div>
  <div style="margin:10px 0 0 20px;" id="nav-wrap"></div>

The Following is the sites.xml file structure

 <sites>
   <site id="0">
     <title>Think2Loud</title>
 <url>http://www.think2loud.com</url>
     <desc>
       <brief>this is the brief description 1.</brief>
       <long>...and this is the long description 1.  See how long it is :)</long>
     </desc>
   </site>
   <site id="1">
     <title>jaredharbour.com</title>
 <url>http://www.jaredharbour.com</url>
     <desc>
       <brief>this is the brief description 2.</brief>
       <long>...and this is the long description 2.  See how long it is :)</long>
     </desc>
   </site>
   <site id="2">
     <title>Css Tricks</title>
 <url>http://www.css-tricks.com</url>
     <desc>
       <brief>this is the brief description 3.</brief>
       <long>...and this is the long description 3.  See how long it is :)</long>
     </desc>
   </site>
 </sites>

You can customize your ui like the following.