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

Question

Я хочу скрыть плавающий элемент 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, я должен заменить вышеприведенный скрипт, как показано ниже? Если да, это не работает.

$(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, но все равно безуспешно:(

Answer 1

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

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

Answer 2

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

$(window).resize(function() {

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

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

  } else {

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

    }

});

Answer 3

Кажется, проблема с вашим кодом заключается в выражении elseif, которое должно быть else if (Обратите внимание на пространство).

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

$(document).ready(function () {

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

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

});

Answer 4

Если в этом примере ваша логика неверна, то вы прячете ее, когда экран больше 1024. none в к block и наоборот.

Answer 5

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

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

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

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

 #max-width {
        display: none;
    }

По моему JS создал функцию

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

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

if (!hasSwitched()) { Your code

}

else{ your code

}

Делая это, CSS сообщает Jquery, когда он достигает 700px. Таким образом, CSS и JQuery синхронизируются... а не с разницей в пару пикселей. Сделайте этот пробный взгляд, это определенно не разочарует.

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