Курс CSS. Урок 33.
Колонки одной высоты.
Решение на основе JavaScript и jQuery.
Колонки одной высоты.
Решение на основе JavaScript и jQuery.
На прошлом уроке мы с помощью свойства clear решили одну из проблем дизайна нашего каркаса - отодвинули футер вниз, где ему наиболее естественное место.
Однако, наши колонки: левый и правый сайдбары, а также центральная колонка контента остались с разными высотами (см css_032_001.html).
Вообще говоря, такая ситуация вполне нормальная вещь с точки зрения CSS - высота колонки определяется автоматически, исходя из ее контента. Это естественно. Но с точки зрения дизайна, это также и безобразно.
Как сделать колонки одной высоты с помощью CSS - попробуйте задать такой вопрос любимому поисковику (наверное, это Гугль или Яндекс), чтобы получить информацию по состоянию на тот день, когда вы изучаете эту страничку. Вариантов решения вы найдете много, но все они далекие от идеала.
Как это не удивительно, но такая простая и естественная проблема не имеет хорошего и простого решения. Это один из парадоксов CSS.
Вариантов решения много, но все они далекие от идеала.
На этом уроке мы рассмотрим решение на основе JavaScript и jQuery.
В таком решении я вижу два недостатка:
Что касается второго недостатка, то этот коварный юзер может отключить не только JavaScript, но и наши стили, тут уж ничего не поделаешь! Хозяин - барин, и может издеваться над своим браузером как угодно. Кстати, с помощью дополнения "Web Developer" (Веб Девелопер, Веб Разработчик), которое мы установили для браузера FireFox еще на первом уроке, отключать / включать работу JavaScript легко и просто, нажав последовательно: "Disable" → "Disable JavaScript" → "Disable All JavaScript" (т.е. "Выключить" → "Выключить JavaScript" → "Выключить JavaScript полностью"). После чего следует перегрузить браузер, например, нажатием F5, чтобы изменения вступили в силу.
Краткая информация о JavaScript.
Первоначальное название языка было "LiveScript". Но маркетологи решили сыграть на высокой популярности языка "Java" и предложили название "JavaScript". Это чисто рекламный ход. Никакого отношения "JavaScript" не имеет к языку "Java", кроме путаницы у сотрудников кадровых служб, которые профессионалов по "Java" предлагают на рабочие места специалистов по "JavaScript", и наоборот.
"JavaScript" имеет спецификацию, которая называется ECMAScript. Еще раз повторю, чтобы уменьшить уровень путаницы: язык "JavaScript" не имеет никакого отношения к языку "Java".
На самом деле, важнейшее достоинство "JavaScript", которое сделало его популярнейшим языком в современном мире, это не какие-то маркетинговые хитрости и игры с брендом, а тот факт, что встроенный интерпретатор для "JavaScript" имеет сегодня любой популярный браузер, что делает возможности создания, распространения и выполнения программ на "JavaScript" простыми и удобными.
В браузере "JavaScript" следует использовать в тех случаях, когда требуется что-то сделать с элементами страницы, а сделать это средствами CSS не позволяют возможности CSS и/или квалификация CSS дизайнера. "JavaScript" умеет делать все, что относится к манипуляции со страницей (например, изменять высоту элементов), взаимодействию с посетителем и с сервером.
"JavaScript" может создавать и удалять HTML-теги, менять стили элементов, прятать и показывать элементы.
"JavaScript" может реагировать на действия посетителя: клики мыши, движения курсора, нажатия на клавиши клавиатуры.
"JavaScript" может посылать запросы на сервер и загружать данные без перезагрузки страницы (с помощью технологии "AJAX").
"JavaScript" может устанавливать и получать файлы cookie, выводить сообщения, запрашивать данные.
Для нас, CSS дизайнеров, важнейшим является тот факт, что "JavaScript" имеет полную интеграцию с HTML/CSS, в этом мы убедимся, когда будем анализировать простейшую программку по выравниванию высот блочных элементов.
Краткая информация о jQuery.
Во многих программах на JavaScript решаются подобные задачи: выборка элементов, добавление контента, определение значения поля формы, реакция программы на клики и другие события. jQuery (джиКвери), универсальная библиотека JavaScript, позволяет быстро и относительно легко решать многие трудоемкие и однотипные задачи программирования.
Библиотека JavaScript jQuery - это коллекция кодов, предлагающая простые и эффективные решения многих типичных задач программистов. В некоторых случаях можно заменить большое количество строк на чистом JavaScript всего лишь парой строк или одной функцией jQuery.
Подробнее о jQuery →
Подключение библиотек и программ JavaScript.
Точно также, как и в случае с CSS, академически правильный подход требует хранения библиотек и программ JavaScript в отдельных файлах. Эти файлы имеют расширение *.js и подключаются к html страничке следующим образом:
Или, чисто для справки, подключение по-старому, с указанием type="text/javascript"
Очевидно, сегодня не нужно указывать type, но знать, что такое требование было раньше необходимо, чтобы не смущаться при анализе старых разработок.
Итак, весь код нашей программки для выравнивания колонок находится в файле css_033_001.js, а логически функционал разделен на две части: вызов функции выравнивания и собственно сама функция.
Разбирем обе части последовательно.
Вызов функции выравнивания.
В данном случае значок $ означает выборку jQuery. Если на сайте (точнее, на этой же страничке) используются другие JavaScript библиотеки, где знак $ может использоваться для иных целей, то следует использовать синоним - jQuery. В нашем случае другие библиотеки не используются, конфликтов имен быть не должно, потому мы смело используем знак доллара $, как обычно поступают и другие программисты JavaScript.
В переводе на русский язык эта строчка setEqualHeight($(".setEqualHeight_css_033")); будет звучать так: браузер, прошу Вас выбрать все элементы данной странички, которые имеют класс setEqualHeight_css_033 и передать их для дальнейшей обработки в функцию setEqualHeight в виде параметров.
Выборку можно было бы организвать и по-другому, например, перечислить через запятную конкретные id -
setEqualHeight($("#sidebar_css_033_0_L,#sidebar_css_033_0_R,#content_css_033_0"));
Давайте, вспомним урок 4, который посвящен групповым селекторам. Там мы использовали конструкцию:
p, h4, #myList
Чтобы присвоить одно правило CSS нескольким элементам по определенной выборке.
По аналогии и здесь мы можем сделать выборку:
#sidebar_css_033_0_L,#sidebar_css_033_0_R,#content_css_033_0
Для передачи нескольких элементов в обработку функции.
Из этого сходства мы видем родственность технологий CSS и JavaScript+jQuery.
Обертка $(document).ready(function() {...}); является фундаментальной функцией jQuery. Данная функция ожидает окончания загрузки странички HTML, а затем запускает скрипты внутри данной функции. Обычно, программный код для выполнения находится внутри данной функции, если только, по каким-то соображениям не требуется иной подход.
Итак, мы ждем, когда страничка полностью загрузится, а затем уже запускаем на выполнение функцию setEqualHeight. Это логично. Если сами колонки еще не загрузились, то и выравнивать пока нечего. Железная логика.
Функция выравнивания setEqualHeight.
Эту простенькую программу выравнивания я очень тщательно задокументировал и подробно прокомментировал, что, думаю, даже непрограммист сможет легко понять, как она работает.
Но на всякий случай, еще пару важных примечаний к этой программе.
Директива "use strict"; (строгий режим) в начале функции setEqualHeight указывает, что эта функция написана в строгом соответствии с новыми стандартами. Например, обязательное объявление var и т.д.
Такие типичные для jQuery штучки, как "неявные циклы", например:
columns.height(tallestcolumn);
Для новичка могут показаться шокирующими, но к этому можно и нужно привыкнуть. Все просто. В неявном цикле обрабатываются все элементы по выборке columns, и всем этим элементам присваивается высота (height), равная значению tallestcolumn, которое мы определили ранее.
Такая конструкция очень типична для jQuery, поиграйтесь с ней для лучшего понимания.
Теперь мы очистку пловцов clear:both; не будем задействовать в процессе, т.к. три блока: СайдБар Левый, СайдБар Правый, Содержание выравниваются по высоте с помощью программы на JavaScript. И Футер и так не сможет поднятся на верх, ввиду отсутствия места.
Посмотрим, что у нас получается:
Данные классы в файле стилей CSS и пргораммку на JavaScript будем также использовать в нашем очередном учебном тестовом примере.
css_033_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_033_001.zip ← скачайте пример, чтобы установить на свой сайт...
Однако, наши колонки: левый и правый сайдбары, а также центральная колонка контента остались с разными высотами (см css_032_001.html).
Вообще говоря, такая ситуация вполне нормальная вещь с точки зрения CSS - высота колонки определяется автоматически, исходя из ее контента. Это естественно. Но с точки зрения дизайна, это также и безобразно.
Как сделать колонки одной высоты с помощью CSS - попробуйте задать такой вопрос любимому поисковику (наверное, это Гугль или Яндекс), чтобы получить информацию по состоянию на тот день, когда вы изучаете эту страничку. Вариантов решения вы найдете много, но все они далекие от идеала.
Как это не удивительно, но такая простая и естественная проблема не имеет хорошего и простого решения. Это один из парадоксов CSS.
Вариантов решения много, но все они далекие от идеала.
На этом уроке мы рассмотрим решение на основе JavaScript и jQuery.
В таком решении я вижу два недостатка:
- Использование посторонней технологии - проблемы дизайна, размещения элементов на страницы надо стремиться решать с помощью CSS, следует избегать использования посторонних технологий, в т.ч. JavaScript и jQuery.
- Пользователь может отключить JavaScript в своем браузере - если у пользователя в браузере отключен JavaScript, то вся эта красивая конструкция выравнивания рухнет.
Что касается второго недостатка, то этот коварный юзер может отключить не только JavaScript, но и наши стили, тут уж ничего не поделаешь! Хозяин - барин, и может издеваться над своим браузером как угодно. Кстати, с помощью дополнения "Web Developer" (Веб Девелопер, Веб Разработчик), которое мы установили для браузера FireFox еще на первом уроке, отключать / включать работу JavaScript легко и просто, нажав последовательно: "Disable" → "Disable JavaScript" → "Disable All JavaScript" (т.е. "Выключить" → "Выключить JavaScript" → "Выключить JavaScript полностью"). После чего следует перегрузить браузер, например, нажатием F5, чтобы изменения вступили в силу.
Краткая информация о JavaScript.
Первоначальное название языка было "LiveScript". Но маркетологи решили сыграть на высокой популярности языка "Java" и предложили название "JavaScript". Это чисто рекламный ход. Никакого отношения "JavaScript" не имеет к языку "Java", кроме путаницы у сотрудников кадровых служб, которые профессионалов по "Java" предлагают на рабочие места специалистов по "JavaScript", и наоборот.
"JavaScript" имеет спецификацию, которая называется ECMAScript. Еще раз повторю, чтобы уменьшить уровень путаницы: язык "JavaScript" не имеет никакого отношения к языку "Java".
На самом деле, важнейшее достоинство "JavaScript", которое сделало его популярнейшим языком в современном мире, это не какие-то маркетинговые хитрости и игры с брендом, а тот факт, что встроенный интерпретатор для "JavaScript" имеет сегодня любой популярный браузер, что делает возможности создания, распространения и выполнения программ на "JavaScript" простыми и удобными.
В браузере "JavaScript" следует использовать в тех случаях, когда требуется что-то сделать с элементами страницы, а сделать это средствами CSS не позволяют возможности CSS и/или квалификация CSS дизайнера. "JavaScript" умеет делать все, что относится к манипуляции со страницей (например, изменять высоту элементов), взаимодействию с посетителем и с сервером.
"JavaScript" может создавать и удалять HTML-теги, менять стили элементов, прятать и показывать элементы.
"JavaScript" может реагировать на действия посетителя: клики мыши, движения курсора, нажатия на клавиши клавиатуры.
"JavaScript" может посылать запросы на сервер и загружать данные без перезагрузки страницы (с помощью технологии "AJAX").
"JavaScript" может устанавливать и получать файлы cookie, выводить сообщения, запрашивать данные.
Для нас, CSS дизайнеров, важнейшим является тот факт, что "JavaScript" имеет полную интеграцию с HTML/CSS, в этом мы убедимся, когда будем анализировать простейшую программку по выравниванию высот блочных элементов.
Краткая информация о jQuery.
Во многих программах на JavaScript решаются подобные задачи: выборка элементов, добавление контента, определение значения поля формы, реакция программы на клики и другие события. jQuery (джиКвери), универсальная библиотека JavaScript, позволяет быстро и относительно легко решать многие трудоемкие и однотипные задачи программирования.
Библиотека JavaScript jQuery - это коллекция кодов, предлагающая простые и эффективные решения многих типичных задач программистов. В некоторых случаях можно заменить большое количество строк на чистом JavaScript всего лишь парой строк или одной функцией jQuery.
Подробнее о jQuery →
Подключение библиотек и программ JavaScript.
Точно также, как и в случае с CSS, академически правильный подход требует хранения библиотек и программ JavaScript в отдельных файлах. Эти файлы имеют расширение *.js и подключаются к html страничке следующим образом:
<head> <script src="js/jquery.js"></script> <!-- Подключили библиотеку jQuery, теперь подключаем наш файл с программами для этой странички //--> <script src="js/css_033_001.js"></script> </head>
<head> <script type="text/javascript" src="js/jquery.js"></script> <!-- Подключили библиотеку jQuery, теперь подключаем наш файл с программами для этой странички //--> <script type="text/javascript" src="js/css_033_001.js"></script> </head>
Итак, весь код нашей программки для выравнивания колонок находится в файле css_033_001.js, а логически функционал разделен на две части: вызов функции выравнивания и собственно сама функция.
Разбирем обе части последовательно.
Вызов функции выравнивания.
$(document).ready(function() {
setEqualHeight($(".setEqualHeight_css_033"));
});
В переводе на русский язык эта строчка setEqualHeight($(".setEqualHeight_css_033")); будет звучать так: браузер, прошу Вас выбрать все элементы данной странички, которые имеют класс setEqualHeight_css_033 и передать их для дальнейшей обработки в функцию setEqualHeight в виде параметров.
Выборку можно было бы организвать и по-другому, например, перечислить через запятную конкретные id -
setEqualHeight($("#sidebar_css_033_0_L,#sidebar_css_033_0_R,#content_css_033_0"));
Давайте, вспомним урок 4, который посвящен групповым селекторам. Там мы использовали конструкцию:
p, h4, #myList
Чтобы присвоить одно правило CSS нескольким элементам по определенной выборке.
По аналогии и здесь мы можем сделать выборку:
#sidebar_css_033_0_L,#sidebar_css_033_0_R,#content_css_033_0
Для передачи нескольких элементов в обработку функции.
Из этого сходства мы видем родственность технологий CSS и JavaScript+jQuery.
Обертка $(document).ready(function() {...}); является фундаментальной функцией jQuery. Данная функция ожидает окончания загрузки странички HTML, а затем запускает скрипты внутри данной функции. Обычно, программный код для выполнения находится внутри данной функции, если только, по каким-то соображениям не требуется иной подход.
Итак, мы ждем, когда страничка полностью загрузится, а затем уже запускаем на выполнение функцию setEqualHeight. Это логично. Если сами колонки еще не загрузились, то и выравнивать пока нечего. Железная логика.
Функция выравнивания setEqualHeight.
function setEqualHeight(columns) {
"use strict";
var tallestcolumn = 0;
// создаем переменную tallestcolumn, в которой в конце концов окажется
// значение высоты самой высокой колонки из списка параметров функции...
columns.each(
// это цикл, в котором последовательно обрабатываются все параметры...
function() { // анонимная функция сравнивает два значения и выбирает то, которое больше...
var currentHeight = $(this).height(); // переменная со значением текущей высоты...
if(currentHeight > tallestcolumn) { // текущая высота больше, чем рекорд прошлого прохода цикла?
tallestcolumn = currentHeight; // если да, то обновляем рекорд...
} // конец if(
} // анонимная функция заканчивается...
); // цикл заканчивается...
// зафиксирована высота самой высокой колонки в tallestcolumn...
// теперь устанавливаем высоты со значением tallestcolumn для всех колонок...
columns.height(tallestcolumn);
} // function setEqualHeight(columns) {
//
//
Но на всякий случай, еще пару важных примечаний к этой программе.
Директива "use strict"; (строгий режим) в начале функции setEqualHeight указывает, что эта функция написана в строгом соответствии с новыми стандартами. Например, обязательное объявление var и т.д.
Такие типичные для jQuery штучки, как "неявные циклы", например:
columns.height(tallestcolumn);
Для новичка могут показаться шокирующими, но к этому можно и нужно привыкнуть. Все просто. В неявном цикле обрабатываются все элементы по выборке columns, и всем этим элементам присваивается высота (height), равная значению tallestcolumn, которое мы определили ранее.
Такая конструкция очень типична для jQuery, поиграйтесь с ней для лучшего понимания.
Теперь мы очистку пловцов clear:both; не будем задействовать в процессе, т.к. три блока: СайдБар Левый, СайдБар Правый, Содержание выравниваются по высоте с помощью программы на JavaScript. И Футер и так не сможет поднятся на верх, ввиду отсутствия места.
Посмотрим, что у нас получается:
Шапка (Хидер, header)
Содержание (Контент, content)
Три блока: СайдБар Левый, СайдБар Правый, Содержание выравниваются по высоте с помощью программы на JavaScript.
В данном случае очистка пловцов clear:both; не задействована в процессе...
Но если у пользователя в браузере отключен JavaScript, то...
Все эта красивая конструкция рухнет.
Проверьте сами.
Три блока: СайдБар Левый, СайдБар Правый, Содержание выравниваются по высоте с помощью программы на JavaScript.
В данном случае очистка пловцов clear:both; не задействована в процессе...
Но если у пользователя в браузере отключен JavaScript, то...
Все эта красивая конструкция рухнет.
Проверьте сами.
Данные классы в файле стилей CSS и пргораммку на JavaScript будем также использовать в нашем очередном учебном тестовом примере.
css_033_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_033_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
