Динамичный рост страницы и плавность, при этом?

Question

Динамичный рост страницы и плавность, при этом?

0

Я на самом деле никогда ничего не делал с динамическими страницами, растущими на мне, поэтому мне интересно, каков настоящий трюк. Я создал пример и дал ему некоторый динамический контент, однако, чтобы страница правильно реагировала, и плавно не идет так, как я думал.

Вот что я имею в настоящее время для моего контроллера jQuery

var container = $('#container'),
    heightOrig = $(document).height(),
    contHeightOrig = container.height(),
    limit = 8,
    current = 0;

$('.current').html( heightOrig + 'px' );

var end = setInterval(function() {

    if ( current === limit ) {
        if ( contHeightOrig != container.height() ) {
            container.height($(document).height());
        }
        clearInterval( end );
    }

    var height = $(document).height(),
        newEnd = $('.offset:last-child'),
        appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';

    if ( contHeightOrig != container.height() ) {
        container.height($(document).height());
    }

    newEnd.after(appendNew);

    current++;

}, 1000);

Очевидно, что отображаемое содержимое сейчас просто добавлено, так как я пытаюсь понять функциональность этого.

Пример JSFiddle

WASasquatch 16 апр. 2014, в 05:41

Источник

Теги:

jquery

html

css3

dynamic

webpage

1 ответ

Ещё вопросы

Lawrence Johnson · Accepted Answer · 2014-04-16T01-35-00.000Z

Вам не нужно настраивать высоту страницы или контейнер с помощью javascript, если вы не устанавливаете фиксированные высоты для этих объектов. Когда вы добавите больше контента, их высоты будут автоматически корректироваться.

Измененный CSS

html, body { margin: 0; padding: 0; }
body > #container { min-height: 100%; }
#content { padding-bottom: 100px; }
#footer { clear: both; position: relative; z-index: 10; height: 100px; margin-top: 0; }

Измененный JS

var container = $('#container'),
heightOrig = $(document).height(),
contHeightOrig = container.height(),
limit = 8,
current = 0;

$('.current').html( heightOrig + 'px' );

var end = setInterval(function() {

    if ( current === limit ) {
        //if ( contHeightOrig != container.height() ) {
        //    container.height($(document).height()-100);
        //}
        clearInterval( end );
    }

    var height = $(document).height(),
        newEnd = $('.offset:last-child'),
        appendNew = '<div class="offset"><p class="adjustment">HTML at ' + height + 'px</p></div>';

    //if ( contHeightOrig != container.height() ) {
        //container.height($(document).height()-100);
    //}

    newEnd.after(appendNew);

    current++;

    }, 1000);

Вот обновленная вилка для вас:

http://jsfiddle.net/Rvm6L/

РЕДАКТИРОВАТЬ:

Хорошо, вот jsfiddle с гладкой анимацией. Взял небольшой финал, и вы захотите очистить CSS и JavaScript. Решение не отличается от того, что я предлагал, просто добавил немного анимации для вас, которая настраивается на основе разницы между количеством контента и видовым окном (jQuery (window).height())

http://jsfiddle.net/Rvm6L/2/

Удачи!

Это немного нарушает макет, а как насчет сглаживания? Вам нужно использовать .animate() для нового размера? Также я обновил свой код и заставил его работать без перерыва (-100 больше не был нужен, когда я удалил поля)
Да, но какой смысл сглаживать? Контент растет внизу, где его все равно не видно. Я могу применить некоторые исправления для фиксированного нижнего колонтитула, если хотите, но мне интересно, что вы собираетесь использовать для анимации
В этом-то и дело, это будет видно, так как пользователь будет следить за нижней частью страницы для нового обновления xD, и список должен остаться для ссылки.
Я сделал это с помощью animate, но он не такой плавный или почти такой же отзывчивый, как и контент, лежащий в основе до его анимации.
Дело в том, что независимо от того, на что смотрит пользователь, когда что-то добавляется внизу, для его текущего представления ничего не меняется. Я посмотрю на последнюю ссылку, которую вы только что опубликовали, но вот обновленная, которая, по крайней мере, держит нижний колонтитул внизу: jsfiddle.net/Rvm6L/1
Хорошо, если вы хотите, чтобы нижний колонтитул сдвинулся вниз, вам просто нужно сохранить его абсолютное положение, и вам нужно сделать анимацию, которая передает его свойство "bottom" css на величину добавленного контента, а затем анимирует его в 0. Дай посмотреть, смогу ли я что-нибудь взбить.
Вау, этот последний комментарий не очень хорошо понял ... Не обижайся на тебя, я просто не понимаю этого. Я думаю, что понимаю это с position:absolute; у него есть набор left и bottom атрибутов, или что-то в этом роде. Математика вовлечена, хотя только что потеряла меня.
Я только что попробовал это, что не прошло хорошо ... Я думал, что он запускает добавление после каждой анимации, но он оживляет кучу места в конце цикла.
давайте продолжим это обсуждение в чате