Hide ou Show div no onload html

16 de fevereiro de 2019 10 respostas Resolvido

javaduvidas 16 de fevereiro de 2019

Boa tarde,
estou estudando um pouco de js e estou precisando de uma ideia.

Dependendo do navegador eu gostaria de mostrar o div a ou div b…
Eu consegui fazer isso… detecto o navegador, fiz um if pra mostrar o div a ou div b.
Acontece que quando abro o html, ele motra o div a, o div b e depois esconde um deles.
Isso fica um pouco esquisito visualmente e confuso para o cliente.

O código que fiz foi mais ou menos assim:

<html>
<body>
<diva> mostrar algo </diva>
<divb> mostrar algo
...
...
...
...
</body>
</html>


<script>
```
window.document.onload = detectarNavegador;

function detectarNavegador(){
    ...... // codigos para descobrir navegador
    if(chrome){
       // show.div1;
       //hide.div2;
     }else{
           // hide.div1;
       //show.div2;
}

}

</script>

O código não esta correto como eu fiz,e funciona. Porém esse negocio de aparecer e depois sumir esta incomodando… Alguém tem alguma ideia de mudar isso?
Que ele detecte e antes de mostrar nem mostre o div que não quero e somente o que esta correto para aquele navegador?

10 Respostas

Solucao aceita

javaflex 16 de fev. de 2019

Usa o evento DOMContentLoaded.
Exemplo: https://jsfiddle.net/yaeg9pqw/

javaduvidas 16 de fev. de 2019

Muito bom!
Vou testar na segunda.
Tem algum link para eu estudar esta estrutura de dados em javascript “=> {”…
Não entendi o que isso faz…

Segunda eu testo muito obrigado!!!

javaflex 17 de fev. de 2019 1 like

É uma nova forma de trabalhar com função em javascript, chamado de arrow function. Particularmente ainda trabalho da forma antiga, nem tinha reparado que o exemplo que te passei estava da forma nova, copiei de algum lugar e adaptei pra sua dúvida.

Sobre o link:

Atenção que não muda só pela sintaxe ser mais curta, o contexto do this por exemplo não é o mesmo em comparação a forma clássica function(), como citado na própria documentação. Quem tenta sair fazendo refactoring da forma clássica pra nova pode ter surpresas desagradáveis ou achar que é erro de bibliotecas de terceiros. Sao características diferentes do próprio javascript.

javaduvidas 17 de fev. de 2019

Entendi legal!
Sobre a função… ela pode ser usada no onload da pagina certo?
Obrigado!

javaflex 17 de fev. de 2019

Pode. Mas no onload vai ter o efeito indesejado que era seu problema.

javaduvidas 17 de fev. de 2019

Então amigo, eu preciso disso exatamente no onload… Quando abrir a tela e verifica o navegador… É IE? Ok, mostra o div 1 é outro navegador mostra o div2 entendeu? alguma idéia?

javaflex 17 de fev. de 2019

Testou com o evento DOMContentLoaded que te indiquei? Poste o código que tentou com esse evento.

javaflex 17 de fev. de 2019 1 like

Exemplo funcionando com um dos ifs: https://jsfiddle.net/8xe9j5tz/ O resto é lógica.

Ideal seria trabalhar também com CSS. Mas respondi sua dúvida do jeito que estava fazendo.

javaduvidas 19 de fev. de 2019 1 like

Javaflex acabei mudando de planos. Não deu certo fazer isso não sei pq, mas não tenho tempo habil momento para saber pq…
Como vi seu codigo funcionando no link que vc passou vou colocar sua resposta como correta.

Obrigado pela ajuda!

javaflex 19 de fev. de 2019

Tudo bem, mas na próxima vez mesmo quando a versão que você fizer não der certo, basta postar todo o codigo que fez, assim conseguiriamos identificar o que deu de errado ai.

Criado 16 de fevereiro de 2019

Ultima resposta 19 de fev. de 2019

Respostas 10

Participantes 2

10 Respostas

Topicos relacionados