Скрыть div, если экран меньше определенной ширины - PullRequest
Новая
       8

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

24 голосов
/ 28 ноября 2010

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

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

Ответы [ 5 ]

77 голосов
/ 28 ноября 2010

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

@media screen and (max-width: 1024px) {
    .yourClass {
        display: none !important;
    }
}
14 голосов
/ 07 ноября 2013

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

$(window).resize(function() {

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

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

  } else {

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

    }

});
1 голос
/ 28 ноября 2010

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

Я переписал и просто добавил код к этому: 

$(document).ready(function () {

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

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

});
0 голосов
/ 14 февраля 2014

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

Чтобы обойти это, я создал пустой 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), выполнив следующий код, я сделал следующее </p> 

if (!hasSwitched()) { Your code

}

else{ your code

}

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

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

0 голосов
/ 28 ноября 2010

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

...