Главная JavaScript

Умные динамические колонки с применением CSS и jQuery

Умные динамические колонки с применением CSS и jQuery

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют "резиновыми"). Недостатком фиксированных колонок при их использовании в "резиновом" блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ...

Комментарии (54)

  1. Красиво:)
    Возмем на заметку.

    Еще бы к этому автоматическое подстраивание размера шрифта под разные разрешения, раз уж скрипт используется :)

    • Удивлен, что тебе понравилось, ты же не любишь скрипты.

      • Удивлен…

        У куда без них, Дима :)
        Тенденция однако :)
        Но ты подумай, как с размером шрифта при разном разрешении быть.
        Еще бы при при уменьшении размеров экрана монитора пропорции соблюдались бы, размер колонки уже — шрифт чуть меньше :)

        • Т. е. ты хочешь, чтоб шрифт был тем больше, чем больше разрешение экрана и наоборот (в указанных пределах)?

          Я предполагаю, что это можно сделать по аналогии с колонками, только для этого нужно знать зависимость, т. е. в какой пропорции делать изменение размера шрифта в зависимости от размера экрана.

          • Да, именно так, чтобы все было автоматом. Понятно, что задача не простая и может быть однозначного решения не имеет, но лично не отказался бы от такой фишки :)

            • В общем, я понял. Сейчас сделал, так сказать, набросок, уже кое-что получилось. Так что это вполне реально реализовать.

              • Получилось — dimox.name/fontsize.html. С кроссбраузерностью проблем нет.

                В самом скрипте есть 2 настройки:

                var width = 1000; // ширина, от которой идет отсчет
                var fontSize = 12; // минимальный размер шрифта

                1000 — это та же ширина, что и усновного родительского блока (#wrapper).

                Кроме тега body, у всех тегов нужно использовать em вместо px (там, где ты хочешь динамически менять размер шрифта).

                Пожалуй, уже можно писать статью на эту тему =)

                • Круто :)
                  Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
                  Пусть там и ширина колонок меняется и размер шрифта.
                  И в пошаговом режиме объяснялка, что, как и куда.
                  Цены тогда ей не будет :)
                  Всех к тебе засылать буду, для прочтения :)

                • смотрел в konqueror при определенной ширине браузера, начинается «слайд шоу»!!!
                  ширина около 1200−1300, точно сказать не могу, ибо ФФ еще не ставил!

                • К сожалению, указанная вами ссылка не работает сейчас.
                  Не могли бы вы воскресить эту страницу?

                  Заранее спасибо.

  2. Да, все хорошее вовремя…
    Делал подобное в своем проекте, то там было немного веселее, там такое происходило с таблицей :) это уменьшает вероятность того что во «всемилюбимом» ИЕ распологаться блоки будут хорошо…

  3. Может, я чего проглядел, но ИМХО, вместо jQuery можно было бы обойтись ведением min-width.
    А шЫштой осел — да забудем уже про него:-)

  4. Дима, кинул тебе на мыло, свою новую разработку,
    к ней поможешь свое хозяйство прикрутить?

  5. Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
    Пусть там и ширина колонок меняется и размер шрифта.

    Не понимаю, каким образом может пригодиться в трехколоночком макете техника динамических колонок. Именно в таком макете достаточно указания %-й ширины, ведь количечество столбцов в строку всегда будет одинаковое.

    А изменение размера шрифта к такому макету можно прикрутить.

    • Не понимаю…

      Нет, конечно, переноса колонок делать не надо :)
      Но динамика измения ширины колонок и одновременно размера шрифта нужна.
      Важны пропорции не только в ширине колонок, но и в расстоянии между ними.
      Приблизительно так, как в посланном тебе на мыло, моем макете,
      не важно, что там фиксированная колонка, в принципе все может прокручиваться.
      Причем, вместе с min/max-width всему макету.
      Пусть ширина колонок в %.
      Как пропорциональное именине размера шрифта к этому привязать?

  6. Спасибо, Дима за помощь.
    Все получил.
    Играюсь :)
    Если будут вопросы то задам, ты же автор данной фишки.
    Пиши статью, от себя обязательно линк дам,
    думаю многим пригодится.

  7. FF3 Win7RC1
    Скрипт, боюсь, не выполняет свою функцию.
    Opera10 Wnin7RC1 — нормально.

  8. Спасибо, очень интересный пример! Интересно и увлекательно разобран по полочкам. Что-то в этом роде я придумал на div, а на списках не догадался. Не додумался и картинкам назначать ширину width: 89% — клёво!
    Но вот вопрос: я решил этот пример использовать для фотоальбома, в котором фоты наложены «внавал», резиново. Но к каждой фотке хотелось бы вставить комменты.
    Если размеры и ориентация, а также объем комментов строго одинаков, то все идет пучком: при изменении разрешения экрана, размера окна браузера все резиновое и «резинит» отлично.
    Но в реале фотки имеют разный размер и ориентацию, разный объем текста и колонки получаются разной высоты. И вот тут получается неприятный фикус-покус: маленькие колонки цепляются за высокий правый край бОльших колонок, находящихся раньше — получаются зияющие пустоты. Как их избежать — ума не приложу.
    Может честной изобретательный и остроумный народ подскажет что-то оч. ценное? Или такая идея неважнецкая?

  9. а как закинуть шаблон в joomla?

  10. А почему он не воспринимает русский шрифт? Как актуализировать русский шрифт?

  11. Подскажите пожалуйста в какую кодировку написать и где, наверно В CSS. Очень надо

    • Во-первых, кодировка указывается в текстовом редакторе, в котором сохраняется файл.

      Во-вторых, она указывается в HTML-коде в теге <meta>, например:

      <meta http-equiv="content-type" content="text/html; charset=utf-8" />

      Здесь utf-8 — это название кодировки. Она должно быть одинаковой в обоих случаях. Можно также использовать кодировку windows-1252.

  12. Спасибо Dimox, буду пробовать)

  13. не получается (Dimox скажи пожалуйста как в кодировке демо сайта сделать так чтобы читался русский шрифт. Я поменял то, что ты говорил и в настройках блокнота по умолчанию задал данную кодировку (UTF-8), но ничего не помагает ((

  14. Сработало! Большое спасибо Dimox. Очень помог частенько буду посещать этот сайт!

  15. Подскажите куда вставлять jQuery Сайт будет под Joomla Спасибо!

  16. Каким образом в блоки картинки вставить? Спасибо!

  17. как можно распределить свободное пространство между блоками?! Спасибо!

  18. а как сделать если сделано не в таблице каждый блок прописан в div для резиновой странички? Спасибо!

  19. Добрый день,
    хорошая тема.

    1. В браузерах Opera и Firefox пример работает как задумано.

    2. В браузере IE приведенный пример не работает:
    — ширина колонок (div-ов) не изменяется при изменении ширины окна;
    — колонки (div-ы) ведут себя как div-ы со стилем float и поэтому справа всегда какое-то место остается. Div-ы не заполняют все пространство.
    — при уменьшении экрана до размера, на котором помещается 4 div-а IE входит в ступор — зацикливается. После этого его остается только закрыть.

    3. Напишите пожалуйста, не встречался ли в Вашей практике плагин или пример работающий на трех браузерах.

    Галина
    PS Ссылки на пример, переадресовываются и пример получить нельзя.

  20. А если задача немного иная? То есть, блоки расположены не слева-направо, а сверху-вниз, если объема хватает они стоят по одной вниз, если нет, выкидываются поочередно во второй вертикальный ряд.

Ваш комментарий