i'm trying to columnize more than one div per page. my code looks like this:
$('.container-long-text').each(function() {
var $content = $('.newsletterContent');
$content.find('table, thead, tbody, tfoot, colgroup, caption, label, legend, script, style, textarea, button, object, embed, tr, th, td, li, h1, h2, h3, h4, h5, h6, form').addClass('dontsplit');
$content.find('h1, h2, h3, h4, h5, h6').addClass('dontend');
// COLUMNIZER
var content_height = $(window).height() * 0.85; // the height of the content, discluding the header/footer
var page = 1; // the beginning page number to show in the footer
function buildColumns(){
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:first").clone().addClass("page");
// fun stuff, like adding page numbers to the footer
//$page.find(".footer span").append(page);
$(".container-long-text").append($page);
//page++;
// here is the columnizer magic
$('.newsletterContent').columnize({
columns: 2,
buildOnce: true,
target: ".page:last .content",
lastNeverTallest: true,
overflow: {
height: content_height,
id: ".newsletterContent",
doneFunc: function(){
console.log("module-text-long built");
buildColumns();
}
}
});
}
}
setTimeout(buildColumns, 1);
});
hey,
after i got the overflow problem fixed i'm hitting another problem:
i'm trying to columnize more than one div per page. my code looks like this:
right now i have two instances of the div which needs to be columnized, the
doneFuncfires twice, but both times the first instance of.newsletterContentgets columnized. the output is also confusing: the get twice the columns of the first text, but the first set is empty. it seems like the second instance of.newsletterContentis ignored.