Пример рассылки jQuery columnizer с несколькими последними абзацами, не разделенными?

0

Я использую 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();
    }

}
Теги:

1 ответ

1

Если вы хотите, чтобы #bios был на собственной странице в конце документа, внутри 1 столбца, я считаю, что вы можете сделать это с помощью кода, например: https://gist.github.com/adamwulf/7454134

Если вместо этого вы хотите добавить #bios в первый столбец последней страницы (который предположил бы, что содержимое последней страницы достаточно короткое, чтобы обрабатывать дополнительную высоту #bios без переполнения), тогда вы можете просто добавить else в buildNewsletter() if:

}else{
    $(".page:last .first.column").append($("#bios"));
}
  • 0
    Спасибо, Адам, у меня уже есть контент #bios, добавляемый на отдельную последнюю страницу, что хорошо, если оно переполняется. Есть ли какое-либо решение, чтобы добавить биос непосредственно под содержимым последней страницы и позволить ему переполниться, если содержимое последней страницы или биос длиннее страницы. Можно ли добавить #bios к последнему столбцу, а затем использовать условие if, что, если содержимое длиннее 1 страницы, добавить новую страницу?
  • 0
    Вы можете сделать что-то вроде: $(".page:last .last.column").append($("#bios")); и затем проверьте $(".page:last .last.column").height() чтобы увидеть, является ли он выше, чем должен быть. если это так, то это приведет к приведенному выше решению добавления новой страницы.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню