0

Задача: скрипт определяет высоту блока в зависимости от наличия отсутствия в теле body другого. Я использовал следующий вариант:

$("document").ready(function(){
 if(window.innerWidth > 500){
  if ($(".block").length) {
    $('#div1').css("height", "calc(100vh - 40px)");
    $('#div2').css("height", "calc(50vh - 40px)");
    }
else {
    $('#div1').css("height", "100vh");
    $('#div2').css("height", "50vh");
    }
 }
});

Браузер выводит только значение else. В чем проблема? HTML:

<body>
  <div class="block"></div>
  <div id="div1(или div2)"></div>
</body>
12
  • викторина? Не хватает html.
    – user176262
    15 ноя 2017 в 5:51
  • Нет, конечно) Все три блока лежат в корне body. Div1 и div2 - блоки с разный страниц, т.о. <body> <div class="block"></div> <div id="div1(2)"></div> </body> 15 ноя 2017 в 5:54
  • Добавьте ваш код HTML, код JS работает нормально. 15 ноя 2017 в 5:56
  • @MaximRadziuk Вы, случайно, не забыли завернуть это в $(window).resize(function(){...});?
    – user176262
    15 ноя 2017 в 6:08
  • 2
    $("document") не надо писать в "" - кавычках.
    – And
    15 ноя 2017 в 6:15

2 ответа 2

0

Скорее всего броузеры не понимают в атрибуте вот эту конструкцию

 calc(100vh - 40px)

Попробуй следующий код:

$("document").ready(function(){

 if(window.innerWidth > 500){

    var screenHeight = $(window).height();  
    var heightForDiv1 = (screenHeight - 40) + 'px';      
    var heightForDiv2 = (screenHeight/2 - 40) + 'px';   

    if ($(".block").length) {
        $('#div1').css("height", heightForDiv1);
        $('#div2').css("height", heightForDiv2);
    }
    else {
        $('#div1').css("height", "100vh");
        $('#div2').css("height", "50vh");
   }

 }

});

Если не сработает, то, видимо, ошибка в селекторе, который ты ищешь во втором условии: ".block". Ничего не имею против любых наименований в чужих проектах, но у какого-то элемента действительно класс "block"?))

Либо на момент отработки скрипта $(".block") еще не существует (эта коллекция, к примеру, появляется динамически).

Upd:

calc(100vh - 40px)

Это работает нормально.

3
  • Спасибо, классы имеют другое название в проекте, это я сюда для простоты такой подобрал. Конструкцию в других местах браузеры отображают корректно, на странице еще 6-7 блоков с шириной и высотой, использующих calc. Где-то через часа 2-3 мне ответит пхп программист, может он чего косячит. 15 ноя 2017 в 6:10
  • Тут ошибка на клиенте. Сделай точку останова на проверке условия $(".block").length, и посмотри в консоли что там. 15 ноя 2017 в 6:13
  • У меня условие работает. Видимо проблема в прорграммисте. Дождусь пока выйдет на связь, там будет видно... Спасибо) 15 ноя 2017 в 6:29
0

Нормально работает ваш пример.

$(document).ready(function(){
 if(window.innerWidth > 500){
  if ($(".block").length) {
    console.log('Условие срабатывает.'+' calc(100vh - 40px) и calc(50vh - 40px)');
    $('#div1').css("height", "calc(100vh - 40px)");
    $('#div2').css("height", "calc(50vh - 40px)");
    }
  else {
    console.log('Условие НЕ срабатывает. '+'height, 100vh и height, 50vh');
    $('#div1').css("height", "100vh");
    $('#div2').css("height", "50vh");         
  }
 }
});
#div1 {
    background-color: rgb(244, 128, 36);
    color: white;
    font-weight: bold;
    padding: 10px;
}
#div2 {   
    background-color: #45a163;
    color: white;
    font-weight: bold;
    padding: 10px;
}
.block{
  text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="block"> DIV BLOCK </div>
  <div id="div1">DIV - 1  </div>
  <div id="div2">DIV - 2  </div>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.