Плагин jQuery - EqualHeight

Создание колонок одинаковой высоты является актуальной задачей, когда используется не табличный дизайн. Конечно, можно использовать ухищрения CSS для имитации одинаковой высоты колонок. Но применение плагина equalHeights создает ряд преимуществ:

  • удобство использования - выравнивание колонок будет осуществляться всего лишь одной строчкой кода JavaScript;
  • гибкость шаблона - скрипт использует свойство min-height, поэтому при изменении размера содержания колонки (например, с помощью запроса AJAX) или окна браузера структура шаблона сохранится;
  • производительность - маленький плагин не требует никакой дополнительной разметки.

 

Использовать плагин очень просто:

1. Подключаем к странице файл скрипта:

<script type="text/javascript" src="jQuery.equalHeights.js"></script>

2. Запускаем плагин для нужного контейнера:

    <script type="text/javascript">
    	$(function(){ $('#equalize').equalHeights(); });
    </script>

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Января 2012 17:27
    lazyproger
    это на css прекрасно делаеться
    • 4 Января 2012 17:37
      mogdin
      Подскажи как
      • 12 Марта 2012 23:35
        ammorium
        те сами таблицы
  • 5 Января 2012 15:41
    TavRoX
    єто делается очень просто на jquery делаем общий блок который растягивается одной из колонок, узнаем его высоту и кидаем ее на все блоки
  • 6 Января 2012 02:01
    da_lamber
    Мне очень понравился этот плагин. Я его даже под себя усовершенстовал.
  • 28 Ноября 2012 14:36
    alikajasmin
    Скрипт - супер!!! Замучилась каждый раз вручную все подгонять! Спасибо!!!
  • 28 Ноября 2012 15:03
    alikajasmin
    Только сейчас заметила, под контейнером появилось пустое расстояние, равное его высоте... Футер сместился вниз на такое же расстояние... Не подскажите, как это исправить???
  • 28 Ноября 2012 16:14
    alikajasmin
    все, исправила!!! Спасибо еще раз!!! классно!
  • 3 Декабря 2012 22:52
    alikajasmin
    Евгений, подскажите, пожалуйста, поставила на страницу карусель и теперь колонка растянулась на высоту всех скрытых элементов (то же самое происходит когда ставишь toogle - растягивается на скрытый в блоках текст) Это можно как-то убрать? Спасибо
  • 18 Декабря 2012 12:02
    ерофеич
    А я не понял,как указать колонки, которые надо выравнивать.
  • 21 Декабря 2012 22:51
    yukino2011
    Не работает у меня плагин, не могу понять почему.
  • 22 Января 2013 14:05
    Alex_Alexei
    Единственная проблема данного плагина в том, что в опере он берет максимальную высоту колонки с всего сайта, а не со страницы. В остальных известных браузерах работает адекватно!
  • 3 Февраля 2013 23:12
    gocreg
    Запускаем плагин для нужного контейнера: и где это указывать, нельзя подробнее?
  • 3 Февраля 2013 23:54
    regam
    У меня что то не работает, уже поставил идентичный код как на вашем демо-страницы, и все равно - выравнивание нету. Что это может быть, ребята?
  • 22 Октября 2013 00:08
    guestalex
    ребята, в хроме может быть кос... я пользовался немного другим плагином, так проблему для хрома решил путём написания в начале не $(document).ready, а $(window).load... ну вообще продублировал, у меня в скрипте и тот и тот вариант есть... просто именно проблемную часть вынес в $(window).load
  • 28 Декабря 2013 20:07
    Dimon2x
    я не понял
    <script type="text/javascript">
    2 $(function(){ $('#equalize').equalHeights(); });
    3
    </script>
    
    это в индексный файл добавить?
  • 28 Декабря 2013 21:03
    Dimon2x
    я вставил
    <script type="text/javascript">
    $(function(){ $('#sidebar_L,#sidebar_R,#content"').equalHeights(); });
    </script>
    и почему не работает?
  • 31 Мая 2014 21:36
    hugo1000
    И куда тут вписывать колонки? -_- $.fn.equalHeights = function(px) { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children().css({'min-height': currentTallest}); }); return this; }; // just in case you need it... $.fn.equalWidths = function(px) { $(this).each(function(){ var currentWidest = 0; $(this).children().each(function(i){ if($(this).width() > currentWidest) { currentWidest = $(this).width(); } }); if(!px || !Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified // for ie6, set width since min-width isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); } $(this).children().css({'min-width': currentWidest}); }); return this; };
  • 12 Ноября 2014 16:32
    PMakarov
    куда вписывать блоки которые нужно выровнять, все варианты перепробовал, не работает.
  • 1 Декабря 2014 12:26
    taraskornylyuk
    прошу добавить в HTML код
  • 8 Июля 2016 04:43
    Turkmenhan
    Здравствуйте! Подскажите пожалуйста! Где тут надо вписывать колонки??? Спасибо заранее! $.fn.equalHeights = function(px) { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children().css({'min-height': currentTallest}); }); return this; }; // just in case you need it... $.fn.equalWidths = function(px) { $(this).each(function(){ var currentWidest = 0; $(this).children().each(function(i){ if($(this).width() > currentWidest) { currentWidest = $(this).width(); } }); if(!px || !Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified // for ie6, set width since min-width isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); } $(this).children().css({'min-width': currentWidest}); }); return this; };
    • 5 Августа 2016 15:11
      dmdmdm
      Скажите, Вы разобрались с кодом ?
  • 5 Августа 2016 15:10
    dmdmdm
    Почитал комментарии. Неужели никому не ответили как, что и куда вставлять ? Мне вот тоже не понятно. Может поможет кто ? Или тут всем и на всех наплевать ? Включая автора. Обращение к автору : Евгений ! У Вас очень хороший сайт и много полезной информации. За это спасибо ! Но иногда не совсем понятно что и как делать, по причине того, что не всегда подробное пояснение.
^ Наверх ^