Полноэкранный букридер / Пагинация текста
 

Привет!
Задача сделать пагинацию длинного текста средствами js
Все плагины, что я нашел, жутко красивые, но с увеличением объема текста (200+ страниц) так же жутко тормозят.

Необходима самая простая и быстрая библиотека: разбивка на страницы с % высотой от высоты экрана и стрелки вперед / назад.

Спасибо!

Я не против платных решений,
Но все пагинаторы типа http://1.s3.envato.com/files/44575421/fullscreen.html имеют примеры исключительно с парой-тройкой страниц.

Я думаю, разбор двухсот страниц текста в любом случае будет тяжёлой для клиента задачей. Мгновенного разбиения на страницы вы так и так не получите.

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

Ну например такой концепт:
Считаем количество строк на страницу,
Создаем первые 3 страницы, прекращаем выполнение скрипта, остальное скрываем, при перелистывании второй - делаем тоже самое с еще одной пачкой строк, и так до конца.

В аяксе пока не вижу ничего продвинутого, зачем делать много запросов, если можно один?

Так как для личного сайта, может стоить поэкспериментировать.

Ну ок. Но пагинации с вменяемым прелоадером я тоже не видел. Возникает вопрос, почему хром грузит и открывает мегабитные .док или .пдф, а все решения на js для простого текста вгоняют браузер в кому.

Через мульти-колумнс, кстати, никак нельзя?

Есть lLocalStorage, по мере скролла грузи и грузи новые страницы, коли не скроллит, то и не грузим - нафег 100, если будет просмотрено 2 ?
И с другой стороны - просмотрели 100, - если нужно подгрузить старое - взяли из Кеша, с третьей стороны - на каждой странице проставляем - время жизни - если истекло - подгружаем заново... минимальная нагрузка и на сервер и на клиента... Вопрос ток один - объём этой сотни страниц

Ну ты еще пожалуйся что до сих пор не сделали нормальной игры на js типа Crysis )) Или аналог Photoshop на javascript ))))

Скорее всего потому-что все страницы одновременно присутствуют в DOM-модели. Загляни в DOM-инспектор (F12 или Ctr+Shift+I)

согласен, интересно. Это могло бы дать хорошую скорость

разбиение на колонки не везде пока работает http://caniuse.com/#search=column-count

Дзен-трансгуманист, -Симпатично,

Думаю удобнее втыкивать следующую станицу в div , скрытый z-index(ом) и заполнять страницу текстом до достижения нужной высоты, для контроля нужной высоты использовать отслеживание «onresize» на элементе http://habrahabr.ru/post/166321/

сто пудово лучше. И сто пудого медленнее.
Кому нелень попробуйте ))))))))))))

DjDiablo, Если про мою идею,
Cто пудово - нет, iframe - пустой, пустой iframe подгружается за 100ms на ИЕ6-7

чего нет ? :blink:
причём тут iframe

Хм - а как не запихивая - считать реальную высоту( особливо если резиново (по ширине в % от реального экрана)
И если подгружаем сразу намеренно контент - до и после текущей страницы, операции мон делать не суетясь во время просмотра текущей...
Клик по пагинатору не менее 0.3 - 0.5 сек

Можно, но не думаю что в скрытом z-index(ом) div - медленнее - чем саморендинг, по идее многотекст без картинок быстро рендицо

Дзен-трансгуманист,
у меня просто воспоминания о самодельном чате, с рендингом архива мессагов в скрытом div, страниц не было, но контент подгружался по скроллу с запасом(вверх и вниз) - очевидных задержек - не наблюдалось

нерешаемая задача :D

угу

Вау, в моем топике кипит жизнь.

Трансгуманисту респект.

Пока перечитывал Хэмингуэя, возникло подозрение, что можно
1) посчитать количество символов и строк в документе,
2) выяснить среднее количество символов на строку
3) выяснить количество строк в экране
4) умножить среднее количество символов в документе на количество строк в экране.
5) вставить это число в p.adjust

