Главная » Шпаргалка » PHP MYSQL javascript » jQuery » Создание одинаковых по высоте колонок

Создание одинаковых по высоте колонок с помощью JavaScript

Данный урок покажет Вам как с помощью нескольких строк JavaScript добиться одинаковой высоты в нескольких колонках.

Данный метод берет во внимание толщину нижней и верхней границы, окружающий отступ - таким образом колонки получаются абсолютно одинаковыми в любом случае. Скрипт также написан таким образом, что все колонки всегда равняются по самой высокой, что очень практично для колонок с динамическим контентом или сложными стилями фона.

Шаг №1

HTML

<div id="left_column">
      <p>Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum
      text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.
      Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column. Lorum ipsum text to fill up the left column.</p>
      </div>
<div id="right_column">
      <p>Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column.
      Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text to fill up the right column. Lorum ipsum text
      to fill up the right column.</p>
      </div>

CSS

#left_column {
float: left;
width: 180px;
border: solid 1px #ccc;
padding: 10px;
margin: 0 20px 0 0;
}
#right_column {
      float: left;
      width: 180px;
      border: solid 1px #ccc;
      padding: 20px;
      }

Ключевами значениями в стилях являются толщина границы (1px) и отсутп (20px), так как эти значения нам понадобятся в расчетах действительной высоты колонок.

У нас должно получится следующее:

Как Вы видите у нас 2 колонки с разными высотами, так как в одной из колонок больше текста. Мы бы могли выставить высоту колонок с помощью стилей, однако это не было бы хорошим решением для динамического контента; и совсем плохим решением для 2-х колоночного шаблона, который используется на всех страницах сайта.

Шаг №2

Давайте углубимся в наш JavaScript и проведем некоторые расчеты. Для начала мы поместим наши колонки в переменную используя getElementById для легких манипуляций:

var myLeftColumn = document.getElementById("left_column");
      var myRightColumn = document.getElementById("right_column");

Далее, мы извлекаем полную высоту каждой колонки обращаясь к свойству offsetHeight:

var myLeftHeight = myLeftColumn.offsetHeight;
      var myRightHeight = myRightColumn.offsetHeight;

Высота полученная с помощью offsetHeight - это высота части с контентом + отступы + толщина границ. Мы не можем изменить свойство offsetHeight элемента, мы можем только его узнать, что поможет нам в дальнейшем.

Шаг №3

Далее уже немного сложнее. На данном этапе мы узнаем точные значения границ, отступа, чтобы их использовать в дальнейших вычеслениях. JavaScript позволяет обратиться к значению любого CSS элемента используя объект style вот так:

var myTopBorder = myLeftColumn.style.borderTopWidth;

Однако, объект style дает нам доступ к инлайновому CSS или CSS, который задан с помощью JavaScript. Значит в примере выше переменная “myTopBorder” не будем иметь значения, так как все стили находятся в отдельном файле (таблице стилей). Для того, чтобы извлечь это значение (вне зависимочти от их расположения), нам необходим кроссбраузерная функция, которая получит доступ к таблице стилей. К счастью, такое решение есть. Ниже представлен код, который мы включим в наш JavaScript файл для помощи вычесления так называемого "Рассчитанного стиля" элемента.

function retrieveComputedStyle(element, styleProperty)
      {
var computedStyle = null;
  if (typeof element.currentStyle != "undefined")
      {
      computedStyle = element.currentStyle;
      }
      else
      {
      computedStyle = document.defaultView.getComputedStyle(element, null);
      }
      return computedStyle[styleProperty];
      }

Наша функция берет 2 параметра: элемент, к которому мы обращаемся (в нашем примере это будет слой “left_column” или “right_column”), а также свойство, которое нам необходимо узнать. В данном уроке, это может быть верхний отступ. Внутри нашей функции мы объявляем местную переменную computedStyle, которая в конечном счете сохранит "возвращенное" значение.

Далее у нас идет условный оператор if, который обрабатывает два метода используемые браузерами для доступа к внешним файлам. Это сделано для того, чтобы данный метод работал во всех браузерах, так как у Internet Explorer немного отличается алгоритм работы.

Шаг №4

Далее давайте используем следующую функцию для рассчета точного количества границ и отступов обоих колонок:

var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth");
      var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth");
      var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop");
      var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom");
      var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth");
      var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth");
      var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop");
      var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom");

Выше представлены 8 разных переменыых, которые отображают верхние и нижние стили для использования в рассчетах.

Шаг №5

Далее нам необходимо суммировать все дополнительные значения, чтобы вся сумма была доступна в конце кода. Но помните, что значения, с которыми мы имеем дело это CSS величины, которые в конце содержат единицу измерения. К примеру, толщина верхней границы будет не просто "1" - это будет строка (не цифра) - читай 1 пиксель “1px”. Чтобы справиться с этим нам необходимо сделать 2 вещи: 1) убрать окончание “px”; 2) преобразовать переменную в цифру, чтобы JavaScript понял, что мы хотим "добавлять и отнимать" (обычно делают с цифрами), а не объединять строки (что обычно делают со строками). ВОт код для этого:

var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", ""));
      var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", ""));
      var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber;

      var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", ""));
      var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", ""));
      var myRightExtras = myRightBorderNumber + myRightPaddingNumber;

Следует обратить внимание на переменные myLeftExtras и myRightExtras. Вы увидете далее зачем они нам.

Шаг №6

Теперь мы обращаемся к начальным переменным, в которых сохранили полную высоту каждой колонки, и мы выполняем простой тест на то, какая из них выше. Как только мы это узнаем, мы меняем высоту короткой колонки на необходимое значение.

if (myLeftHeight > myRightHeight) {
myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px";
}
else {
      myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px";
      }

Согласно коду выше, если левая колонка выше чем правая, значение высоты правой колонки подстраивается с помощья объекта style. Но мы не можем просто поменять высоту правой колонки и уравнять ее с высотой левой. Значение высоты правой колонки должно совпадать с высотой левой колонки минус дополнительные значения правой колонки. Иначе, высота правой колонки будет больше.

После вычислений к цифре подстанавливается окончание "px", чтобы она правильно обработалось браузерами.

После всего этого у нас получится следующий результат:

Можете добавить больше контента в любую колонку, или изменить толщину границ, или отступ. Колонки будут всегда одной высоты.

Pages:   1 | 2  Next