Reputation: 11
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
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'> of </font>
<font color='#ffffff' size='5'><span class='totalPages'></span></font>
</div>
</td></tr>
<!-- END Main Body (middle) -->
</table>
Upvotes: 1
Views: 1962
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