UPDATE
I am facing an issue where I am trying to add the same set of buttons inside multiple divs, however, it seems that the button set only appears in one div at a time. I want the button set to show up in every location where I place it. Here is the code I am using:
(function($){
// jQuery plugin creation:
$.fn.sweetPages = function(opts){
// Create an empty opts object if no options were passed
if(!opts) opts = {};
var resultsPerPage = opts.perPage || 3;
// Best suited for unordered lists, but ordered lists would work too:
var ul = this;
var li = ul.find('li');
li.each(function(){
// Calculate the height of each li element and store it using the data method:
var el = $(this);
el.data('height',el.outerHeight(true));
});
// Calculate the total number of pages:
var pagesNumber = Math.ceil(li.length/resultsPerPage);
// Do nothing if there are less than two pages:
if(pagesNumber<2) return this;
// Create the controls div:
var swControls = $('<div class="swControls">');
for(var i=0;i<pagesNumber;i++)
{
// Slice a portion of the lis, wrap it in a swPage div:
li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
// Add a link to the swControls div:
swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
}
ul.append(swControls);
var maxHeight = 0;
var totalWidth = 0;
var swPage = ul.find('.swPage');
swPage.each(function(){
// Loop through all the newly created pages:
var elem = $(this);
var tmpHeight = 0;
elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
if(tmpHeight>maxHeight)
maxHeight = tmpHeight;
totalWidth+=elem.outerWidth();
elem.css('float','left').width(ul.width());
});
swPage.wrapAll('<div class="swSlider" />');
// Set the height of the ul to the height of the tallest page:
ul.height(maxHeight);
var swSlider = ul.find('.swSlider');
swSlider.append('<div class="clear" />').width(totalWidth);
var hyperLinks = ul.find('a.swShowPage');
hyperLinks.click(function(e){
// Slide the swSlider div and mark the clicked link as active:
$(this).addClass('active').siblings().removeClass('active');
swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
e.preventDefault();
});
// Mark the first link as active:
hyperLinks.eq(0).addClass('active');
// Center the control div:
swControls.css({
'left':'50%',
'margin-left':-swControls.width()/2
});
return this;
}})(jQuery);
$(document).ready(function(){
/* This code is executed once the DOM is loaded */
// Splitting the #holder UL into pages of 3 LIs each:
$('#holder').sweetPages({perPage:1});
// Moving the page links to the main container instead of the ul:
var controls = $('.swControls').detach();
controls.appendTo('#main');
// Create Navigation Buttons
function goToPage(page){
$('.swShowPage:contains("' + page + '")').click();
}
var baseFB = '<input type="button" class="swFB" />';
var offset = 'pgOffset';
var active = '.swShowPage.active';
var $pgBack = $(baseFB)
.attr('id', 'button_back')
.attr('value', "Back")
.attr(offset, '-1');
var $pgForward = $(baseFB)
.attr('id', 'button_forward')
.attr('value', "Next")
.attr(offset, '1');
$.each([$pgBack, $pgForward], function(i,$obj){
$obj.click(function(){
var nextPage = parseInt($(active).text(), 10) + parseInt($(this).attr(offset), 10);
goToPage(nextPage);
});
});
$($pgForward).addClass("teach_create_backforward");
$($pgBack).addClass("teach_create_backforward");
$('.teach_create_pageheader_back').prepend($pgBack);
$('.teach_create_pageheader_forward').prepend($pgForward);
});
The HTML:
<li>
<div class="noselect" id="teach_create_pageheader">
<span id="teach_create_pageheader_back"></span>
Step 1
<span id="teach_create_pageheader_forward"></span>
</div>
</li>
<li>
<div class="noselect" id="teach_create_pageheader">
<span id="teach_create_pageheader_back"></span>
Step 2
<span id="teach_create_pageheader_forward"></span>
</div>
<li>
<div class="noselect" id="teach_create_pageheader">
<span id="teach_create_pageheader_back"></span>
Step 3
<span id="teach_create_pageheader_forward"></span>
</div>
<li>