Dynamic Multi-Page Multi-Column Newsletter Layout with Columnizer

June 18th, 2009 · 7 Comments

A Columnizer Case Study

Sample Page Layout I got an interesting email this week, asking about how to use Columnizer to help layout a multipage and multicolumn newsletter. The length of the content would vary from week to week, so the newsletter needed to be grow/shrink to as many pages as necessary. It also needed a custom header and footer for each page.

Here’s the sample page showing the solution in action.

The HTML

How does it work? Let’s take a look at the source, beginning with the HTML:

<body>
	<div id="page_template">
		<div class='header'>This is a header<hr></div>
		<div class='content'></div>
		<div class='footer'><hr><span>Page: </span>This is the footer.</div>
	</div>
	<div id="newsletterContent"> Newsletter Content Goes Here</div>
</body>

We define the template for what we want each page to look like. For our case, every page will have the exact same header and footer (with the page number shown in the footer), and page content should be split into 2 columns. Beneath our template, we just print out the entire contents of the newsletter that we want columnized.

Columnizing the Content

Our basic algorithm will be:

Copy the page template and append it to the bottom of the <body>
Columnize what’s in #newsletterContent into that last page until it’s full
Put whatever doesn’t fit back into #newsletterContent
Repeat until #newsletterContent is empty

Awesome, so lets see that in real life code:

		$(function(){
			// the height of the content, discluding the header/footer
			var content_height = 652;
			// the beginning page number to show in the footer
			var page = 1;
			function buildNewsletter(){
				if($('#newsletterContent').contents().length > 0){
					// when we need to add a new page, use a jq object for a template
					// or use a long HTML string, whatever your preference
					$page = $("#page_template").clone().addClass("page").css("display", "block");

					// append the page number to the footer
					$page.find(".footer span").append(page);
					$("body").append($page);
					page++;

					// here is the columnizer magic
					$('#newsletterContent').columnize({
						columns: 2,
						target: ".page:last .content",
						overflow: {
							height: content_height,
							id: "#newsletterContent",
							doneFunc: function(){
								console.log("done with page");
								buildNewsletter();
							}
						}
					});
				}
			}
			buildNewsletter();
		});

The Result

Check out the fully columnized and multi-paged newsletter sample, and be sure to check out the Columnizer project page for more samples, documentation, and of course, to download Columnizer!

It’s been really fun over the past few months to see how different people are using Columnizer. If your site uses Columnizer, give me a shout in the comments, I’d love to check it out!

Tweet This

Tags: javascript · programming · user interface

7 responses so far ↓

1 Steven Black // Jun 19, 2009 at 12:05 am

Now, can we make it look as good when printed as it looks on-screen…
2 kevin hanshaw // Sep 1, 2009 at 9:40 am

Hi, does this support navigation between the pages? How do I call the next page or previous page?
3 Adam Wulf // Sep 1, 2009 at 1:16 pm

@kevin, this case study only lays out the text on the page, but it doesn’t handle navigation between them.
4 Shravan M // Oct 29, 2009 at 12:49 pm

Hi,

Thanks for the nice plug-in. But it is bothering me it is not resulting in same number of pages in all browsers and splitting at the same place across browsers i.e., a given content does not splits equally in all the browsers eg: http://welcome.totheinter.net/autocolumn/sample10.html

Safari shows 6 pages whereas Firefox shows 5 pages.

I use lib_columns.js, but it as well has similar issue.

Do we have a solution for this? Please advise.

Thanks in advance.
5 Adam Wulf // Oct 30, 2009 at 4:31 am

@Shravan,
good catch. most of the reason is that different browsers have different default CSS stylesheets. i just put up a simple css reset and now they both show 5 pages, though still some minor differences.

i’d just recommend that you look very closely at your CSS and make sure you’re as specfic as possible. also massage the input as best you can and make use of dontsplit and dontend, and removeiffirst as appropriate.
6 Scott Stornetta // Nov 8, 2009 at 8:26 am

this is wonderful work. I am a bit confused by some of the comments here, because they seem to indicate that others are seeing multiple pages laid out (hence the safari is 6 pages vs. the ff is 5 pages). I am only seeing the first page laid out. Am I missing something? or has the code changed?
7 Gary Byrd // Apr 28, 2010 at 4:41 pm

This is a phenomenal script … great job!

Does the script allow for % widths?