1

Подскажите, почему не работает эта функция в Opera и как исправить. Хочу, при изменении ширины экрана показывать разные блоки, работает везде, кроме оперы.

function windowSize(){

$('.div1').stop().show(0);
$('.div2').stop().hide(0);
$('.div3').stop().hide(0);

if ($(window).width() >= '1000'){
$('.div2').stop().show(0);
$('.div1').stop().hide(0);
$('.div3').stop().hide(0);
}

if ($(window).width() >= '1200'){
$('.div3').stop().show(0);
$('.div1').stop().hide(0);
$('.div2').stop().hide(0);
}
}
$(window).on('load resize',windowSize);
div.box {
width: 300px;
height: 200px;
display: none;
}
<div class="box div1">1</div>

<div class="box div2">2</div>

<div class="box div3">3</div>

1 ответ 1

1

function windowSize() {
  var div1 = $('.div1').stop()
    , div2 = $('.div2').stop()
    , div3 = $('.div3').stop()
    , width = $(window).width();
  if (width >= 1200) {
    div3.show(0);
    div1.hide(0);
    div2.hide(0);
  }
  else if (width >= 1000) {
    div2.show(0);
    div1.hide(0);
    div3.hide(0);
  }
  else {
    div1.show(0);
    div2.hide(0);
    div3.hide(0);
  }
}
  
$(function() {
  $(window).resize(function() {
    windowSize();
  }).resize();
});
div.box {
  border: 1px solid;
  display: none;
  height: 200px;
  width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box div1">1</div>
<div class="box div2">2</div>
<div class="box div3">3</div>

4
  • Так работает, но частично. Во всех браузерах не показывает div при загрузке страницы. Начинает отображать только при изменении ширины экрана (если поресайзить браузер), причем в опере, только после ресайза и отжатия кнопки мыши.
    – Vadim
    23 апр 2017 в 13:00
  • @Vadim, поправил ответ. 23 апр 2017 в 13:03
  • Неудобно за навязчивость, но осталась еще одна маленькая проблема. Опять же только в опере. Теперь при загрузке страницы блок появляется, но если ресайзить браузер, то условия срабатывают только если отжать кнопку мыши. Может это особенность оперы такая и не стоит заморачиваться? Алекс, в любом случае спасибо
    – Vadim
    23 апр 2017 в 15:36
  • 1
    @Vadim. В зависимости от реализации resize события могут отправляться непрерывно в процессе изменения размера (Internet Explorer, Safari, Chrome), или только один раз по завершению изменения размера (Opera). В последних версиях Оперы это исправлено. 23 апр 2017 в 15:59

Ваш ответ

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

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