5

Quero mudar classes conforme a tela é redimensionada, o código que estou usando só funciona se atualizar a página, gostaria de fazer com que a classe mude sem precisar atualizar a página.

Código:

$(".call-principal").each(function(){
    var scre = $("body").width();
    if ( scre >= 1200 ) {
        $(".icon").addClass("icon-lg");
    } if ( scre > 992 && scre < 1200 ) {
        $(".icon").addClass("icon-md");
    } if ( scre > 768 && scre < 992 ) {
        $(".icon").addClass("icon-sm");
    }  if ( scre < 768 ) {
        $(".icon").addClass("icon-xs");
    }
});

1 Resposta 1

6

Você pode usar o evento resize do jQuery. O código abaixo adiciona as classes quando a página é carregada, e posteriormente, toda vez que a tela for redimensionada (disparando o evento resize):

function addIconClasses() {
    $(".call-principal").each(function(){
        var scre = $("body").width();
        if ( scre >= 1200 ) {
            $(".icon").addClass("icon-lg");
        } if ( scre > 992 && scre < 1200 ) {
            $(".icon").addClass("icon-md");
        } if ( scre > 768 && scre < 992 ) {
            $(".icon").addClass("icon-sm");
        }  if ( scre < 768 ) {
            $(".icon").addClass("icon-xs");
        }
    });
}

$(document).ready(function () {
    // Adicionar classes ao carregar o documento
    addIconClasses();

    $(window).resize(function() {
        // Adicionar sempre que a tela for redimensionada
        addIconClasses();
    });
});

Só um detalhe: não esqueça de também remover as classes que já foram adicionadas sempre que o resize executar, usando o removeClass.

Se possível, considere utilizar CSS Media Queries. Acho que elas podem ser muito úteis no seu caso, evitando a necessidade de todo esse javascript que mostrei acima. Por exemplo:

.icon {
    /* Estilo padrão do ícone */
}

/* largura máxima de 992px */
@media screen and (max-width: 992px) {
    .icon {
        /* Estilo modificado do ícone */
    }
}

Este código customiza o CSS da classe .icon quando a tela tiver no máximo 992px. Você pode adicionar mais um @media para cada largura que quiser customizar.

2
  • Muito obrigado, resolveu meu problema, abraços.
    – Raank
    Commented 1/04/2014 às 9:40
  • Que bom, fico feliz em ter ajudado. Se possível, pode marcar essa resposta como sendo a correta? Abraços!
    – Michael
    Commented 1/04/2014 às 9:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .