Geek Answers Handbook

JQuery Pagination by div height (not item)

I am interested in using jQuery to create automatic pagination for content based on the height of the content and div, and not on the number of elements. Most of the pagination examples I could find are based on the number of elements that should be paginated, not the height of the containing div and the height of the content. This solution does not work well with variable length content.

Does anyone know of an existing solution that will split content based on height, not element number? Ideally, this would be a solution that breaks the content inside the tag, such as a long paragraph across multiple pages.

I have included some dummy code below. In addition, the code can be obtained here: Example , Code

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css" media="screen"> body {background-color:white; font:16px Helvetica, Arial; color:black;} .pagination {margin:auto; display:block; height:275px; width:300px; position:relative; overflow:hidden; border:1px solid black;} </style> </head> <body> <div class="pagination"> <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p> <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p> <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p> <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p> <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p> </div> <ul> <li>Previous</li> <li>Next</li> </body> </html>
+4
source share
4 answers

It looks like you want to download all the content at once, but just show it a little at a time for the user. Separating pages on the side of HTML content is actually impossible, and in any case will not have anything to do with jQuery.

A good UX would be to just use the scroll bar, rather than trying to invent a page up / down. However, if you absolutely must do this, you need something like this:

 $('.pagination').children().wrapAll('<div class="content"/>'); $('.next').click(function() { var current = ($('.content').css('margin-top') || '0px'); $('.content').css('margin-top',current.substring(0,current.length-2) - $('.pagination').height() + 'px'); });

The basic idea is to save the pagination separator that you have with overflow: hidden , and move the contents inside it up and down using negative fields.

Once again, but this is bad UX. Just use the scroll bar.

+6
source

It sounds like you just need to implement $.scrollTo() : I just developed the following concept using the single "Advance Forward" (Note: you must have jQuery and the scrollTo plugin:

 <button class="next">Next</button> <div id="pagination"> <p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p> <p>No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.</p> <p>(Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons.) (The previous sentence in parentheses was modified by the 14th Amendment, section 2.) The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct. The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode Island and Providence Plantations one, Connecticut five, New York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five and Georgia three.</p> <p>When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.</p> <p>The House of Representatives shall chuse their Speaker and other Officers; and shall have the sole Power of Impeachment.</p> </div>

-

 var numElmnts = $("#pagination p").length; var lastIndex = 0; $(".next").click(function(){ var nextIndex = (lastIndex >= (numElmnts-1)) ? 0 : (lastIndex+1) ; var nextParag = $("#pagination p:eq("+nextIndex+")"); $("#pagination").animate({ height: $(nextParag).outerHeight() }, 800, "linear", function(){ $("#pagination").scrollTo(nextParag, 800); }); lastIndex = nextIndex; });
+1
source

I do not know about the existing solution. However, with some JavaScript (using something like jQuery) you can calculate the height of the element. $ (element) .height (), for example. Using this method, you can iterate over the loop of elements and add them to the div depending on the available room on the left (given as a constant, I assume). So if I have 3 elements, and my height is 100 px, and jQuery returns a height of 35 px for each element, I would show the first two, and then add the last to the queue, which will be displayed when the user clicks the next.

It would be a little harder to split the text in the middle of the element, but I suppose you could use line parsing to cut the text of the element in half, measure the height, cut in half, measure the height, etc. It won't be beautiful, but it will probably work.

+1
source

Take a look at this jQuery plugin: http://rascarlito.free.fr/hoverscroll/

0
source

More articles:


All Articles