XML Pagination Problem

XML Pagination Problem

Hi guys, I have been slaving for hours over this snippet of code I have developed to read from an XML file and then paginate the results in an unordered list. However, the next and previous link buttons do not work correctly and my code only work ins Safari4+ on the Mac, but there is a JS error when opened in IE7+, maybe thats the reason for it not displaying properly in those browsers.

Anyway, I need to be able to fadeIn 10 magazine issues, then fade them out when the user clicks next or previous and fadeIn another 10 fresh copies.

Here is my code:

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <meta name="robots" content="noindex, nofollow" />
  7. <title>Brave Creative - Online Archive</title>
  8. <link rel="stylesheet" href="css/global.css" media="screen" />
  9. <script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script>
  10. <script type="text/javascript">

  12. $(document).ready(function() {

  14.  $.ajax({
  15.     type: "GET",
  16.     url: "issues.xml",
  17.     dataType: "xml",
  18.     success: function(xml) {
  20. var shelf = $('#shelf-items');
  21.                 var startIndex = 0; 
  22.                 var howMany = 10; 
  23.                 var $issues = $(xml).find('issue'); 
  24.                 var totalIssues = $issues.length;
  25. var numPages = Math.ceil(totalIssues / howMany);

  27.                 var displayIssues = function() {
  28.                       var $issuesPaginated = $issues.slice( startIndex , (totalIssues - startIndex) + howMany );
  29.                       shelf.html('');
  30.                       $issuesPaginated.each(function(){
  31.                           var id = $(this).attr('id');
  32.                           var date = $(this).find('date').text();
  33.                           var cover = $(this).find('cover').text();
  34.                           var issue = $(this).find('issuenumber').text();
  35.                           var url = $(this).find('url').text();
  36.                           $('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(900).appendTo(shelf);
  37.                       });
  38.                 }

  40.                 $('#prevIssueButton').click(function() {
  41.                     if( startIndex < howMany) {
  42.                         startIndex -= howMany;
  43.                         displayIssues().fadeIn(900);
  44.                     }else {
  45. startIndex = 0;
  46.                         displayIssues();
  47. $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000);
  48.                     }
  49.                 });
  50.                 $('#nextIssueButton').click(function() {
  51.   if( startIndex + howMany <= totalIssues) {
  52.                         startIndex += howMany;
  53.                         displayIssues().fadeIn(900);
  54.                     }else {
  55. $('span.error').html('No Issues to Display - You are now on Page 1').fadeIn(300).fadeOut(3000);
  56.                        startIndex = 0;
  57.                         displayIssues();
  59.                     }
  60.                 });
  62.                 displayIssues().fadeIn(900);
  63. $('span.issuecount').html(+totalIssues+'&nbsp;Issues - '+numPages+'&nbsp;Pages');
  64.             }
  65.    }); // end ajax call

  67. }); // end document-ready

  69. </script>
  70. </head>
  71. <body>

  73. <div id="bc-publish"><span></span></div>

  75. <br />

  77. <div id="wrapper">

  79. <header>
  80. <h1>Online Archive: <span>FSM</span></h1>
  81. </header>
  82.     
  83.     <section id="buttons">
  84.     
  85.      <a href="#" id="prevIssueButton" title="Toggle Previous Entries">Previous</a>
  86.         <a href="#" id="nextIssueButton" title="Toggle Next Entries">Next</a>
  87.         
  88.         <span class="error"><a></a></span>
  89.         
  90.         <div class="clear"></div>
  91.     
  92.     </section> <!-- /buttons -->
  93.     
  94.     <section id="shelf">
  95.     
  96.      <ul id="shelf-items"></ul>
  97.         
  98.         <div class="clear"></div>
  99.     
  100.     </section> <!-- /shelf -->
  101.     <br />
  102.     <span class="issuecount"></span>
  103.     
  104.     <br /><br />
  105.     
  106.     <span class="logo"><a href="http://www.bravecreative.co.uk" title="Brave Creative"><img src="images/brave-creative-logo.jpg" alt="Brave Creative" /></a></span>
  107.     <span class="address">
  108.     
  109.      <span>t.</span> 01733 392978 <span>m.</span> 07719442825<br />
  110. <span>e.</span> tony@bravecreative.co.uk<br />
  111.         4 Milnyard Square, Orton Southgate, Peterborough PE2 6CX
  112.     
  113.     </span>
  114.     
  115.     <div class="clear"></div>

  117. </div> <!-- /wrapper -->

  119. </body>
  120. </html>
This has really baffled myself and I thought Id come see the experts on the case to see if they could shed any light on the matter.

Any help would be DEEPLY appreciated.

Thanks

Nathan