1 Востаннє редагувалося denisyuk.tina (30.03.2015 18:42:12)

Тема: Задати висоту елемента через JavaScript

Доброго дня!

Я тільки вчуся, тому прошу віднестися лояльно.

Переді мною стоїть наступна задача: Є 3 блоки <section>...</section> різної висоти. Я хочу взяти значення висоти найвищої з них (на щастя, я знаю яка із них є найвищою) і задати її двом іншим. Я знаю, що проблема "Три блоки однакової висоти" є досить поширеною і є багато статей, зокрема вирішення цієї проблеми іншим способом, окрім як JavaScript незастосовне, бо, соромно зізнатися, правлю чужий макет *SORRY*

Я дуже мало знаю, про 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.
До підключення цього скрипту:
http://cs624918.vk.me/v624918402/2c0ec/YuVuJHoPXec.jpg
І після:
http://cs624918.vk.me/v624918402/2c0e3/971LT5DYwE8.jpg

Допоможіть, будь-ласка, порадою...  :[

2 Востаннє редагувалося mike (30.03.2015 19:30:00)

Re: Задати висоту елемента через JavaScript

Можете задопомогою jQuery:
HTML

<div data-name="block"></div>
<div data-name="block"></div>
<div data-name="block"></div>

і JS код:

var maxHeigth = 0;
//Визначаєм максимальну висоту проходячись по всіх і порівнюючи із найменшою висотою
$('[data-name="block"]').each(function(){
 var currentBlockHeigth = $(this).heigth();
 if(currentBlockHeigth > maxHeigth ){
   maxHeigth = currentBlockHeigth;
 }
});

//задаєм всім однакову висоту
$('[data-name="block"]').css( {height: maxHeigth} );
Подякували: denisyuk.tina, 0xDADA11C72

3 Востаннє редагувалося mike (30.03.2015 19:31:32)

Re: Задати висоту елемента через JavaScript

стосовно

 var h = maxСol.getAttribute('height');  //отримую висоту цієї вибраної мною найвищої колонки як з

так висоту неправильно визначати, тому що в даному випадку витягуєте значення атрибута, а потрібно висоту відображення через:

var clientHeight = document.getElementById('myDiv').clientHeight;
//або
var offsetHeight = document.getElementById('myDiv').offsetHeight;

взято звідси http://stackoverflow.com/questions/1561 … javascript

Подякували: denisyuk.tina, 0xDADA11C72

4

Re: Задати висоту елемента через JavaScript

Дякую за поради))) Спробувала і Ваші варіанти, проте змін досягти не вдалося. Напевно, я повинна була ще сказати, що більшість стилів цьому сайту прописано з допомогою, наскільки я розумію, jQuery і до того ж не мною. Але щоб просто змінити якийсь з параметрів через CSS, треба робити запис наступним чином (не те, щоб треба, але інакшим чином не виходить), наприклад для задання тієї ж висоти елементам за селектором класу:

.myClass 
{
    height: 800px !important;
}

Тобто так, щоб серед заданих стилів прописаний обирався пріоритетним... З того що пробувала, працював тільки цей варіант:

    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"));
    });

Він чудово працює у Chrome і Safari. В ІЕ не можу подивитися, браузер просто не хоче запускатися взагалі (не тільки для цього сайту, а взагалі). Але у FireFox скрипт працює трохи не коректно, висота колонок задається значно меншою від вміщеного в колонки контенту (хоча колонки таки однакової висоти).

5

Re: Задати висоту елемента через JavaScript

Ой, я тут трохи поекспериментувала і з'явилися наступні питання:
"В залежності від місця підключення скрипту по відношенню до інших скріптів у html документі, міняється і його вплив на сайт?" і "Чому це відбувається тільки у Chrome? А FireFox'у байдуже в якому місці підключений скрипт..."

6 Востаннє редагувалося mike (31.03.2015 15:27:05)

Re: Задати висоту елемента через JavaScript

denisyuk.tina написав:

Ой, я тут трохи поекспериментувала і з'явилися наступні питання:
"В залежності від місця підключення скрипту по відношенню до інших скріптів у html документі, міняється і його вплив на сайт?" і "Чому це відбувається тільки у Chrome? А FireFox'у байдуже в якому місці підключений скрипт..."

Взалалі то існує два підходи підключення скриптів, як ви вже напевно здогадались це:

<!-- підключення js-файлів  --> 
<script  src="path/to/script"></script>

<!-- i інший варіант це писати прямо в html коді --> 
<script  type="text/javascript">
// do some staff
</script>

у вашому випадку наскільки я зрозумів, ви не зрозуміли, коли саме починають підключені скрипти виконуватись
Тут є також два випадки:

  • як тільки скрипт завантажився в бравзері але весь контент сторінки ще не прогрузився, тод DOM структура ще не вся завантажилась

  • другий варіант це - запуск скриптів тоді коли весь DOM вже завантажився і можна робити всякі штуки із елементами на сторінці

Тому із вище сказаного можна зробити висновок, що якщо ваш js-скрипт не працює із DOM структурою документа, тоді його можна виконувати одразу, і не чекаючи коли весь DOM прогрузиться. І якщо ваш js-скрипт працює і із DOM то тут тоді потрібно чекати коли прогрузиться весь DOM і тоді починати працювати. Зараз дам два зразки коду для обох варіантів:

