Как разбить длинный HTML код на страницы?

Question

[Дмитрий Гойда]

Проблема следующая…

Допустим, есть длинный текст. Его длина не известна, т.е. может быть различной, в зависимости от статьи.

Есть div определенной высоты, в который нужно поместить данный текст, чтобы при этом текст делился по высоте и разбивался на страницы.

Сломал голову над решением, но так и не пришел ни к чему. Есть много различных плагинов типа Columnizer, но необходимо сделать так, чтобы следующие колонки не отображались, а листались, как страницы.



Поможите, люди добрые. Может кто-нибудь уже сталкивался с подобным?

Answer 1

[pomeo]

treesaverjs.com
пример demo.nomadeditions.com/real-eats/

Comments

[Дмитрий Гойда]

Пример, при просмотре в Опере, выдает чистый экран. В остальных нормально. В принципе нечто подобное и хочется.

[Otkrick]

У меня в FF под Linux тоже чистый экран.

[tr3m0r]

@pomeo большое спасибо! Искал подобное, помогло очень!

Answer 2

[Otkrick]

Загружаем весь документ в фоне, скрыв содержимое. В цикле делаем видимыми элементы документа с первого и до тех пор пока getOffset(CurElement)+Element.Height не будет ~= window.innerHeight и добавляем в конце панель навигации. При клике на «далее» удаляем/прячем елементы, которые отображались на прошлом шаге и по кругу.

пригодится

<meta name="viewport"
content="width: device-height; user-scalable: no; max-scale: 1; initial-scale: 1;">
<script> window.onload = function() { alert(window.innerHeight); } </script>

document.documentElement.clientWidth

function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        // "правильный" вариант
        return getOffsetRect(elem)
    } else {
        // пусть работает хоть как-то
        return getOffsetSum(elem)
    }
}

Comments

[Дмитрий Гойда]

Я уже думал над подобным.
Пробовал загружать все в скрытый див, дергать его высоту, делить на блоки, и блоки отображать в другом диве с overflow: hide, текст в диве сдвигал margin-ом. Но это как-то не кашерно…

[Otkrick]

а зачем еще скрытый div? Все грузите в нужный (div visible=hidden), пробегаете по всем его дочерним узлам DOM'а, делая их невидимыми. А потом отображаете нужные. Ничего лишнего грузить не нужно.

[Дмитрий Гойда]

Но в этом случае, если, допустим, имеется длинный параграф, он либо войдет, либо нет. А если текст вообще не форматирован?

[Otkrick]

тогда в первоначальном цикле обхода элементов все записать в массив объектов с разделением на более мелкие блоки(для текста), удалить все содержимое этого div'а(или тянуть сразу через AJAX/WS). если в тексте картинки метр на два встречаются, то уже ничем не спасти ситуацию; а текст нормально делится(хоть построчно)

[Дмитрий Гойда]

Спасибо за советы. Буду двигаться в этом направлении дальше. Других решений пока не вижу.

Answer 3

[Vampiro]

Я бы добавлял по предложению в див и контролировал появление скролинга. Как только Оно появилость — последнее предложение убирал, и через аякс давал серверу информацию о том где закончил и сколько вместилось. Может еще чего придумаю, это первое что пришло в мозг.

Answer 4

[MIsternik]

Очень актуальный вопрос для меня, я нашел только
codecanyon.net/item/textify-columnize-and-paginate...
но столкнулся с тем что долго создаются страницы, хотя это не приводит к тормозам, но для меня кажется критичным и тоже ищу идеи для реализации чего то подобного.

Comments

[Дмитрий Гойда]

Я использовал Textify codecanyon.net/item/textify-columnize-and-paginate...

[Дмитрий Гойда]

Собственно, по вашей ссылке о нем и идет речь. Строит страницу действительно долго, особенно если много контента в него засунуть, но альтернативы тогда не нашел, а больше подобного вопроса не возникало. Заказчик остался доволен.