Ну ежели с Dom работать, то сыпешь небольшими блоками (из подгруженного в storage) как попало, и зыришь событие изменения высоты заготовки страницы - тогда либо просто убираешь последний, либо возишься с ним и сокращаешь высоту последнего

Хм - странно - если грузить в storage непрерывный текст, и начинать парсить с 1-й страницы, (перепарсенные границы просто помечаешь в сохранненом тексте bound - вставками (не показываемых и не учитываемых) - то вроде проблем не возникало там сотня страниц за секунду две(если ток текст, то чтраницы с текстом можно рендить в уменьшенном масштабе, сокращая пропорционально межстрочный и буквы)

Такой вопрос, для общего развития
Есть длинный хтмл текст
<div class="wrapper"><div class="text">
Long time ago...
</div></div>

wrapper = fixed, 100%, 100%, overflow:hidden;

Пишу скрипт, который
Берет высоту wrapper (800)

Делаем для text отступ (margin-top:-800) - получаем вторую страницу.
При каждом нажатии на стрелки увеличиваем или уменьшаем margin-top на высоту wrapper, двигаемся по страницам.

При ресайзе окна вставляю на верхнюю строку на экране (текущий отступ / 20) div c якорем, выясняю на какой строке якорь, делаю отступ.

Что я упустил?

ксать забавно, если wrapper = fixed, 100%, 100%;overflow-y:hidden;
То возможно можно скрыто ресайзить и в оверлее, контент вне окна

а как выбрать нпр 120 и 160 строку текста и окружить все между ними в <div></div>?

coventgarden,
Хм... а что строки уже в тегах ? Лучше изначально засунуть весь контент в storage, скопировать в переменную.
Из переменной(типо стек) заполняем поблочно ( допустим блоками по 300 cимволов), коли высота <div> cтала больше положенной, последний блок удаляем и пихаем его посимвольно, - остаток символов снова в стек, в storage помечаем - вставляем невидимый разделитель для очередной созданной страницы

может быть посмотреть как в популярных online читалках сделано?

Вот тут cхоже по теме: (пример из топика http://javascript.ru/forum/misc/3583...j-verstke.html
Контроль изменения высоты любого из span, как критерий перехода в новыю колонку( новый span), либо еще каких-нибудь действий

(Закидываем в один из span контент больше максимально-допустимой его высоты

<!DOCTYPE>
<html>
<head>

</head>
<body>

<style>
html, body, div{height: 100%;margin:0;padding:0;}
.wrp span{
    margin: 0;
    vertical-align: top;
    display: inline-block;
    white-space:pre-wrap;
    word-wrap: break-word;
    min-height: 200px;
    max-height: 202px;
    width:200px;
    border: 1px solid red;
}
.wrp{
    position:absolute;
    border: 1px solid blue;
    white-space:nowrap;
    padding:0;
    height: auto;


}
</style>
<div class=wrp><iframe name="frame" width="88"  height="100%" style="margin:0;position:absolute;border:green solid 1px;/*z-index:-1*/"></iframe>
    <span></span>
    <span></span>
    <span id=third></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<script type="text" id="scr00">
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв 
</script>
<script type="text/javascript">
setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ)
   var timerResize='first';
   frame.onresize = function(){ // frame,  - Имя фрейма (name=frame)  - cм начало Кода;
     if(timerResize!=='first')clearTimeout(timerResize);
     timerResize=setTimeout( function(){  //  Задержка для очистки  чрезмерных срабатываний;
         alert('Высота div class=wrp изменена.'); // Тело обработки события «onresize»;

     },20)  // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события;
            // актуально при плавных изменениях размера элемента,   
            // либо почти одновременное изменением размера несколькими разными процессами.
  }
},200);


setTimeout(function(){  //Докидываем контент в третий span 
  document.getElementById("third").innerHTML=document.getElementById("scr00").innerHTML;
},7000);

</script>


</body>
</html>

Deff реально больной...

danik.js, - реально
Задрал, если пишу, не для тебя, помимо есть люди