3

Здравствуйте, друзья!

Нужно реализовать такой код:
1. когда ширина экрана больше 1024px, блок подстраивает высоту под размеры экрана
2. когда ширина экрана меньше 1024px, блок имеет высоту 1000px

Хочется, чтобы это происходило при ресайзе, то есть переключение в реальном времени.

У меня работает только при переходе от 1025px к 1024px. Обратно в реальном времени не работает, нужно обновлять страницу. Подскажите, пожалуйста, где ошибка!

function heightDetect() {
    $(".main_sect_bg, .main_sect").css("min-height", ($(window).height()));
};

heightDetect();

$(window).resize(function() {
    if ($(window).width() >= '1024') { heightDetect() } 
    if ($(window).width() < '1024') { $(".main_sect_bg, .main_sect").css("height", '1000') };
});

$(window).load(function() {
    if ($(window).width() >= '1024') { heightDetect() } 
    if ($(window).width() < '1024') { $(".main_sect_bg, .main_sect").css("height", '1000') };
});
9
  • 1
    не совсем понятно, когда больше 1024 то меняем длину, когда меньше то высоту. 8 окт 2016 в 22:51
  • @VyacheslavDanshin извиняюсь, исправил. речь идет о высоте 8 окт 2016 в 22:53
  • предлагаю в $виндоу.ресайз вставить консоль.лог с шириной окна и в каждом условии по логу, для того что бы увидеть куда заходит рантайм и заходит ли вообще. 8 окт 2016 в 22:58
  • @VyacheslavDanshin можете подсказать, как будет выглядеть код? я новичок в js 8 окт 2016 в 23:02
  • console.log($(window).width()) 8 окт 2016 в 23:09

1 ответ 1

2

После перехода к меньшему размеру экрана в css записываается height: 1000px и никуда не девается. Решил проблему, вставив автоматическую высоту в начале функции ресайза.

function heightDetect() {
        $(".main_sect_bg, .main_sect").css("min-height", ($(window).height()));
    };

    heightDetect();

    $(window).resize(function() {
        $(".main_sect_bg, .main_sect").css("height", 'auto');
        if ($(window).width() >= '1024') { heightDetect() } 
        if ($(window).width() < '1024') { $(".main_sect_bg, .main_sect").css("height", '1000') }
    });

    $(window).load(function() {
        if ($(window).width() >= '1024') { heightDetect() } 
        if ($(window).width() < '1024') { $(".main_sect_bg, .main_sect").css("height", '1000') };
    });

Ваш ответ

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

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