Jquery – onload e onresize do tamanho da janela.

Um dos problemas comuns que encontro com o Web Design Responsivo é que quero um botão para disparar uma série diferente de ações com base no tamanho da janela. No Jquery, o problema subjacente a isso é que $ (window) .resize não é algo que é disparado em $ (document) .ready . Para que um botão seja disparado em ambas as instâncias, você precisa anexar a função ao documento pronto e ao redimensionar a janela.

JQuery

onResize = function() {
    if($(window).width() < 530) {
        $('.button').on('click', function() {
            /* Your code here */
        })
    } else {
        $('.button').off('click');
    }
}

$(document).ready(onResize);
$(window).resize(onResize);

Isso deve permitir que você dispare uma ação de clique se o tamanho da janela for <530px. Se o navegador carregar ou for redimensionado para um tamanho maior do que isso, o clique do botão não será disparado.

Além disso, $ (window) .resize é conhecido por vir com algum atraso. Para compensar isso, você pode adicionar uma função para atrasar ações repetidas. Na parte superior do seu código, você pode adicionar o seguinte código …

var delay = (function() {
    var timer = 0;
    return function(callback, ms){
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    }
})();

Agora que você tem uma função para lidar com as ações atrasadas, você desejará editar seu $ (janela) .resize para responder de acordo.

$(window).resize(function() {
    delay(function(){
        onResize();
    },100)
});

Agora você tem um botão que atua de forma diferente com base no tamanho da janela e não tem atraso após a janela ter sido redimensionada.