Scott
Scott

Reputation: 11

Jquery javascript not working on Safari 5

This script works fine in IE & FF not in safari 5. It appears not to intialize (ie nothing works). The Script will display one row of the table at a time hiding the others until next or previous is clicked. Original can be viewed on halifaxhype.com If anyone can make a suggestion I would appreciate it as I am not normally working with java script or Jquery or Safari. (java script followed by HTML below - due to posting restrictions anchor links and image links removed from the html)

JS - initial

$(document).ready(function () {
$('#myTable').paginateTable({ rowsPerPage: 1 });
});

JS - main

(function ($) {

  $.fn.paginateTable = function(options) {

      var settings = jQuery.extend({
          rowsPerPage: 1,               /* the number of rows that comprise a page */
          nextPage: ".nextPage",   /* selector for "Next Page" dom element. Click to change page. */
          prevPage: ".prevPage",  /* selector for "Previous Page" dom element. Click to change page. */ 
          currentPage: ".currentPage", /* selector for "Current Page" dom element. Display only. */
          totalPages: ".totalPages", /* selector for "Total Pages" dom element. Display only. */
          pageNumbers: ".pageNumbers",  /* selector for container for autogenerated page number links */
          pager: ".pager", 
          pagernext: ".pagernext",
          pagerprev: ".pagerprev",         /* selector for container of all paging dom elements */
          autoHidePager: true      /* hides the pager (see selector above) if there is only a single page */
      }, options || {});

      return this.each(function(){

          var table = $(this);
          var pager = $(settings.pager);
          var pagernext = $(settings.pagernext);
          var pagerprev = $(settings.pagerprev);
          var nextPage = pagernext.find(settings.nextPage);
          var prevPage = pagerprev.find(settings.prevPage);
          var currentPage = pager.find(settings.currentPage);

          nextPage.click(function(){
                  var pageNum = getCurrentPage(currentPage.text());
                  displayPage(table, pageNum+1, settings);
                  return false;
              });

          prevPage.click(function(){
                  var pageNum = getCurrentPage(currentPage.text());
                  displayPage(table, pageNum-1, settings);
                  return false;
              });

          displayPage(table, getCurrentPage(currentPage.text()), settings);
      });
  };

  function getCurrentPage(pageText){
      var pageNum = parseInt(pageText,10);
      if (isNaN(pageNum)){
          pageNum = 0;
      }
      return Math.max(1, pageNum);
  }

  function displayPage(table, pageNum, settings){
      pageNum = Math.max(1, pageNum);

      if (settings.rowsPerPage > 0){
          var rows = table.find("tbody tr");
          var totalPages = Math.ceil(rows.size() / settings.rowsPerPage);

          if (pageNum   <= 1){  
                  $(settings.pagerprev).hide();
                  }
       if (pageNum   > 1){  
                  $(settings.pagerprev).show();
                  }
       if (pageNum  >= totalPages){  
                  $(settings.pagernext).hide();
                  } 
        if (pageNum  < totalPages){  
                  $(settings.pagernext).show();
                  }           

          if (settings.autoHidePager && totalPages <= 1){
              $(settings.pager).hide();
          }    



          else if (totalPages > 0){

              pageNum = Math.min(pageNum, totalPages);
              var rowStartIndex = (pageNum - 1) * settings.rowsPerPage;
              var rowEndIndex = pageNum * settings.rowsPerPage;
              $.each(rows, function(index, row){
                  if (index >= rowStartIndex && index < rowEndIndex){
                      $(row).show();
                  }
                  else{
                      $(row).hide();
                  }
              });

              var pager = $(settings.pager);
              pager.find(settings.currentPage).text(pageNum);
              pager.find(settings.totalPages).text(totalPages);

              var pageNumbers = pager.find(settings.pageNumbers);
              if (pageNumbers.size() > 0){
                   pageNumbers.empty();
                   for(var i = 1; i <= totalPages; i++) {
                       pageNumbers.append("<a href='#' id='" + i + "'>" + i + "</a>");
                   }

                   pageNumbers.children('a').click(function(){
                       displayPage(table, $(this).attr("id"), settings);
                       return false;
                   });
              }
          }

      }
  }

})(jQuery);

