Тема: Задати висоту елемента через JavaScript
Доброго дня!
Я тільки вчуся, тому прошу віднестися лояльно.
Переді мною стоїть наступна задача: Є 3 блоки <section>...</section> різної висоти. Я хочу взяти значення висоти найвищої з них (на щастя, я знаю яка із них є найвищою) і задати її двом іншим. Я знаю, що проблема "Три блоки однакової висоти" є досить поширеною і є багато статей, зокрема вирішення цієї проблеми іншим способом, окрім як JavaScript незастосовне, бо, соромно зізнатися, правлю чужий макет
Я дуже мало знаю, про JavaScript,тому помилки, що я допускаю, можуть здатися Вам смішними... Але ось, що я нахімічила:
у файлі columns.js (шлях до файлу вказала правильно - уже кілька разів перевірила):
function eqCol {
var maxСol = document.getElementByClassName('column2');
var h = maxСol.getAttribute('height'); //отримую висоту цієї вибраної мною найвищої колонки як змінну
document.getElementByClassName('column').style.height = h; //встановлюю висоту для інших елементів
}
Ось html-код:
<html>
<head>
...
<script src="js/columns.js"></script>
</head>
<body>
...
<div class="row">
<div class="4u">
<!-- Box #1 -->
<section class="column">
...
</section>
</div>
<div class="4u">
<!-- Box #2 -->
<section class="column2"> <!--Найвища колонка-->
...
</section>
</div>
<div class="4u">
<!-- Box #3 -->
<section id="click_me" class="column">
...
</section>
</div>
</div>
...
</body>
</html>
Чомусь не працює...
Також пробувала застосувати стандартне рішення, позичене з одного сайту:
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".row > section"));
});
але так теж не вийшло...
У результаті експериментів способом "пальцем в небо" вийшло ось так:
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".4u > section"));
});
Але таке рішення не працює у FireFox, і я не маю ні найменшого уявлення чому.
Думаю, варто все ж показати, що виходить у FireFox.
До підключення цього скрипту:
І після:
Допоможіть, будь-ласка, порадою...