Я пытаюсь реализовать динамического героя с помощью начальной загрузки и jQuery.Герой представляет собой баннер с цитатой и фоновым изображением.Проблема, с которой я сталкиваюсь, заключается в том, что когда кавычки превышают определенную длину, текст исчезает, так как общая высота дочерних элементов превышает высоту контейнера div.Я использовал jQuery для присоединения обработчика document.ready и document.resize, который вычисляет высоту всех дочерних элементов и соответствующим образом изменяет размер контейнера div:
function getHeights() {
let childVertOffset = $("#client-hero-child").offset().top;
let childHeightTotal = 0;
let children = $("[id=client-hero-child]");
children.each(function () {
childHeightTotal += ($(this).outerHeight());
});
return childHeightTotal + childVertOffset;
}
function fixContainerHeight(newHeight) {
$("#client-hero").height(newHeight)
}
Я присоединяю document.ready и изменяю размеры обработчиков кстраница выглядит следующим образом:
$(window).resize(function () {
if (window.location.pathname.includes('clients/')) {
fixContainerHeight(getHeights())
}
});
$(document).ready(function () {
if (window.location.pathname.includes('clients/')) {
fixContainerHeight(getHeights())
}
});
Обработчик document.resize работает отлично, но проблема, с которой я столкнулся, заключается в том, что обработчик document.ready запускается до того, как весь контент был загружен правильно.Изменение размера всегда отключено на постоянную величину (вычисление роста детей примерно на 80 пикселей меньше, чем это делает обработчик изменения размера).Более интересно то, что когда я дублирую инструкцию document.ready, код работает правильно (намекает, что функция запускается слишком рано), но если я добавлю функцию document.ready в функцию setTimeout, она не будет работать, чтоуказывает на обратное.
Это работает, если я делаю следующее и дублирую обработчик (может быть, проблема с запуском функции до загрузки контента?):
$(document).ready(function () {
if (window.location.pathname.includes('clients/')) {
fixContainerHeight(getHeights())
}
});
$(document).ready(function () {
if (window.location.pathname.includes('clients/')) {
fixContainerHeight(getHeights())
}
});
Но это не работает:
setTimeout(function(){
fixContainerHeight(getHeights())
},100);
html (erb) выглядит следующим образом:
<div class="row" id="client-hero-child">
<div class="col-12 px-sm-0">
<%= image_tag(@case.logo.url, class: "float-left testimonial-logo") %>
</div>
<div class="category-description">
<p class="left-align client-text"><%= @case.category %></p>
</div>
<p class="client-text">"<%= @case.quote.html_safe %>"</p>
<div class="col-12 pt-3" id ="client-hero-child">
<span class="float-right client-text"><%= @case.quotee %></span><br/>
<span class="float-right quote-position" style="margin-bottom: 15px"><%= @case.quotee_position %></span>
</div>
</div>
Любая помощь будет очень признателен, спасибо!
Обновление:
После некоторого устранения неполадок и записи в консоль я выяснил, что проблема связана с функцией CSS - у меня есть следующее css:
#client-hero {
height: 520px;
background-repeat: no-repeat;
.banner_detail_height {
position: relative;
top: 20%;
}
Свойство top вызывает проблему, похоже, этодоли секунды после загрузки страницы.Это объясняет, почему дублированный код устраняет проблему.При первом запуске обработчика загрузки он вычисляет смещение вершины как 110px, затем запускается css, добавляя верхнее поле в 20%, затем обработчик запускается во второй раз и вычисляет смещение вершины 200px.
Есть ли способ обеспечить запуск стиля до обработчика?