Queria por funções que executam quando a tela diminui em determinado pixel, mas nao sei qual função uso pra isso.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Queria por funções que executam quando a tela diminui em determinado pixel, mas nao sei qual função uso pra isso.
Fala Leonardo blz?
Vc pode usar o script abaixo:
if( $(window).width() < 800){
/*faça algo*/
}
Você pode usar o elemento 'window' do Javascript para verificar o tamanho da tela. Exemplo:
x = window.screen.width;
y = window.screen.height;
if(x <800){
//Ação aqui
}
Fala Leonardo,
As soluções acima funcionam, mas acho que você quer saber o exato momento em que houve a mudança de tamanho, estou certo?
Se for assim acredito que você pode usar a função abaixo:
document.body.onresize = function() {
if (document.body.clientWidth < 800) {
//executar o código aqui dentro
}
};Espero ter ajudado!
Abraços!
Muito bom Luiz, sua solução parece ótima se for para saber exatamente o momento da mudança de tamanho da tela. Não conhecia essa abordagem.
E ai Fábio,
Obrigado,
Informo também que as soluções acima não estão erradas, mas apenas uma breve explicação da diferença entre usar window.screen.width e document.body.clientWidth.
window.screen.width : Ele pega o tamanho da tela do usuário, sendo assim pega o tamanho da tela do monitor, tablet, celular e etc., e não o tamanho da janela do navegador.
document.body.clientWidth : Ele pega o tamanho da janela do navegador do usuário, existem outros jeitos também com os códigos abaixo, este que usei é usado para pegar o tamanho caso o usuário esteja usando navegadores antigos e novos.
Existe uma documentação para isso aqui neste LINK, e eu dei uma olhada nela e refatorei o meu código para ser abrangente:
window.onresize = function() {
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < 800) {
//executar o código aqui dentro
}
};Excelente Luiz, interessante que haja uma maneira de verificar isso em "qualquer" navegador. O Object document está realmente bem completo, tem muitas informações boas para serem usadas.
Acho que o mais interessante aí é não usar JQuery sem necessidade, usando só o VanillaJS.