Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.01.2014, 18:51   #1
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию Изменение высоты блоков при resize

Собственно всю голову сломал....

Есть скрипт, который выравнивает блоки по высоте максимального из них в строке... скрипт работает. Вот он

Код:
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

function setConformingHeight(el, newHeight) {
 // set the height to something new, but remember the original height in case things change
 el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
 el.height(newHeight);
}

function getOriginalHeight(el) {
 // if the height has changed, send the originalHeight
 return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform(a) {

var rowDivs = new Array();
 // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
 $(a).each(function(Index) {
  if(currentRowStart != $(this).position().top) {

   // we just came to a new row.  Set all the heights on the completed row
   for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

   // set the variables for the new row
   rowDivs.length = 0; // empty the array
   currentRowStart = $(this).position().top;
   currentTallest = getOriginalHeight($(this));
   rowDivs.push($(this));

  } else {

   // another div on the current row.  Add it to the list and check if it's taller
   rowDivs.push($(this));
   currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);

  }
  // do the last row
  for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

 });
}
Встала задача - менять эту высоту "динамически" - то есть при изменении размеров окна браузера (дизайн типа адаптивный, и количество и размеры блоков меняются - в зависимости от размеров окна браузера)

Пошел обычным путем -повесил на ресайз... а оно и не работает, почему - не могу понять

Код:
Первый вызов - работает на ура
		$(function() {
			columnConform('#page-wrap > li');
			columnConform('#page-wrap-cat > li');
		});
				
а при ресайзе - пошел нафиг (((
		$(window).bind('resize', function() {
			columnConform('#page-wrap > li');
			columnConform('#page-wrap-cat > li');
		});
мож гдето чето не вижу, глаз замылился?
ADSoft вне форума Ответить с цитированием
Старый 13.01.2014, 21:37   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Скорей всего версия jQuery новенькая, где бинд уже того...
юзай просто
Код:
$(window).resize()
на глобальный объект нет смысла вешать живые события)
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 13.01.2014, 22:09   #3
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

да так пробовал, не катит. А бинд замутил - ибо подумал что после изменения размера окна - просто тупо не пересчитывает новые размеры.
так что - тут в чем-то другом дело....
ADSoft вне форума Ответить с цитированием
Старый 13.01.2014, 22:29   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Код:
var currentTallest = 0;
var currentRowStart = 0;
кешируются в самом начале, не?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 13.01.2014, 23:14   #5
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

Возможно, как с этим бороться? И как проверит кешироваание
Хотя..
Ставил обнуление внутрь функции результат тот же, если это имелось ввиду
ADSoft вне форума Ответить с цитированием
Старый 14.01.2014, 13:14   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

М... кажись доперло, блокам же фиксированая высота выставляется, на которую больше не влияет контент. Нужно все высоты перевести в значение "auto" и затем пересчитывать.
А функция какая-то громоздкая, я бы сделал так:
Код:
var $pages = $('.b-page');
var _heights = $pages.map(function(){return $(this).height();});
var _maxHeight = Math.max.apply(0,_heights);
$pages.height(_maxHeight);
п.с. Не забудь только подождать когда юзер закончит ресайз, иначе тормоза обеспечены.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.01.2014, 13:56   #7
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

согласен насчет громоздкости, возможно и есть смысл переписать, только там алгоритм немного другой: не на ВСЕ элементы, а построчно. Для этого и идет цикл по всем элементам - и как top предыдущего отличается от текущего - значить элемент на другую строку перешел и ищем максим высоту для этой строки..... и применяем именно для этой строки... вот.
А насчет авто подумаю, попробую

опять же - как узнать что пользюк закончил ресайз? Вроде нет такого события

Последний раз редактировалось ADSoft; 14.01.2014 в 13:59.
ADSoft вне форума Ответить с цитированием
Старый 14.01.2014, 14:20   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
опять же - как узнать что пользюк закончил ресайз? Вроде нет такого события
таймер или фрейм-рейт
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
TableLayoutPanel изменение высоты строки mMAg C# (си шарп) 1 13.06.2012 20:35
Изменение высоты панели задач KAMIKAZA Общие вопросы Delphi 0 25.07.2011 21:46
Изменение высоты строк djdron Общие вопросы Delphi 2 28.11.2010 10:01
изменение высоты фрейма MiK_on JavaScript, Ajax 2 11.09.2010 21:58
Изменение высоты фрецма от контента cwit JavaScript, Ajax 6 19.11.2008 07:25