Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Автоматический скроллинг внутри DIV'а (без клика), Скроллинг к определенному элементу списк 
V
    Опции темы
Rayled
Дата 1.5.2010, 21:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: нет
Всего: 3
Здравствуйте! С JavaScript я практически не знаком (начал потихоньку изучать 4-е дня назад). Поэтому нужна помощь. Значит так.
Есть таблица. Внутри одной из колонок есть DIV, а внутри DIV'а большой (скролл неизбежен) ненумерованный список ссылок ведущих на другие страницы сайта. Высота дива фиксированная - 200px, а ширина зависит от ширины "резиновой" колонки. На открывшейся по любой ссылке странице, строка списка, по которой был переход, отображается уже не ссылкой, а текстом.
Задача. Сделать автоматический скроллинг "текстового элемента", на открывшейся странице, к центру (т.е. примерно по 100px сверху и снизу, по вертикали) и левой стороне (по горизонтали) видимой части DIV'а, чтобы, значит, удобства создать для юзера.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Мой сайт</title>
<style type="text/css">
table{width:100%; border:0; border-collapse:collapse;}
#rightcol{width:20%;}
#rightcol div.spisokssilok {overflow:auto; font-size:90%; background:#eee; height:200px; margin:0 0 15px 0; padding:0;}
li {list-style-type:none; padding-left:10px;}
ul {margin-left:0; padding-left:0;}
#activstranitsa{font-weight:bold; color:red;}
</style>
</head>
<body>
<table>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td id="rightcol">
<div class="spisokssilok">
<ul>
<li><a href="1.html">1</a></li><li><a href="2.html">2</a></li><li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li><li><a href="5.html">5</a></li><li><a href="6.html">6</a></li>
<li><a href="7.html">7</a></li><li><a href="8.html">8</a></li><li><a href="9.html">9</a></li>
<li><a href="10.html">10</a></li><li><a href="11.html">11</a></li><li><a href="12.html">12</a></li>
<li><a href="13.html">13</a></li><li><a href="14.html">14</a></li><li><a href="15.html">15</a></li>
<li><a href="16.html">16</a></li><li><a href="17.html">17</a></li><li><a href="18.html">18</a></li>
<li><a href="19.html">19</a></li><li><a href="20.html">20</a></li><li><a href="21.html">21</a></li>
<li><a href="22.html">22</a></li><li><a href="23.html">23</a></li><li><a href="24.html">24</a></li>
<li><a href="25.html">25</a></li><li><a href="26.html">26</a></li>
<li id="activstranitsa">27</li><!-- На этой странице нужен скроллинг к 27-му элементу -->
<li><a href="28.html">28</a></li><li><a href="29.html">29</a></li><li><a href="30.html">30</a></li>
<li><a href="31.html">31</a></li><li><a href="32.html">32</a></li><li><a href="33.html">33</a></li>
<li><a href="34.html">34</a></li><li><a href="35.html">35</a></li><li><a href="36.html">36</a></li>
<li><a href="37.html">37</a></li><li><a href="38.html">38</a></li><li><a href="39.html">39</a></li>
<li><a href="40.html">40</a></li><li><a href="41.html">41</a></li><li><a href="42.html">42</a></li>
<li><a href="43.html">43</a></li><li><a href="44.html">44</a></li><li><a href="45.html">45</a></li>
</ul></div></td></tr></table></body></html>


Конечно хотелось бы кроссбраузерное решение и именно с указанным Доктайпом. smile
Да, и еще. Я нашел решение, используя библиотеки JQuery, но хотелось бы без них. Т.к. там скроллит к верхней части DIV'а, а не к центру.
Заранее спасибо, ребята!

Это сообщение отредактировал(а) Rayled - 1.5.2010, 21:36
PM   Вверх
Amphiluke
Дата 1.5.2010, 22:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Ну, как-то в таком духе, что-ль.
Код

<script type="text/javascript">
    function scrollToActiveLink() {
        var activeLink = document.getElementById("activstranitsa");
        if (activeLink == null) return true;
        var aDiv = activeLink.parentNode.parentNode;
        aDiv.scrollTop = activeLink.offsetTop + activeLink.offsetHeight + aDiv.offsetHeight >> 1;
    }
    window.onload = scrollToActiveLink;
</script>
PM   Вверх
Amphiluke
Дата 1.5.2010, 22:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Хотя нет.  smile  Вот так: 
Код