<script  type="text/javascript">
// без очікування завантаження всього DOM 
// можна одразу писати код
 console.log("when DOM not loaded");
//і так далі

// якщо потрібно почекати коли прогрузиться весь DOM тоді
// з допомогою jQuery
//варіант 1
$(function(){ //
 console.log("when DOM loaded");
 //і так далі 
});
// варіант 2
$(document).ready(function(){
  console.log("when DOM loaded");
 // і так далі
});

// без використання jQuery, aля чистий JS
window.onload = function() {
    console.log("when DOM loaded");
   // і так далі
};
</script>

P.S.
В мене ще не було проблем в бразерах із тим куди вставлений js-код, головне щоб він був у середині тагу body

Подякували: denisyuk.tina, 0xDADA11C7, olmovc3

7

Re: Задати висоту елемента через JavaScript

Дуже Вам вдячна за пояснення і допомогу!!!) Ще раз дякую!!! Зараз спробую реалізувати і відпишуся по виконанню своєї  задачі. Дуже приємно, що є такі люди як Ви, готові допомагати і пояснювати новачкам))) ^__^

Подякували: mike1

8

Re: Задати висоту елемента через JavaScript

denisyuk.tina написав:

Дуже Вам вдячна за пояснення і допомогу!!!) Ще раз дякую!!! Зараз спробую реалізувати і відпишуся по виконанню своєї  задачі. Дуже приємно, що є такі люди як Ви, готові допомагати і пояснювати новачкам))) ^__^


Головне що новачок хоче сам розібратись в цьому

Прихований текст

і читає правила форуму ))

Подякували: denisyuk.tina1

9

Re: Задати висоту елемента через JavaScript

Спробувала вже і так і сяк. Зараз працюю над наступним варіантом:

$(document).ready(function equalColumns ()
{
    console.log ("when DOM loaded");
    var b1 = document.getElementById('block1').clientHeight;
    var b2 = document.getElementById('block2').clientHeight;
    var b3 = document.getElementById('block3').clientHeight;
    window.bmax = 0;
    if (b1 > b2)
    {
        if (b1 > b3)
        {
            bmax = b1;
        }
        else
        {
            bmax = b3;
        }
    }
    else if (b2 > b3)
    {
        bmax = b2;
    }
    else
    {
        bmax = b3;
    }
});
$('#block1').css( 'height', bmax + 'px' + '!important');
$('#block2').css( 'height', bmax + 'px' + '!important');
$('#block3').css( 'height', bmax + 'px' + '!important');

І в місці

$('#block1').css( 'height', bmax + 'px' + '!important');

видає помилку "Uncaught ReferenceError: bmax is not defined (anonymous function)"... Ніби ж я змінну задала як глобальну, чому ж тоді її не знаходить? Чи я не правильно зрозуміла помилку? Ще раз дякую)

10 Востаннє редагувалося koala (05.04.2015 12:27:59)

Re: Задати висоту елемента через JavaScript

$(document) натякає нам, що підключений JQuery, а отже document.getElementById('block1') можна записати як $('#block1') (що ви, власне, і робите наприкінці).
Щодо вашої проблеми: змінної bmax не існує, є window.bmax.

Подякували: denisyuk.tina1

11

Re: Задати висоту елемента через JavaScript

І ось вам приклад: http://stackoverflow.com/questions/5052 … f-elements

Подякували: denisyuk.tina1

12

Re: Задати висоту елемента через JavaScript

Ну що ж, нарешті я розібралася зі своєю проблемою і тепер вважаю своїм обов'язком поділитися вирішенням проблеми.
Щодо змінної - все нормально window.bmax оголошує змінну bmax як глобальну.
Ось робочий скріпт:

$(document).ready(function equalColumns () //функція запуститься після завантаження DOM-структури сторінки
{
    console.log ("when DOM loaded"); 
    skel.on('init', function() { //
        if (skel.stateId !== '/global/mobile') { //ця умова для того, щоб скріпт не працював
//на мобільній версії, адже там всі колонки - одна під одною
            setTimeout(function() { //довелося поставити милицю, в зв'язку з тим, що розмітка сайту
//зв'язана з бібліотекою skel.js, який чомусь
//по-різному підвантажується у Chrom'i і FireFox'і
                
                console.log('skel Initialized!');
                
                var b1 = document.getElementById('block1').clientHeight;
                var b2 = document.getElementById('block2').clientHeight;
                var b3 = document.getElementById('block3').clientHeight;
                window.bmax = 0;
                if (b1 > b2)
                {
                    if (b1 > b3)
                    {
                        bmax = b1;
                    }
                    else
                    {
                        bmax = b3;
                    }
                }
                else if (b2 > b3)
                {
                    bmax = b2;
                }
                else
                {
                    bmax = b3;
                }

                $('#block1').css( 'height', bmax + 'px');
                $('#block2').css( 'height', bmax + 'px');
                $('#block3').css( 'height', bmax + 'px');
            }, 800)
        
        }
    });

});

Отже проблема була в тому, що у випадку з FF значення висоти бралося коли були підключені ще не всі стилі, тому висота колонок була меншою за розмір внутрішнього контенту. Більш детально проблему не вивчала. Якщо хтось вже працював з бібліотекою Skel.js і має якісь думки і поради на цю тему, буду рада дізнатися)) Але напевно, вже в новій темці)

Подякували: Chemist-i, 0xDADA11C7, mike, koala4