VPF::Алгоритм и методы создания он-лайн читалки.

Blaga

Дата 13.2.2009, 05:20 (ссылка)

(нет голосов)

Загрузка ...

ЛамМер++

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 15.11.2005
Где: г. Иркутск

Репутация: нет
Всего: 4

Доброго времени суток!
Встала задача сделать он-лайн читалку книг и текстов.
Так вот мне нужно вывести текст из БД и воткнуть его в страницу в два дива так что бы текст был не выше экрана.
То есть никаких прокруток вниз. Что бы дочитать текст нужно нажать на кнопку вправо или влево и страница листнеться туда.
Что то типа как на картинке.
user posted image

То есть у нас есть текст и его можно листать до тех пор пока он не кочиться.

Помогите с алгоритмом, какие примерно функции мне пригодяться.
КОд за меня писать не нужно. Ну только если очень захочеться. smile

Заранее спасибо!

--------------------

http://displayart.ru - Обои.
http://a2themes.ru - Сайт о движках DLE, phpBB3, WordPress.

ksnk

Дата 13.2.2009, 10:07 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Ну, как стартовый вариант -

Есть первый div нужной ширины со стилем overflow:hidden в который вставлен весь текст.
Клонируем его cloneNode(true) нужное количество раз, по ширине экрана и для всех клонов выставляем style.scrollTop=DIV1.offsetHeight * <<номер странички >>; (или какое-там свойство отвечает за размер видимой части клиентского окна ?)

при смене размера окна (window.onresize, ...) перерасчитываем все scrollTop'ы опять.

При сдвиге - вправо-влево опять-же увеличиваем-уменьшаем все scrollTop'ы

Его минусы- сложно вычислить, полностью показывается строчка в Диве, или нет. Особенно если шрифты разные. Хотя, можно поиграться с line-spacing у шрифта...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Blaga

Дата 13.2.2009, 12:49 (ссылка)

(нет голосов)

Загрузка ...

ЛамМер++

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 15.11.2005
Где: г. Иркутск

Репутация: нет
Всего: 4

собственно кое что уже немного получаеться.
сделал пока один див и хочу заставить его пролистывать по нажатию на кнопку. но почему то прокручивает только один раз и все. замирает...

Код


<html>
<body>
<script language=JavaScript>
<!--
  function Check_a()
  {

    var i=txt.offsetHeight-10;
    document.all.txt.scrollTop=i;
    i=i+txt.offsetHeight-10;
    
  }
//-->
</SCRIPT>
<input type="button" value="Далее" onclick="Check_a();">
<div style="overflow:hidden; width: 48% ; height: 90%" name="txt" id="txt">
 Инспектор отложил в сторону блокнот и сказал:
     - Сложное дело, товарищ Леман. Да, странное дело.
     - Не нахожу, - сказал директор института.
     - Не находите?
     - Нет, не нахожу. По-моему, все ясно.
     Директор говорил очень сухо, внимательно разглядывая пустую,  залитую
асфальтом и солнцем площадь под окном. У него давно болела шея, на площади
не происходило ровно ничего интересного. Но он упрямо сидел  отвернувшись.
Так он выражал свой протест. Директор был молод и  самолюбив.  Он  отлично
понимал, что имеет в виду инспектор,  но  не  считал  инспектора  в  праве.........

--------------------

http://displayart.ru - Обои.
http://a2themes.ru - Сайт о движках DLE, phpBB3, WordPress.

ksnk

Дата 13.2.2009, 15:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


  function Check_a()
  {
    var e=document.getElementById('txt');
    e.scrollTop+=e.offsetHeight-10;
  }

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Blaga

Дата 13.2.2009, 19:50 (ссылка)

(нет голосов)

Загрузка ...

ЛамМер++

Профиль
Группа: Участник
Сообщений: 429
Регистрация: 15.11.2005
Где: г. Иркутск

Репутация: нет
Всего: 4

Спасибо, но тут еще в процессе вышел косяк.
Значит дубли я создавать научился, так же научился мотать назад.
Впринципе сейчас при загрузке она мне уже выдает то что нужно. Но почему то не хочет работать перемотка для второго дива.
игнорит его и все тут...
Я тут набросал хтмлку с текстом для удобства. скачать тут можно - http://www.sendspace.com/file/r81hep

Кто поможет с меня +.

--------------------

http://displayart.ru - Обои.
http://a2themes.ru - Сайт о движках DLE, phpBB3, WordPress.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »