Я использую jQuery columnizer newsletter example 10 http://welcome.totheinter.net/columnizer-jquery-plugin/
Это прекрасно работает, создавая HTML-страницу стиля рассылки новостей с 2 столбцами абзацев из содержимого в #newsletterContent
Теперь мне нужно иметь содержимое другого div с id bios, добавленным в конец столбцов на самой последней странице, где конец содержимого, но только для одного столбца, а не для разделения.
Я попытался добавить jQuery('#bios').columnize({columns:1,target: ".page:last.content"});
до конца моего javascript, но поскольку тег bios div находится в #newsletterContent, он продолжается как один столбец, но в правой колонке #newsletterContent. Таким образом, он в основном помещается в последний столбец на последней странице в конце содержимого.
Использование jQuery appendTo - это то, о чем я думал и помещаю тег div bios вне тега div newsletterContent, но тогда я не уверен, как его содержание будет продолжаться сразу же после окончания информационного наполнения, а также создать страницы, если биополе будет работать на две страницы.
HTML
jQuery jQuery (document).ready(function ($) {//var firstpage = $ ("div.first_page"). html();//alert (первая страница);
var content_height = 800; // the height of the content, discluding the header/footer
var page = 1; // the beginning page number to show in the footer
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");
// fun stuff, like adding page numbers 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();
}
}
});
}
}
setTimeout(buildNewsletter, 0);
});
** Редактировать ** Я попытался использовать это, чтобы добавить переполнение BIOS мимо нижнего колонтитула последней страницы и не создает новую страницу. Изменение css, которое я прокомментировал, создал био в одном столбце, но при переполнении этой проблемы возникла проблема не с дополнительной страницей. Что я могу изменить, чтобы создать страницу?
else {
$(".page:last .last.column").append($("#bios"));
//$('#bios').columnize({columns:1});
//$("#bios").parents(".last.column").css( "width", "100%" );
if ($(".page:last .last.column").height() > 800) {
buildNewsletter();
}
}
Если вы хотите, чтобы #bios был на собственной странице в конце документа, внутри 1 столбца, я считаю, что вы можете сделать это с помощью кода, например: https://gist.github.com/adamwulf/7454134
Если вместо этого вы хотите добавить #bios в первый столбец последней страницы (который предположил бы, что содержимое последней страницы достаточно короткое, чтобы обрабатывать дополнительную высоту #bios без переполнения), тогда вы можете просто добавить else
в buildNewsletter()
if:
}else{
$(".page:last .first.column").append($("#bios"));
}
$(".page:last .last.column").append($("#bios"));
и затем проверьте$(".page:last .last.column").height()
чтобы увидеть, является ли он выше, чем должен быть. если это так, то это приведет к приведенному выше решению добавления новой страницы.