Home/ Questions/Q 539407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:07:58+00:00

I am interested in using jQuery to create automatic pagination for content based on

  • 0

I am interested in using jQuery to create automatic pagination for content based on the height of the content and the div, rather than by number of items. Most pagination examples I have been able to find are based on the number of items to be paginated, rather than the height of the containing div and the height of the contents. This solution does not work well with content of varying length.

Do anyone know of an existing solution that will paginate content based on height rather than item number? Ideally it would be a solution that would split content within a tag, such as a long paragraph across multiple pages.

I have included some dummy code below. Alternatively, the code can be accessed 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It sounds like you want to load all the content at once, but only show a little bit of it at a time to the user. Paginating HTML content server side isn’t really feasible, and wouldn’t have anything to do with jQuery in any case.

    Good UX would be to just use a scroll bar instead of trying to reinvent page up/down. That said, if you absolutely must do this, then you want 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 keep the pagination div that you have with overflow: hidden and move the content inside of it up and down using negative margins.

    One more time though, this is bad UX. Just use a scrollbar.

    • 0