1

Olá! Eu estou montando um site responsivo e usando alguns layouts do bootstrap pra fazer o site. O problema é que o layout que eu mais gostei ele não foi feito com um menu bom para muito conteúdo, principalmente para usuários com a tela menor que 768px.

Então eu tive uma ideia, usar JS para que acima de 768px eu ter um tipo de layout e abaixo outro. Sim eu uso media querie, mas como são layouts do bootstrap eu preciso tirar e colocar algumas classes no html dependendo do tamanho da tela e só da pra fazer isso por JS (até onde eu sei).

Logo, abaixo eu tenho o script que eu fiz pra quando der resize na tela entrar o estilo que eu quero, mas o problema é que se a pessoa entrar por um celular ela n vai fazer o resize na tela e não vai entrar o layout automaticamente.

var $element = $("nav");
    $(window).resize(function () {    
        /*Abaixo de 768px, add a classe .navbar-inverse*/
        if (window.innerWidth < 768) {
            $element.addClass("navbar-inverse");
        /* Acima de 768px, se existir a classe navbar-inverse ela é retirada*/
        } else {
            $element.removeClass("navbar-inverse");
        }
    });

Resumindo, eu preciso que quando a pessoa entre com uma resolução abaixo de 768px ele adicione a classe .navbar-inverse e que quando ele faça o resize no navegador e entre nesse script que já está pronto.

Obrigadão pela atenção!

2 Respostas 2

4

Você pode forçar o evento a ser chamado através do método trigger, fazendo isso logo após definir ele pode resolver o seu problema

$(window).resize(function(){
    //seu código aqui
}).trigger("resize");
1
0

Se tudo que deseja é que um determinado estilo seja aplicado apenas quando a tela tiver um width menor que 768px, então a melhor opção seria usar apenas CSS.

@media screen and (max-width: 768px) {
    .navbar-inverse {
        /* estilos */
    }
}
1
  • o .navbar-inverse é uma classe do bootstrap ja configurada, se ela for adicionada a uma tag ela não precisa de nenhuma configuração. 14/04/2015 às 16:33

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 .