Скрыть div, если размер экрана меньше определенной ширины

Я хочу скрыть плавающий div, если пользовательский экран равен < 1024px, поскольку он будет накладываться на мою область содержимого блога. Я нашел этот jQuery в сети, но я не уверен, как его использовать.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".yourClass").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".yourClass").css('display', 'block'); // here you can also use show();
}
});

Если мое плавающее имя класса div является sharecontent, следует ли заменить вышеприведенный script, как показано ниже? Если да, то он не работает.

$(document).ready(function() {

if ((screen.width>1024)) {
    // if screen size is 1025px wide or larger
    $(".sharecontent").css('display', 'none'); // you can also use $(".yourClass").hide();
}
elseif ((screen.width<=1024))  {
    // if screen size width is less than 1024px
    $(".sharecontent").css('display', 'block'); // here you can also use show();
}
});

Я также попытался заменить screen.width на window.width, но все равно не успел: (

Ответы

Ответ 1

Используйте медиа-запросы. Ваш CSS-код будет выглядеть следующим образом:

@media screen and (max-width: 1024px) {
    .yourClass {
        display: none !important;
    }
}

Ответ 2

У меня почти такая же ситуация, как у вас; что если ширина экрана меньше моей указанной ширины, она должна скрыть div. Это код jquery, который я использовал, который работал у меня.

$(window).resize(function() {

  if ($(this).width() < 1024) {

    $('.divIWantedToHide').hide();

  } else {

    $('.divIWantedToHide').show();

    }

});

Ответ 3

Проблема с вашим кодом выглядит как elseif-оператор, который должен быть else if (обратите внимание на пробел).

Я переписал и просто использовал код для этого:

$(document).ready(function () {

    if (screen.width < 1024) {
        $(".yourClass").hide();
    }
    else {

        $(".yourClass").show();
    }

});

Ответ 4

В этом примере ваша логика не соответствует неправильному пути, вы скрываете ее, когда экран больше 1024. Отмените случаи, сделайте none in и наоборот.

Ответ 5

Проблема, с которой я столкнулась, - это мои запросы css-media и мой оператор IF в JQuery. Они оба установлены на 700 пикселей, но можно было бы подумать, что они достигли 700 пикселей раньше другого.

Чтобы обойти это, я создал пустое Div прямо в верхней части моего HTML (вне моего основного контейнера)

<div id="max-width"></div>

В css я установил этот div для отображения none

 #max-width {
        display: none;
    }

В моей JS создана функция

var hasSwitched = function () {
    var maxWidth = parseInt($('#max-width').css('max-width'), 10);
    return !isNaN(maxWidth);
};

Итак, в моей инструкции IF вместо того, чтобы сказать if (hasSwitched < 700) выполнить следующий код, я сделал следующее

if (!hasSwitched()) { Your code

}

else{ your code

}

Посредством этого CSS говорит JQuery, когда он достиг 700px. Таким образом, css и jquery синхронизированы... вместо того, чтобы иметь пару разностей пикселей. Постарайся попробовать, он определенно не разочарует.

Чтобы получить эту же логику для IE8, я использовал плагин Respond.js(который также определенно работает). Он позволяет использовать медиа-запросы для IE8. Единственное, что не поддерживалось, это ширина видового экрана и высота видового экрана... следовательно, моя причина попробовать, чтобы мои css и JS работали вместе. Надеюсь, это поможет вам, ребята.