Solved

How can I give jQuery pagination a 'single-page-view' option?

Posted on 2010-08-13
2
766 Views
Last Modified: 2012-05-10
I'm using this jQuery pagination script (http://bit.ly/enavujpag) to break up long articles into chunks with a navigation menu of "previous-1-2-3-next". I'd like to add an option that allows someone to click to view the whole article in case they don't want to click through each chunk, or want a print preview. The NY Times does this on long articles, for example, though their "Single Page" link is separate from the "prev-next" menu (which would be OK with me). Can someone add a single-page or print-preview option that displays all of the text of an article? Code attached or from demo at:

http://nathanbweb.host22.com/demo/jquery-paginate/page.html

I'd also be willing to use this plugin instead if it's easier to configure:

http://dl.dropbox.com/u/4151695/html/pajinate-0.2/examples/example1.html

Thanks!
<script>
// begin pagination - via http://bit.ly/enavujpag    
$(document).ready(function(){

	//how much items per page to show
	var show_per_page = 5;
	//getting the amount of elements inside content div
	var number_of_items = $('#content').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);

	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);

	//now when we got all we need for the navigation let's make it '

	/*
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/
	var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
		current_link++;
	}
	navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

	$('#page_navigation').html(navigation_html);

	//add active_page class to the first page link
	$('#page_navigation .page_link:first').addClass('active_page');

	//hide all the elements inside content div
	$('#content').children().css('display', 'none');

	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}

}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}

}
function go_to_page(page_num){
	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());

	//get the element number where to start the slice from
	start_from = page_num * show_per_page;

	//get the element number where to end the slice
	end_on = start_from + show_per_page;

	//hide all children elements of content div, get specific items and show them
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	/*get the page link that has longdesc attribute of the current page and add active_page class to it
	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

	//update the current page input field
	$('#current_page').val(page_num);
}
  </script>

...

	<!-- the input fields that will hold the variables we will use -->
	<input type='hidden' id='current_page' />
	<input type='hidden' id='show_per_page' />

	<!-- Content div. The child elements will be used for paginating(they don't have to be all the same,
		you can use divs, paragraphs, spans, or whatever you like mixed together). '-->
	<div id='content'>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec libero massa. Proin pretium fermentum elit, et 

...

[contains 12 paragraphs]

</div>

<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>

Open in new window

0
Comment
Question by:nbierm65
2 Comments
 
LVL 1

Accepted Solution

by:
hulutter earned 250 total points
ID: 33432175
Try this....
<script>
// begin pagination - via http://bit.ly/enavujpag    
$(document).ready(function(){

	//how much items per page to show
	var show_per_page = 5;
	//getting the amount of elements inside content div
	var number_of_items = $('#content').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);

	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);

	//now when we got all we need for the navigation let's make it '

	/*
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/
	var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
		current_link++;
	}
	navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
	
  // ***START EDITIG
  navigation_html += '<br /><a class="show_all" href="javascript:show_all();">Show All</a>';  
  
  navigation_html_show_paging = navigation_html;
  navigation_html_hide_paging = '<a class="hide_paging" href="javascript:back_to_paging();">Back To Pagination</a>';	

	$('#page_navigation').html(navigation_html_show_paging);

  // END***

	//add active_page class to the first page link
	$('#page_navigation .page_link:first').addClass('active_page');

	//hide all the elements inside content div
	$('#content').children().css('display', 'none');

	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}

}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}

}
function go_to_page(page_num){
	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());

	//get the element number where to start the slice from
	start_from = page_num * show_per_page;

	//get the element number where to end the slice
	end_on = start_from + show_per_page;

	//hide all children elements of content div, get specific items and show them
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	/*get the page link that has longdesc attribute of the current page and add active_page class to it
	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

	//update the current page input field
	$('#current_page').val(page_num);
}

//***START ADDING
function show_all() {
  $('#page_navigation').html(navigation_html_hide_paging);
  $('#content').children().css('display', 'block');
}

function back_to_paging() {
  $('#page_navigation').html(navigation_html_show_paging);
  //hide all the elements inside content div
	$('#content').children().css('display', 'none');  
	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');
}
// END
  </script>

...

	<!-- the input fields that will hold the variables we will use -->
	<input type='hidden' id='current_page' />
	<input type='hidden' id='show_per_page' />

	<!-- Content div. The child elements will be used for paginating(they don't have to be all the same,
		you can use divs, paragraphs, spans, or whatever you like mixed together). '-->
	<div id='content'>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec libero massa. Proin pretium fermentum elit, et 

...

[contains 12 paragraphs]

</div>

<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>
// JavaScript Document

Open in new window

0
 

Author Closing Comment

by:nbierm65
ID: 33432470
perfect! Thank you!!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now