Question

I’m trying to split a large html page into smaller fixed height and width chunks (pages).

Its pretty easy if I know the pages count – I can generate required number of pages first and then fill them with source content children:

children = $('#source').children();
width = 600;
height = 600;

// already generated 'pages'
divs = $('.page');
$(divs).width(width);

pages = divs.length;
i = 0;

for (var c = 0; c < pages; ++c) {

    var div = $(divs).eq(c);

    while (i < children.length && div.height() < height) {
        $(children[i++]).clone().appendTo(div);
    }

    if(div.height() > height) {
        div.contents().last().remove();
        i--;
    }

}

But how can I do the same thing if I don’t know the pages count?
How to wrap content with $(‘div.page’) and keep adding pages until I reach the end of content?

thanks

Answer 1

You would want to use a loop to keep creating pages / filling them with content until you hit some endpoint, where you’d break out of the loop. The key here is dynamically creating the page divs in the loop. You can use document.createElement or simply $(“”) (or other jQuery ways). Something like this:

var i = 0;   
while(true) {
        if (content  /* have more content */) {
            var page = document.createElement("div");
            $(page).addClass('page');
            var children = $(content).children();
            while (i < children.length && div.height() < height) {
                $(children[i++]).clone().appendTo(page);
            }
            $(body).append(page);
        } else {
            break;
        }
    }

You may also want to use jQuery’s each method if you have defined blocks of content to add to each ‘page’.

Comment if you need more help.