<script type="text/javascript">
    function scrollToActiveLink() {
        var activeLink = document.getElementById("activstranitsa");
        if (activeLink == null) return true;
        var aDiv = activeLink.parentNode.parentNode;
        activeLink.scrollIntoView();
        if (aDiv.scrollTop < aDiv.scrollHeight - aDiv.offsetHeight)
            aDiv.scrollTop -= aDiv.offsetHeight >> 1;
    }
    window.onload = scrollToActiveLink;
</script>
PM   Вверх
Rayled
Дата 2.5.2010, 10:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: нет
Всего: 3
Amphiluke, спасибо огромное!!! Все работает. А скрипт-то какой маленький, я думал минимум на страницу будет...  smile Жаль не могу вам репутацию поднять.
 Как я уже говорил с JavaScript я не знаком практически, но учусь потихоньку. Поэтому посмотрите пожалуйста - правильно я его разобрал?
Код

[/<script type="text/javascript">
    function scrollToActiveLink() {
        var activeLink = document.getElementById("activstranitsa"); /* Присваиваем
        переменной activeLink ссылку на строку с id="activstranitsa" */
        if (activeLink == null) return true; /* Если строки с id="activstranitsa" 
        нет, то возвращаем true и функция дальше не выполняется*/
        var aDiv = activeLink.parentNode.parentNode; /* Присваиваем переменной aDiv
        ссылку на блок DIV */
        activeLink.scrollIntoView(); /* Скроллим строку с id="activstranitsa" до
        видимой в DIV'е и прижимаем к верхней части страницы */
        if (aDiv.scrollTop < aDiv.scrollHeight - aDiv.offsetHeight) /* Если текущая
        позиция блока DIV, относительно верхней границы блока DIV, МЕНЬШЕ (Высота блока
        DIV с учетом скроллинга МИНУС Высота видимой части блока DIV) */
            aDiv.scrollTop -= aDiv.offsetHeight >> 1; /* Тогда  текущей позиции блока
            DIV ПРИСВОИТЬ (Текущая позиция блока DIV МИНУС (Высота блока DIV без скроллинга
            с побитовым сдвигом вправо на один бит)) */
    }
    window.onload = scrollToActiveLink;
</script>

И еще. Я вот тут его чуть изменил. 
Код

 <script type="text/javascript">
    function scrollToActiveLink() {
        var activeLink = document.getElementById("activstranitsa");
        if (activeLink == null) return true;
        var aDiv = activeLink.parentNode.parentNode;
        activeLink.scrollIntoView();
        if (aDiv.scrollTop < aDiv.scrollHeight - aDiv.offsetHeight)
            aDiv.scrollTop -= aDiv.offsetHeight/2; /* Заменил побитовый сдвиг на деление, тк не разбираюсь я пока в побитовых вещах... */
    window.scrollTo(0,0); /* Добавил возврат к началу страницы */
    }
    window.onload = scrollToActiveLink;
</script>

Скажите, не повлияет-ли это на кроссбраузерность, выдачу результата или еще какие "подводные камни"? И еще вопросик. А если вместо "offsetHeight" использовать "clientHeight". Или все-равно что использовать? А-то я их разницу не уловил. Заранее благодарю!

Это сообщение отредактировал(а) Rayled - 2.5.2010, 11:04
PM   Вверх
Amphiluke
Дата 2.5.2010, 12:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112
Цитата(Rayled @  2.5.2010,  14:55 Найти цитируемый пост)
А если вместо "offsetHeight" использовать "clientHeight".

Если контейнер имеет какие-то бордюры, рамки, то да, лучше, по-видимому, использовать clientHeight. Клиентская область не включает внешние отступы, рамку, полосы прокрутки.
Вот здесь можно посмотреть подробности.
https://developer.mozilla.org/en/DOM/element.clientHeight
https://developer.mozilla.org/en/DOM/element.offsetHeight

Добавлено через 4 минуты и 48 секунд
А в остальном, вроде все вы правильно изложили. Да, и сдвиг целого числа на один разряд вправо эквивалентен делению на 2. Просто у меня подсознательное желание не смешивать целые и вещественные числа, хотя Javascript отслеживает это. В других языках программирования это могло быть ошибкой (я имею в виду присваивание целочисленному атрибуту результат деления операцией «/»).
PM   Вверх
Rayled
Дата 2.5.2010, 14:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: нет
Всего: 3
Цитата(Amphiluke @  2.5.2010,  12:45 Найти цитируемый пост)
В других языках программирования это могло быть ошибкой

Ну что ж, тогда будем делать побитово, будем привыкать. Еще раз спасибо за помощь!
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0449 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.