Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

more than once instance on one page #223

Open
pppws opened this issue Jun 30, 2017 · 1 comment
Open

more than once instance on one page #223

pppws opened this issue Jun 30, 2017 · 1 comment

Comments

@pppws
Copy link

pppws commented Jun 30, 2017

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
Copy link
Owner

adamwulf commented Jul 5, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants