Горизонтальный скролл

Страницы: ← Следующая страница →

Professor

Сообщения: 2089 Репутация: N Группа: Адекваты
Дек. 15, 2010, 7:31 п.п.
Нужен горизонтальный, кроссбраузерный скролл.
На сколько я знаю средствами CSS не сделать нормально.
Есть что нибудь на Jquery?

<div> <ul> <li>пам парарам</li> <li>пам парарам</li> <li>пам парарам</li> <li>пам парарам</li> </ul> </div>

див должен быть определенной ширины, а все остальное должно прокручиваться только по горизонтали
artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 12:32 д.п., спустя 5 часов 1 минуту 7 секунд

поясни что именно "нельзя сделать средствами CSS". непонятно с чего бы это.
Спустя 119 сек.
http://www.cssplay.co.uk/menu/scroll_gallery

ιιlllιlllι унц-унц
Professor

Сообщения: 2089 Репутация: N Группа: Адекваты
Дек. 16, 2010, 12:38 д.п., спустя 6 минут 26 секунд
не получается сделать горизонтальный скролл с помощью css.
С помощью JS тоже не получилось.

Нужно сделать так.
есть такой html
<div> <ul> </ul> </div>

div должен быть шириной в 300px

С помощью UI Jquery(ссылочка) я туда переношу объекты li у которых float:left
так вот никакие overflow: auto; и overflow-x: auto; не помогают.
При внесении туда объектов они складываются вниз.

Спустя 72 сек.
А если с использованием JS то контейнер должен быть определенного размера, что собственно меня мне устраивает. не нужно что бы он динамически расширялся.
artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 12:44 д.п., спустя 5 минут 44 секунды

глянь мою ссылку вверху. у Stu Nicolls всё получается :) без JS, кросс-браузерно

в примере он не использовал ul+li, но это не имеет значения. фишка в том, что он указывает явно ширину блока-контейнера и блока-вложения (у него это еще один div, у тебя это ul)

ιιlllιlllι унц-унц

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 1 д.п., спустя 15 минут 24 секунды


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Scroll</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#scrollbox {width:300px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px;}
#scrollbox ul {list-style: none; width:376px; height:60px;}
#scrollbox ul li {display:block; color:#000; border:1px solid #000; width:85px; height:47px; margin:3px; float:left; font-size:11px;}
</style>
</head>

<body>
<br/>
<div id="scrollbox">
<ul>
<li>пам парарам</li>
<li>пам парарам</li>
<li>пам парарам</li>
<li>пам парарам</li>
</ul>
</div>
</body>
</html>

ιιlllιlllι унц-унц

phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

Дек. 16, 2010, 1:01 д.п., спустя 1 минуту 45 секунд

тс нуб!)

Сапожник без сапог
artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 1:04 д.п., спустя 3 минуты 2 секунды

если ты содержимое будешь создавать динамически, надо будет расчитать и установить width для #scrollbox ul
удачи!
Спустя 87 сек.
phpdude, зачем ругаешся, да? любой может затупить в какой-то момент.

ιιlllιlllι унц-унц
phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

Дек. 16, 2010, 1:12 д.п., спустя 7 минут 22 секунды

artoodetoo, я еще не ругался!)

Сапожник без сапог
Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

Дек. 16, 2010, 1:17 д.п., спустя 5 минут 16 секунд

если ты содержимое будешь создавать динамически, надо будет рассчитать и установить width для #scrollbox ul

в этом то и проблема что я не могу рассчитать сколько необходимо width

Я почему тему создал и так назвал.
Потому что при динамическом увеличении контента, вертикальный скролл увеличивается автоматически, а горизонтальный нет.
Мне нужен горизонтальный скролл который будет увеличиваться в зависимости от внесенного в него контента.

тс нуб!)

не спорю, но вопрос на самом деле не простой. Просто я его не сумел выразить правильно.
phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

Дек. 16, 2010, 1:18 д.п., спустя 1 минуту 14 секунд

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

жестко фиксируеь высоту + указываешь overflow: auto - вот тебе и горизонтальный скролл :D

Сапожник без сапог
Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

Дек. 16, 2010, 1:19 д.п., спустя 54 секунды

Ага, ты точно считаешь что я тормоз =)

нихрена не работает =)
phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

Дек. 16, 2010, 1:31 д.п., спустя 12 минут 10 секунд

Ага, ты точно считаешь что я тормоз =)

нихрена не работает =)
тестировать влом, но я уверен что ты просто выбрал не тот doctype =)

Сапожник без сапог

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 8:42 д.п., спустя 7 часов 10 минут 24 секунды

я не могу рассчитать сколько необходимо width


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Scroll</title>

<style type="text/css">
* {margin: 0; padding: 0;}
body {padding: 40px;}
#scrollbox {width:300px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; }
#scrollbox ul {list-style: none; width:10000px; }
#scrollbox ul li {display:block; height:47px; margin:3px; float:left; color:#000; border:1px solid #000; font-size:11px;}
</style>

<script type="text/javascript">
function recalcScrollbox()
{
    var ul = document.getElementById("scrollbox").getElementsByTagName("ul")[0];
    var lis = ul.getElementsByTagName("li");
    var w = 0;

    for(var len = lis.length, i = 0; i<len; i++) {
        w += lis.offsetWidth + 6;
    }

    ul.style.width = "" + w + "px";
}
</script>
</head>
 
<body onload="recalcScrollbox()">
<div id="scrollbox">
    <ul>
        <li>пам парарам</li>
        <li>пам парарам парарам</li>
        <li>пам парарам</li>
        <li>пам парарам парарампарарам</li>
        <li>пам парарам пам</li>
        <li>пам парарам<br/>пам парарам парарампарарам</li>
        <li>пам парарам</li>
        <li>пам парарам</li>
    </ul>
</div>

</body>
</html>

ιιlllιlllι унц-унц

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

Дек. 16, 2010, 9:43 д.п., спустя 1 час 1 минуту 16 секунд

и наконец вообще няшно. без JS. ширину указываем только для контейнера - все на автомате работает везде и всегда. даже валидно


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Scroll</title>

<style type="text/css">
* {margin: 0; padding: 0;}
body {padding: 40px;}
#scrollbox {list-style: none; width:300px; padding: 20px 0; background:#f4f4f4; overflow:auto; white-space: nowrap; border:1px solid #aaa; }
#scrollbox li {padding: 10px; display: inline-block; vertical-align: middle; border:1px solid #000; font-size:11px; }
</style>
<!–[if IE 6]><style type="text/css"> 
#scrollbox {padding-bottom: 36px; overflow-y: hidden;}
#scrollbox li {display: inline;}
</style><![endif]–> 

</head>
 
<body>
<ul id="scrollbox">
    <li>пам парарам</li>
    <li>пам парарам парарам<br/> парарам парарампарарам<br/> парарам парарампарарам</li>
    <li>пам парарам</li>
    <li>пам парарам парарампарарам</li>
    <li>пам парарам пам</li>
    <li>пам парарам пам<br/> парарам парарампарарам</li>
    <li>пам парарам</li>
    <li>пам парарам</li>
</ul>

</body>
</html>

чую никакого спасибо мне не светит

ιιlllιlllι унц-унц

Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

Дек. 16, 2010, 10:41 д.п., спустя 58 минут 29 секунд

DOCTYPE ??? хм, о DOCTYPE я как то не подумал
у меня
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

реально может в этом проблема.
Ок тогда спасибо всем =)

Страницы: ← Следующая страница →

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Горизонтальный скролл

Войти