Skip to content

Instantly share code, notes, and snippets.

@capndesign

capndesign/multipage-articles.html

Created January 4, 2010 20:24
Show Gist options
  • Save capndesign/268827 to your computer and use it in GitHub Desktop.
Save capndesign/268827 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-page Articles with JQuery
Raw
readme.mkd

I had a client that needed a really light-weight implementation of multi-page blog posts that refreshed the page. Due to time constraints, we couldn't build a plugin for the CMS (Movable Type) and it was a requirement to use static pages. This left doing something in JavaScript, which is fine because it's not difficult to make it accessible and easy for a writer to use.

The two requirements for this implementation are JQuery and JQuery Query (which could be replaced with straight JS, but this was quicker and easier). The rest is straight HTML and CSS.

Usage

  • In order to create a new page in your article add <!-- PAGE BREAK --> in your code wherever you'd like a new page to begin.
  • Passing ?page=n to the querystring of the URL will let you select a particular page.
  • If the page is unrecognized or the user passes a non-number, it will show page 1. The one exception is the value "all", which will show the content of all the pages.
  • One note: I recommend setting the .entry-body element to display: none; in your CSS. That way the user won't see the text change from everything to just a small part of it. It means they'll see nothing for a second, but I've tried to do everything I can to keep that time to a minimum.

That's it! If you want to try out the file below, you'll need to have JQuery Query in the same directory as the HTML file.

Raw
multipage-articles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="">
<head>
<title>Multipage Article</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.query-2.1.7.js"></script>
<script type="text/javascript">
$('.entry-permalink .entry-body').ready(function() {
var text = $('.entry-permalink .entry-body').html();
var pages = text.split('<!-- PAGE BREAK -->');
if (pages.length <= 1 || $.query.get('page') == 'all') {
$('.entry-permalink .entry-body').show();
} else {
var thisPage = parseInt($.query.get('page')) - 1;
if (isNaN(thisPage)) thisPage = 0;
if (thisPage < 0) thisPage = 0;
if (thisPage >= pages.length) thisPage = 0;
$('.entry-permalink .entry-body').html(pages[thisPage]).show();
$('h1.entry-title').after('<h4 class="page-number"></h4>').addClass('has-byline');
$('h4.page-number').html('Page ' + (thisPage + 1) + ' of ' + pages.length);
$('.entry-permalink .entry-body').append('<div id="pagination-nav"></div>');
if (thisPage - 1 >= 0) {
var prevPage = thisPage;
$('#pagination-nav').append('<li><a href="?page=' + prevPage + '">&laquo; Previous</a></li>');
}
$.each(pages, function(i) {
curPage = i + 1;
if (i == thisPage) {
$('#pagination-nav').append('<li>' + curPage + '</li>');
} else {
$('#pagination-nav').append('<li><a href="?page=' + curPage + '">' + curPage + '</a></li>');
}
});
if (thisPage + 2 <= pages.length) {
var nextPage = thisPage + 2;
$('#pagination-nav').append('<li><a href="?page=' + nextPage + '">Next &raquo;</a></li>');
}
}
});
</script>
</head>
<body class="entry-permalink">
<div class="entry">
<h1 class="entry-title">I am the Entry Title</h1>
<div class="entry-body">
<p>Per nibh claritatem feugait iriure decima. Nunc usus congue dynamicus seacula parum. Eorum nulla enim claritas est est. Enim qui sed liber eros sit. Quod quam futurum legunt legentis feugait. Litterarum legunt claritatem humanitatis in sit. </p>
<p>Diam nibh fiant quis consequat nostrud. Mutationem sollemnes legentis qui quod praesent. Me iusto claritatem littera dolore lius. Diam in nunc zzril videntur velit. Parum et videntur praesent parum litterarum. Non facer parum notare legentis mirum. </p>
<p>Decima typi consequat wisi dolore facilisis. Gothica humanitatis quam in euismod wisi. Nostrud quinta modo amet non mirum.Per nibh claritatem feugait iriure decima. Nunc usus congue dynamicus seacula parum. Eorum nulla enim claritas est est. Enim qui sed liber eros sit. Quod quam futurum legunt legentis feugait. Litterarum legunt claritatem humanitatis in sit. </p>
<!-- PAGE BREAK -->
<p>Diam nibh fiant quis consequat nostrud. Mutationem sollemnes legentis qui quod praesent. Me iusto claritatem littera dolore lius. Diam in nunc zzril videntur velit. Parum et videntur praesent parum litterarum. Non facer parum notare legentis mirum. </p>
<p>Decima typi consequat wisi dolore facilisis. Gothica humanitatis quam in euismod wisi. Nostrud quinta modo amet non mirum.</p>
<!-- PAGE BREAK -->
<p>Per nibh claritatem feugait iriure decima. Nunc usus congue dynamicus seacula parum. Eorum nulla enim claritas est est. Enim qui sed liber eros sit. Quod quam futurum legunt legentis feugait. Litterarum legunt claritatem humanitatis in sit. </p>
<p>Diam nibh fiant quis consequat nostrud. Mutationem sollemnes legentis qui quod praesent. Me iusto claritatem littera dolore lius. Diam in nunc zzril videntur velit. Parum et videntur praesent parum litterarum. Non facer parum notare legentis mirum. </p>
<p>Decima typi consequat wisi dolore facilisis. Gothica humanitatis quam in euismod wisi. Nostrud quinta modo amet non mirum.</p>
<!-- PAGE BREAK -->
<p>Per nibh claritatem feugait iriure decima. Nunc usus congue dynamicus seacula parum. Eorum nulla enim claritas est est. Enim qui sed liber eros sit. Quod quam futurum legunt legentis feugait. Litterarum legunt claritatem humanitatis in sit. </p>
<p>Diam nibh fiant quis consequat nostrud. Mutationem sollemnes legentis qui quod praesent. Me iusto claritatem littera dolore lius. Diam in nunc zzril videntur velit. Parum et videntur praesent parum litterarum. Non facer parum notare legentis mirum. </p>
<p>Decima typi consequat wisi dolore facilisis. Gothica humanitatis quam in euismod wisi. Nostrud quinta modo amet non mirum.</p>
<p>Diam nibh fiant quis consequat nostrud. Mutationem sollemnes legentis qui quod praesent. Me iusto claritatem littera dolore lius. Diam in nunc zzril videntur velit. Parum et videntur praesent parum litterarum. Non facer parum notare legentis mirum. </p>
<p>Decima typi consequat wisi dolore facilisis. Gothica humanitatis quam in euismod wisi. Nostrud quinta modo amet non mirum.</p>
</div><!-- end entry-body -->
</div><!-- end entry -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment