adamwulf / Columnizer-jQuery-Plugin

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. And, of course, it’s easy to use!
http://welcome.totheinter.net/columnizer-jquery-plugin/
Other
758 stars 147 forks source link

more than once instance on one page #223

Open pppws opened 7 years ago

pppws commented 7 years ago

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:

$('.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);
});

right now i have two instances of the div which needs to be columnized, the doneFunc fires twice, but both times the first instance of .newsletterContent gets 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 .newsletterContent is ignored.

adamwulf commented 7 years ago

The overflow: will always use the first matched item as the container, so if .newsletterContent matches more than 1 div, it'll always use the first div. One workaround to try would be to generate a unique id per .newsletterContent and add that identifier as a new class, and then use that identifier instead of .newsletterContent.