HTML

  <!-- Main Body (middle) -->
<table><tr>
<td style='padding-left: 0px; padding-right: 0px; height: 275px; ; width: 666px;' >

<!-- Table to Contain 1-Prev, 2-Events, 3-Next -->
<table border=0 bordercolor=orange width='100%' cellpadding='0' cellspacing='0'><tr>
<!--  1-Prev -->
<td width='25' valign='middle' align='center'> <div class='pagerprev'>

<a href='#' alt='Previous' class='prevPage'> <PREV image link removed</div> </td>

<!--  2-Events -->
<td>
  <!-- Table for  Events  This is what Slides in and out-->

  <table id="myTable" border=0 bordercolor=red width=100%><tbody>

 <!--- Event loop#1 Event ID#52 --->
  <tr><td  style='padding-left: 15px; padding-right: 15px;'   valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Bitter End</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Martini Monday at The Bitter End!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> <p>Absolutely the best place to be on a Monday night in Halifax! Featuring a discounted martini menu and DJ Nigel Lutes. Disc<br><br>Mon, Jan 31, 2011 - All Day </div> </center></td></tr>
<!--end event-->

 <!--- Event loop#2 Event ID#95 --->
  <tr><td  style='padding-left: 15px; padding-right: 15px;'   valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Mexicali Rosa's</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Double Margaritas! Only $6.00!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> <p>Every Monday!<br />- Double Margaritas! Only $6.00! (Taxes in)<br />- 32 oz. Canadian or Coors Light Draught - $8.99</p>
<br><br>Mon, Jan 31, 2011 - All Day </div> </center></td></tr>
<!--end event-->

 <!--- Event loop#3 Event ID#54 --->
  <tr><td  style='padding-left: 15px; padding-right: 15px;'   valign='top' width='508'><div class='eslider' align='left' style='float: left; width=200'>image</div><div id='eslider' align='right' style='float: right;width=300'><span style='font-family: Verdana; color: #ffffff; font-size: 23px; font-weight: bold;'>Economy Shoe Shop</span><br><span style='font-family: Verdana; color: #D4D4D4; font-size: 18px;'>Homemade Lasagna & House Salad only $9.00!</span> <hr height='1' width='100%'><span style='font-family: Verdana; color: #D4D4D4; font-size: 12px;'> Hungry? Stop by The Economy Shoe Shop for our "Feature Of The Day"! Only $9.00 all day long! Monday's Feature Of The Day: We<br><br>Mon, Jan 31, 2011 - 08:00</div> </center></td></tr>
<!--end event-->



    <tbody>
  </table>
  <!-- END Table for  Events  -->
</td>
<!--  3-Next -->  
<td width='25' valign='middle' align='center'><div class='pagernext'>next link removed</div> </td>
</tr>
<tr valign="top"><td colspan="3" height="33" align='center'>

<div class='pager'>

<!-- bottom stuff to view events and profile more neatly  this could be removed if <Div> code could be fixed see above -->
View Profile&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Click Here For More Detailsbr><br>
<!-- End of bottom stuff to veiw events and profile more neatly-->

<font color='#ffffff' size='5'>
<span class='currentPage' ></span></font>

<font color='#ffffff' size='2'>&nbsp;&nbsp;of&nbsp;&nbsp;</font>
<font color='#ffffff' size='5'><span class='totalPages'></span></font>


</div>

</td></tr>
 <!-- END Main Body (middle) -->
</table>

Upvotes: 1

Views: 1962

Answers (1)

Phrogz
Phrogz

Reputation: 303146

Your HTML is very broken. Validate your HTML first, then try again. I have attempted to reproduce your problem here, but see no problems with Safari.

Upvotes: 1

Related Questions