Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Прокрутка содержимого в DIV


Автор: langolier 10.6.2009, 11:28
Возникла необходимость в горизонтальной прокрутке содержимого дива..
Содержимое дива не просто текст, а в него вложены ещё дивы.
Визуально это так должно выглядить
http://s44.radikal.ru/i103/0906/b7/63a988bf0e1d.jpg

Вот как я пытаюсь скролить:

Код

<script>
var i=0;
var scroll_break=1;

function scroll_left(){
    if (i>=40)
        i=i-40;
    else if (i<40 && i>=0)
        i=0;
    document.getElementById('content_news').scrollLeft=i;
    if (scroll_break)
        setTimeout('scroll_left();', 100);
    else
        scroll_break=1;
}
function scroll_right(){
    var scroll=document.getElementById('content_news').scrollLeft;
    if ((i-5)<=scroll)
        i=i+40;
    else if ((i-5)>scroll)
        i=scroll;
    document.getElementById('content_news').scrollLeft=i;
    if (scroll_break)
        setTimeout('scroll_right();', 100);
    else
        scroll_break=1;
}
function scroll_breaker(){
    scroll_break=0;
}
</script>

<img src="img/1.gif" alt="" onmouseover="scroll_left();" onmouseout="scroll_breaker();" style="cursor:pointer;" />

<img src="img/2.gif" alt="" onmouseover="scroll_right();" onmouseout="scroll_breaker();" style="cursor:pointer;" />

<div id="content_news">
ЗДЕСЬ ИНФА КОТОРУЮ НУЖНО СКРОЛИТЬ
</div>


Проблема в том, что скроллится нормально только сплошной текст(т.е. если в блоко ТОЛЬКО текст)
Если вставить туда дивов, картинок, списков и т.д., то скролл НЕ работает....

Вот все мои исходники(в приложении)

Помогите, пожалуйста...

Автор: ksnk 10.6.2009, 16:22
langolier, в " ЗДЕСЬ ИНФА КОТОРУЮ НУЖНО СКРОЛИТЬ" нужно вставить однострочную таблицу, в каждой ячейке которой размещаются "дивов, картинок, списков и т.д.,"

Решения на DIV'ах работает только если явно задать размер этого div'а, что не всегда приемлемо...

Автор: langolier 11.6.2009, 10:55
спасибо за совет!!!
действительно работает)

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)