Скрыть 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

Используйте media queries Ваш код CSS будет:.

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

Answer 2

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

Answer 3

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

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

$(document).ready(function() { 

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

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

}); 

Answer 4

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

$(window).resize(function() { 

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

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

    } else { 

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

    } 

}); 

Answer 5

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

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

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

В CSS я установить это Див для показа ни

#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 работали вместе. Надеюсь, это поможет вам, ребята