Форум

coventgarden · #21 (**permalink**) 20.02.2013, 22:33

Такой вопрос, для общего развития
Есть длинный хтмл текст
<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 якорем, выясняю на какой строке якорь, делаю отступ.

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

Deff · #22 (**permalink**) 20.02.2013, 22:43

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

coventgarden · #23 (**permalink**) 20.02.2013, 23:48

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

Deff · #24 (**permalink**) 21.02.2013, 02:58

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

Pavel M. · #25 (**permalink**) 21.02.2013, 15:31

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

Deff · #26 (**permalink**) 25.02.2013, 07:08

Вот тут cхоже по теме: (пример из топика Вопрос с выводом данных в горизонтальной верстке
Контроль изменения высоты любого из 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>

danik.js · #27 (**permalink**) 25.02.2013, 08:05

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

Deff · #28 (**permalink**) 25.02.2013, 08:14

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

Форум

Справочник

Discord чат

Курсы javascript