Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Collapse conforme a resolução da tela

Bom dia!Preciso que a função show.bs.collapse se aplique somente quando a resolução da tela estiver em 768px (para tablets), já tentei fazer um if através do inner width e do screen.width, mas sem sucesso, alguém poderia me auxiliar?

9 respostas

Você pode usar media queries do css. Ex:

@media (min-width: 768px){
     /*todas as classes aqui dentro serão aplicadas a telas menores que 768px*/
}

Você pode usar quantas medias queries forem necessárias. O Alura tem um um curso sobre layouts responsivos chamado "Web Design Responsivo" que ensina este tipo de programação

Boa tard Gilson, tudo bem? Como posso aplicar o @media direto pelo javascript? Para ficar mais claro, abaixo segue a minha função, onde eu quero que o comportamento dela só seja adotado na resolução que eu informei acima. Muito obrigado pelo retorno

$('.menu-navegacao').on('show.bs.collapse', function(){
    $('.combobox-dashboard').css('top','15em');
});

Não, ela é aplicada diretamente no CSS. O CSS identifica o tamanho da tela e aplica. Crie um arquivo stylo.css, por exemplo, inclua-o no seu html usando a tag própria para isso e pronto. Ai você cria classes de acordo com os tamanhos que deseja suportar. Não é necessário nenhum java script ou framework adicionais. Ex:

.coluna{
             width:100%;
 }
@media (min-width: 768px){
     .coluna{
             width:50%;
        }
}
@media (min-width: 1024px){
     .coluna{
             width:33.34%;
        }
}

Neste exemplo se a tela for menor que 768px temos uma coluna, de ela for maior que 768px e menor que 1024px teremos duas colunas e maior que 1024px teremos três colunas.

Mas eu preciso do javascript, pois estou fazendo uma iteração com o menu. Quando clica no "hambúrguer" do menu é aplicado o show collapse e o meu select (combobox) desce 15em em relação ao topo, porém eu só quero que este comportamento seja aplicado quando estiver em uma tela de 768px. Não sei se deu pra compreender melhor qual o meu problema

Entendi.

Oi João, tudo bem? Olha se esse código te ajuda de alguma forma:

window.addEventListener('resize', () => {
    if(window.innerWidth <= 768) {
        console.log('oi??');
    } 
});

Estou colocando um ouvinte de evento para quando a tela for redimensionada em algum sentido. Então verifico se o tamanho interno da janela é menor ou igual a 768, caso seja, imprimo uma mensagem no console.

Será que ajuda?

Boa noite, Wanderson! Obrigado pelo retorno, apliquei o que você passou, e funciona, mas está com um pequeno bug. Quando eu atualizo a página e testo a funcionalidade (já com o width menor que 768px) ela não adota o comportamento de descer no top informado, ela só funciona quando eu mudo a resolução da tela (por exemplo estou em 768px, vou para 425px e volto para o 768px) aí sim funciona como o esperado, você saberia me dizer por quê isso acontece?

solução!

Olá João. Se a pagina já nasceu com tamanho menor que 768, realmente ele não vai disparar o evento. Então você poderia ter feito isso fora também:

if(window.innerWidth <= 768) {
        console.log('oi?? width menor sem ter resize de tela');
  } 

mesmo se funcionar acho que encontrar alguma solução puramente via css seria mais interessante mesmo e evitaria alguns copy and pastes.

Olá, Paulo. Sem o resize funcionou melhor, desta maneira já consigo resolver o meu problema. Muito obrigado a você e ao Wanderson pelo retorno.