É Correto fazer isto? Ocultar e Mostrar DIVS com display:none; ?

[Fábio BN 17]

Oi Pessoal.

 

Eu tenho um E-Commerce e estou deixando ele responsivo!

Porém estou utilizando algumas téncicas de CCS3 com HTML5 que funcionam perfeitamente em navegadores novos, mas já no IE8 não funciona muito bem.

 

Como por exemplo, eu crio alguns textos dentro de DIVs que só são mostrados em determinados resoluções de larguras, onde o texto anterior desaparece e o novo texte aparece, faço isos usando os comando:

    @media (max-width: 950px) {
 .topo_telefone_whats{ display:none; }
  }

ou

      @media (min-width: 400px) {
 .topo_dados_2_a{ display:none; }
  }

Ou seja, dependendo da largura da tela, exibe ou remove DIVs.

 

Gostaria de saber se essa prática é aceita? Funciona perfeitamente nos navegadores atuais e celulares, mas tenho receio de algum usuártio ter navegador antigo e exibir as DIVs todas juntas remontadas uma sobre as outras!

 

 

Obrigado!

 

Fábio.

[rikaschmitt 54]

Acredito que seja certo sim, eu tbm uso. kkkkkkk

 

Mas também você pode fazer através de jQuery, criando duas classes, uma para ocultar e outra para mostrar.. dai só aplicar a classe na div desejada.

 

Exemplo:

$('.ocultar').hide();
$('.mostrar').show();

[Fábio BN 17]

Entendi.

Pois em alguns Menus que eu utilizo no site, não dá para responsivar ele adequadamente devido a complexiade da versão PC, por isso eu tenho que criar 2 Menus separados, um para PC e outro para Mobile, sendo que em determinadas larguras um se esconde e o outro aparece no mesmo momento.

Você acha que fazer isso pelo JQuery é mais confiável do que pelo CSS3? Ou tanto faz ?

Se você puder me mandar um exemplo básico de como aplicar pelo Jquery, agradeço.

Exemplo:

Eu tenho 2 DIVs.

<div id="Menu01"> Mostrar acima de 800px, e esconde abaixo de 800px.

e

<div id="Menu02"> Mostrar abaixo de 800px, e esconde acima de 800px.

 

Como fica a rotina acima?

 

Outra coisa, só funcioina com, ID, ou posos usar na Classe também?


Abraços!

Fábio!

[Bruno Miguel 7]

Boa Tarde,

 

Sim, é correto usar assim, mas também poderia utilizar por classes, como o rikaschmitt mencionou.

Mas para facilitar mais não era necessário utilizar jquery, poderia apenas criar 2 estilos em CSS desse tipo:

.ocultar {
display:none;
}
.mostrar {
display: block;
}

Penso que seria mais fácil!

Mas isso fica a seu critério...

 

Atenciosamente,

Bruno Miguel

[Fábio BN 17]

Ok.

 

Tb acho mais simples no CSS.

Pode cancelar o exemplo que pedi em Jquery, depois procuro na Internet, pois eu entendo um pouco e não será difícil encontrar!

Abraços!

Fábio!

[reebr 94]

Errado não é.

 

Mas dessa forma aí o conteúdo vai ser baixado normalmente, a diferença é que o navegador que não vai renderizar/mostrar. Se você tem um site com 50 divs e quer deixar somente uma visível, saiba que as outras 49 estarão no navegador do usuário (: Então se estiver usando isso para aumentar a performance ou consumir menos dados do usuário em resoluções menores, esquece.

[Fábio BN 17]

Sim, é verdade, ele será carregado consumindo tráfego, só não será mostrado!

Tenho uma dúvida.
Digamos que eu possuo uma DIV com uma caixa de LOGIN, certo?

Digamos que em uma determinada resolução eu queria ocultar este DIV de uma determinada parte do site faze-la aparecer em outro local da tela mais para cima perto de uma LOGO por exemplo. Eu preciso ter 2 DIVs de nomes diferentes com o mesmo conteúdo, ocultar uma e mostrar a outra? Ou tem como eu pegar a mesma DIV e faze-la aparecer em outro ponto? O Comando Position talvez ajude, mas creio que não funcionaria direito, pois mesmo que eu posicione em outro local, caso o LayOut fosse fluído ele não iria se comportar direito, eu acho.

Obrigado! Fábio!

[tmalexandre 2]

Tenho quase certeza que tem sim como fazer com a mesma DIV. Mas para te confirmar isso seria bacana você mostrar pelo menos um esboço de como é o layout, assim ficaria mais fácil de ajudar. Até mais...

[Fábio BN 17]

Oi.

Eu resolvi fazer algo melhor, na versão PC eu deixo a caixa de LOGIN exposta na tela, e na versão Mobile fiz uma caixa de LOGIN que abre em Modal do BootStrap onde se acessa apertando um botão, ficou muito melhor do que usar a mesma caixa de LOGIN, assim ocupa menos espaço na telinha do celular.

 

Eu agradeço a ajuda de todos.

 

Abraços!
Fábio