Запуск js в зависимости от размеров окна браузера?

Question

[DmitryNs]

Есть js, который должен запускаться на размере окна браузера 800px+ в таком виде:

var b = $(".row.hiden"),
        d = $(".view-source"),
        a;
        console.log(b);
    b.each(function(b, c) {
        b % 3 - 2 ? a = a ? a.add($(c)) : $(c) : (a && a.insertBefore($(c)), a = null)
    });
    d.on("click", function() {
        var a = d.index(this);
        b.not(b.eq(a).slideToggle()).slideUp()
    })

А при размере окна меньше 800px условие в одной строке должно меняться на:

b % 2 - 1 ? a = a ? a.add($(c)) : $(c) : (a && a.insertBefore($(c)), a = null)

Пробую через

window.onresize = function(event) {
if(window.innerWidth <= 800) {
}
});

Не срабатывает. Берет то условие, при разрешении которого сайт был запущен изначально. Хотя сама функция window.onresize работает.

Answer 1

[tigra]

как вариант)

$(window).resize(function () {
	yslovie();	
});

function yslovie() {
	if ($(window).width() < 800) {
			alert('меньше 800px');
		} else {
			alert('больше 800px');
		}	
}

Comments

[DmitryNs]

казалось бы стандартное простое решение, но почему то не работает с этим скриптом

Answer 2

[amf1k]

Есть библиотека Modernizr, там уже есть методы для определения размера окна

Comments

[DmitryNs]

и модернизр не помогает. Дело в том, что определяется все корректно. Сам скрипт отрабатывает некорректн, после ресайза.

[amf1k]

а вы вызывается саму функцию после ресайза?

[DmitryNs]

amf1k:

function checkMq() {
 var query = Modernizr.mq('(min-width: 900px)');
 if (query) {
        var b = $(".row.hiden"),
        d = $(".view-source"),
        a;
     
    b.each(function(b, c) {

        b % 3 - 2 ? a = a ? a.add($(c)) : $(c) : (a && a.insertBefore($(c)), a = null)

    });
    d.on("click", function() {
        var a = d.index(this);
        b.not(b.eq(a).slideToggle()).slideUp()
    })
}
  else{
        var b = $(".row.hiden"),
        d = $(".view-source"),
        a;
       
    b.each(function(b, c) {

        b % 2 - 1 ? a = a ? a.add($(c)) : $(c) : (a && a.insertBefore($(c)), a = null)

    });
    d.on("click", function() {
        var a = d.index(this);
        b.not(b.eq(a).slideToggle()).slideUp()
    })
  }
 }

 $(function() {
    checkMq();
    $(window).resize(function() {
        checkMq();
    });

});

[amf1k]

а в чем именно не корректность? а если ресайзнуть и обновить страницу, чтобы осталось это разрешение?

[amf1k]

Просто если скрипт отрабатывает нормально после обновления, значит можно дальше не запариваться, не думаю что реальный пользователь будет заходить на сайт и ресайзить его. Для отладки если только ..

[DmitryNs]

amf1k: этот скрипт сдвигает блоки, которые на -lg- экране выстроены по 3, а на -md- встают по 2. Так вот, я загружаю страницу, жму на блок, блоки сдвигаются корректно. Ресайзю до -md- жму на блок, срабатывает все тот же скрипт с первым условием и блоки уже сдвигаются некорректно. Обновляю страницу находясь на -md- скрипт отрабатывает корректно. Растягиваю до -lg- и отрабатывает скрипт который запустился при начальной загрузке странице, т.е. для -md-.

[amf1k]

DmitryNs: ну так я и говорю, если первый раз скрипт отрабатывает корректно, то я бы оставил так как есть. Реальный пользователь не должен менять размер разрешения