ФорумПрограммированиеJavaScript → Горизонтальный скролл

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

  • Professor

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

    Spritz 15 декабря 2010 г. 8:31

    Нужен горизонтальный, кроссбраузерный скролл.
    На сколько я знаю средствами CSS не сделать нормально.
    Есть что нибудь на Jquery?

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

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

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

    Spritz 15 декабря 2010 г. 13:32, спустя 5 часов 1 минуту 7 секунд

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

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

    Spritz 15 декабря 2010 г. 13: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

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

    Spritz 15 декабря 2010 г. 13:44, спустя 5 минут 44 секунды

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

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

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

    Spritz 15 декабря 2010 г. 14:00, спустя 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

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

    Spritz 15 декабря 2010 г. 14:01, спустя 1 минуту 45 секунд

    тс нуб!)
    Сапожник без сапог
  • artoodetoo

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

    Spritz 15 декабря 2010 г. 14:04, спустя 3 минуты 2 секунды

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

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

    Spritz 15 декабря 2010 г. 14:12, спустя 7 минут 22 секунды

    artoodetoo, я еще не ругался!)
    Сапожник без сапог
  • Professor

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

    Spritz 15 декабря 2010 г. 14:17, спустя 5 минут 16 секунд

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

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

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

    тс нуб!)

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

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

    Spritz 15 декабря 2010 г. 14:18, спустя 1 минуту 14 секунд

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

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

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

    Spritz 15 декабря 2010 г. 14:19, спустя 54 секунды

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

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

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

    Spritz 15 декабря 2010 г. 14:31, спустя 12 минут 10 секунд


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

    нихрена не работает =)
    тестировать влом, но я уверен что ты просто выбрал не тот doctype =)
    Сапожник без сапог
  • artoodetoo

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

    Spritz 15 декабря 2010 г. 21: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

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

    Spritz 15 декабря 2010 г. 22: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 Группа: Адекваты

    Spritz 15 декабря 2010 г. 23: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">

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

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