Dynamic Multi-Page Multi-Column Newsletter Layout with Columnizer

A Columnizer Case Study

Sample Page LayoutI 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:

  1. Copy the page template and append it to the bottom of the <body>
  2. Columnize what’s in #newsletterContent into that last page until it’s full
  3. Put whatever doesn’t fit back into #newsletterContent
  4. 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!

25 responses to “Dynamic Multi-Page Multi-Column Newsletter Layout with Columnizer”

  1. Steven Black

    Now, can we make it look as good when printed as it looks on-screen…

  2. kevin hanshaw

    Hi, does this support navigation between the pages? How do I call the next page or previous page?

  3. Shravan M

    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.

  4. Scott Stornetta

    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?

  5. Gary Byrd

    This is a phenomenal script … great job!

    Does the script allow for % widths?

  6. Steven

    Hi,

    Does anyone know why we see only one page in Internet Explorer 7? (I know it’s an old browser, but in companies..)

    It seems to be a really great script!!

  7. Lee Tindell

    If anyone needs paging, I have posted a solution on stack overflow. Which allows you to hide pages of columns, showing the first and then fade in the next in with a click or go back to the previous by clicking another link. Hope it all makes sense:

    http://stackoverflow.com/questions/4239133/i-want-to-create-paging-between-sets-of-columns-created-via-the-jquery-columnizer/4349746#4349746

  8. Chris

    Great script.

    I’m trying to add a div to the first page that would have a lead image, that would be the width of the entire page. Do you have any idea how this might be done?

  9. David

    Would be wonderfull if printing keeps the same layout. Is it possible?

  10. Vyache

    I have a 3 column layout, header image and a few sub header images that need to be spanned across a 3 column layout without being broken.

    I have a height requirement for the paper, 11×17. The template idea is great, but it does not combine the height that is used in the plugin. This messes up my height requirement.

    Is there a way around this issue?

    Thanks,
    ~Vyee

  11. Vyache

    This is the example:
    http://jsfiddle.net/HcFc7/

    Use a real image, I can’t the image to show here for some reason.

    I’m working locally…

  12. Vyache

    Here is one with a image…
    http://jsfiddle.net/D9hjv/

  13. Vyache

    I have 2 other issues,

    first, I can’t get my odd and even facing pages to work right, maybe the recursive nature of the program isn’t letting me doing a simple page%2 == 0….

    I was able to do it with a hack using the following:

    $(“.cr-subhead-page-odd:even”).css(“display”, “inline”);
    $(“.cr-subhead-page-even:odd”).css(“display”, “inline”);
    $(“.cr-subhead-page-odd:odd”).css(“display”, “none”);

    The other issue is, how do I assign a min-height, even if no content is available? I want a almost blank page, even if it has some text in it? I’m going to try to do it with css, but maybe its a plugin feature…

    http://jsfiddle.net/grimreaper01/2DXrw/1/

    Thanks

  14. Vyache

    I forgot to point out, why does the template use an ID instead of a class?

    That invalidates the HTML code!

    When I use a class instead of id, I get style errors…

    Unless I’m doing something wrong…

  15. Omar

    Hi, I have a site wide header and footer. Is it possibe for the layout to appear between my header and footer?? At the moment, it jumps to the bottom of the screen below the footer.

  16. Vitor

    Vyache, I’m having the same issue, sometimes my first page appears again after the second page, I’m guessing this is happening because many of the divs are using the same id.
    Did you fmanage to fix it?

  17. Vyache

    thanks!

  18. Ray

    Adam, can you post or point me to a script that will reset columnizer back to a single column when the page width is below a certain dimension. (for media queries).

    Thanks

  19. Dynamic Multi-Page Multi-Column Newsletter Layout with Columnizer « Write about writing
  20. Columnizer JQuery Plugin - jQuery Plugins

    [...] 10: Layout a newsletter over multiple 2 column pages. CheckĀ this postĀ for the motivation and [...]

  21. Leo

    Thank you! This is a great piece of code.

    I have a question: I am using the newsletter layout with two columns. The two columns have the same length in every page except in the last one, where you might get the first column filled up and the second empty, depending on the length of the text. I would like to balance the two columns in every page, including the last one, so that both columns always have the same length. How can this be done?

    TIA

Leave a Reply

Google Author link