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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> скроллирование div'а без полосы прокрутки 
:(
    Опции темы
AzuManga
Дата 3.3.2006, 10:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
Зравствуйте 8))

У меня есть див с кучей ссылок, высотой примерно в 500px, но видимая область должна содержать около пяти ссылок и иметь высоту 170px. Можно ли сделать с помощью JS скроллирование видимой области этого дива так, чтобы не было никаких полос прокрутки?

Спасибо за внимание 8)
--------------------
 Точка с запятой; 
PM MAIL   Вверх
Zaman
Дата 3.3.2006, 15:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 1
Всего: 2
http://www.woweb.ru/js/scripts/teffects/003/ - здесь склоллирующий текст
PM MAIL   Вверх
AzuManga
Дата 3.3.2006, 16:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: нет
огромное спасибо, только получилась загвоздка как всегда 8((

Я упростил код для тестирования и пришел к этому:

Код

<script language="javascript" type="text/javascript">
var y=0

function moveUp(){
    y = y - 26;
    document.getElementById('fourthlinkstext').style.top = y;
}

function moveDown(){
    y = y + 26;
    document.getElementById('fourthlinkstext').style.top = y;
}
</script>


Код

#fourthlinks    {width:325px;    height:80px; float:left; clip:rect(0px 325px 80px 0px); overflow:hidden}
#fourthlinkstext { position:relative; left:0px; top:0px;} 


Код

<div id="fourthlinks">
        <div id="fourthlinkstext">
    <p>text text text text text text text text text text text 
         text text text text text text text text text text text text text text </p>
    </div>
</div>




при нажатии на дивы расположенные на странице я вызываю функции moveUp и moveDown.
В опере в ИЕ скроллинг работает, но в ИЕ внутренний див с текстом не обрезается клипом внешнего дива и вылезает за его границы 8((((

Посоветуйте, пожалуйста, выход 8)


Прим. Простите, оказалось, что бага лечится удалением доктайпа из страницы 8))

Это сообщение отредактировал(а) AzuManga - 3.3.2006, 16:35
--------------------
 Точка с запятой; 
PM MAIL   Вверх
Sardar
Дата 4.3.2006, 23:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
AzuManga, нет, убирание доктайпа (введение в quirksmode) есть очень плохая штука в вёрстке, т.к. не известно как такая страница поведёт себя на не ИЕ браузере.

Стиль clip возможно естественный на первый взгляд, но лучше вкладывать слой в другой слой со стилем overflow: hidden.

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.outer_clip {
  position: relative;
  width: 200px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.clip_layer {
  position: absolute;
  width: 200px; /* chto by za ramki ne vyshlo */
  left: 0px;
  top: 0px;
}
</style>

<script type="text/javascript">
<!--

function rollUp() {
  var e=document.getElementById('my_layer');
  var stop = (e.offsetTop - 10) 
  e.style.top = ((stop > (-e.offsetHeight))? stop: -e.offsetHeight) + 'px';  
}

function rollDown() {
  var e=document.getElementById('my_layer');
  var stop = (e.offsetTop + 10)
  e.style.top = ((stop < 0)? stop: 0) + 'px';
}
//-->
</script>
</head>

<body>
<div class="outer_clip">
     <div class="clip_layer" id="my_layer">
         begin
         text text text text text text text text text text text 
         <br>text text text text text text text text text text text
         midden
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
    </div>
</div>
<button onclick="rollUp()">Up</button><button onclick="rollDown()">Down</button>

</body>
</html>

Тег marquee очень хорош в такой ситуации, но мозилла не будет его исполнять если вывести браузер из quirksmode (поставить любой правильный доктайп), т.к. сей тег ни в какую спецификацию от W3C не входит. Все остальные браузеры такой дотошностью не страдают.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

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


 




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


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

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