SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть

Как сделать автоматический рассчет высоты каждого элемента группы на JS?

Товарищи, здравствуйте!

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


В песочнице выше -- я описал все, что нужно, но продублирую сюда. Сразу скажу, что я в JavaScript -- словно заяц в космосе, т. е. мёртвый абсолютно. Вопрос такой: нужно сделать тень под блоком, как на divan.ру (к примеру, тут). Когда наводишь на карточку товара, под ней появляется блок с тенью, а также блок к кнопкой и дополнительной информацией. Оба блока на абсолютном позиционировании. Блок с информацией кнопкой может иметь разную высоту, что сразу отметает возможность задавать жесткий размер тени с учетом высоты этого блока. Там используется JS по причине невозможности сделать данный расчет на CSS.

В песочнице есть убогий неработающий скрипт-попытка на JQuery, но это даже стыдно обсуждать.

Подскажите пожалуйста, в каком направлении двигать в данном случае, может, есть примеры, спасибо!

P. S. Наверное, я неверно описал задачу -- просто я косой, извините.
  • Вопрос задан
  • 236 просмотров
Решения вопроса 2
space2pacman
@space2pacman
Просто царь.
https://jsfiddle.net/j0hzu8nx/15/
var shadow = $(this).find('.shadow');
var button = $(this).find('.button');

shadow.height(shadow.height() + button.height() + 20)
Ответ написан
SmthTo
@SmthTo Автор вопроса
Все перепёлки мира будут оплакивать мою смерть
Комбинируя ответ Ярослав Иванов, идею касательно hover'а от Арсений Матыцин и делегирование (наверное, точно не знаю) функции, можно сделать так:
$(".container").on("mouseenter", ".item", function() {
	  var shadow = $(this).find('.shadow');
    var button = $(this).find('.button');
    shadow.height(shadow.height() + button.height() + 20)
});

$(".container").on("mouseleave", ".item", function() {
    $(this).find('.shadow').removeAttr("style");
});


Таким образом решается вопрос с адаптивностью (высота считается при каждом hover'e), а также функция работает с динамически созданными элементами. Проверил на старом ноутбуке (мобильный Core i5 2-го поколения, 4 Гб ОЗУ и встроенная видеокарта; FireFox, Chrome, IE11), нет никаких задержек обработки скрипта в условии наличия 600 ед. элементов. И это с учетом всех остальных скриптов на сайте.

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn
Teamlead команды разработчиков iAmStudio
Подход к вопросу огонь. Но. Как по мне, тут js не шибко и нужен. +- хватит танцев с бубном на css, путем осознания того, что в общем информация статична, и высчитывать шибко и нечего. Ну и немного абсолютного позиционирования и хаков.
Но если действительно стоит необходимость сделать, так сказать, умную сетку, то можно перебирать их всех после полной загрузки DOM, или же еще лучше, индивидуально в момент hover. К слову, jQuery можно... В общем чистый JS нынче в треде, как говорится. Итак, ближе к конкретике:
  1. Спаси и сохрани размер обертки карточки, назовем ее ячейкой
  2. Задай самой карточке абсолютное позиционирование относительно ячейки
  3. Задисплей через прозрачность (к примеру) дополнительные элементы
  4. Рассчитай их размеры и, как в примере на дверях, высчитай отступ наверх

Ну и главное, проверь, чтобы у ячейки не стял overflow:hidden. Бо плохо будет.
З.Ы.: кроме морды из примера я ничего не увидел. Ну и пункты могут варьироваться.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы