Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fernandoinfo

Ocultar div com Java Script

Por , em Javascript

Recommended Posts

fernandoinfo    0

fernandoinfo
Postado

Olá.

 

Estou quebrando a cabeça aqui. Tenho esse código: 

<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
    window.location.href = "desktop/index.html";
  }
  </script>

O que ele faz é simples. Se a resolução da tela for maior ou igual a 800px, ele redireciona a navegação para outra página. Bem o que eu quero é usar o mesmo código mas a invés de redirecionar a navegação ele oculte uma div.

 

Tipo: Se a resolução da tela for maior ou igual a 800px uma div ficará oculta. Alguém sabe me dizer como faço. Já tentei usar com @media screen e não funciona direito. Esse código acima seria perfeito.

 

Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Guedes Coutinho    0

Felipe Guedes Coutinho
Postado

Experimenta utilizar o código abaixo e veja se funcionar.

  

<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
        document.getElementById('Id_da_Sua_Div').style.visibility='hidden';
        document.getElementById('Id_da_Sua_Div').style.display='none';
  }
</script>

 

Se a minha resposta for útil não esqueça de agradecer e votar positivo.

 

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandoinfo    0

fernandoinfo
Postado
Em 03/08/2019 at 20:02, Felipe Guedes Coutinho disse:

Experimenta utilizar o código abaixo e veja se funcionar.

  


<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
        document.getElementById('Id_da_Sua_Div').style.visibility='hidden';
        document.getElementById('Id_da_Sua_Div').style.display='none';
  }
</script>

 

Se a minha resposta for útil não esqueça de agradecer e votar positivo.

 

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

 

Felipe:

Não funcionou. Pode ver para mim se fiz certo?

www.upcomputadores.com.br/teste2.html

 

Segundo o script em uma tela maior ou igual a 800px a div preta deveria ficar oculta.

 

Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado
Em 03/08/2019 at 16:16, fernandoinfo disse:

@media screen e não funciona direito

Funciona sim e é o caminho mais indicado.

Pois essa é a técnica utilizada no design-responsivo.

Acredito que não funcionou com você porque se esqueceu de passar os metadados no viewport. 

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo usando media query</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @media (max-width: 800px) {
                .esconde {display: none}
            }
        </style>
    </head>
    <body>
        <div id="qualquer" class="esconde">
            Isso vai sumir quando a resolução horizontal máxima atingir 800 pixels
        </div>
    </body>
</html>

 

Mas se quiser fazer por meio de script, ao qual não é muito legal pois dependendo da velocidade do carregamento da página pode chegar a demorar que o elemento seja ocultado: 

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo usando script</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="qualquer">
            Isso vai sumir quando a resolução horizontal máxima atingir 800 pixels
        </div>
        <script>
            var qualquer = document.getElementById('qualquer'),
                    w = window.innerWidth;
            if (w <= 800) {
                /* 
                 * Oculta o elemento se a resolução for menor que 800
                 * Isso estará funcional assim que o documento terminar de carregar
                 */
                qualquer.style.display = 'none';
            }

            /* Temos que saber se a resolução foi alterada */
            window.onresize = function () {
                window.w = window.innerWidth; // Obtem a largura atual
                if (window.w <= 800) {
                    qualquer.style.display = 'none';
                } else {
                    qualquer.style.display = 'block';
                }
            };
        </script>
    </body>
</html>

 

DICA *

Desde o HTML 4.01 não se usa mais language="JavaScript" e também não é mais necessário em HTML 5 type="text/javascript"

Compartilhar este post

Link para o post
Compartilhar em outros sites

fernandoinfo    0

fernandoinfo
Postado
Em 05/08/2019 at 05:28, Omar~ disse:

Funciona sim e é o caminho mais indicado.

Pois essa é a técnica utilizada no design-responsivo.

Acredito que não funcionou com você porque se esqueceu de passar os metadados no viewport. 


<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo usando media query</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @media (max-width: 800px) {
                .esconde {display: none}
            }
        </style>
    </head>
    <body>
        <div id="qualquer" class="esconde">
            Isso vai sumir quando a resolução horizontal máxima atingir 800 pixels
        </div>
    </body>
</html>

 

Mas se quiser fazer por meio de script, ao qual não é muito legal pois dependendo da velocidade do carregamento da página pode chegar a demorar que o elemento seja ocultado: 


<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo usando script</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="qualquer">
            Isso vai sumir quando a resolução horizontal máxima atingir 800 pixels
        </div>
        <script>
            var qualquer = document.getElementById('qualquer'),
                    w = window.innerWidth;
            if (w <= 800) {
                /* 
                 * Oculta o elemento se a resolução for menor que 800
                 * Isso estará funcional assim que o documento terminar de carregar
                 */
                qualquer.style.display = 'none';
            }

            /* Temos que saber se a resolução foi alterada */
            window.onresize = function () {
                window.w = window.innerWidth; // Obtem a largura atual
                if (window.w <= 800) {
                    qualquer.style.display = 'none';
                } else {
                    qualquer.style.display = 'block';
                }
            };
        </script>
    </body>
</html>

 

DICA *

Desde o HTML 4.01 não se usa mais language="JavaScript" e também não é mais necessário em HTML 5 type="text/javascript"

Oi Omar.

Obrigado

Não deu totalmente certo. Encontrei o mesmo problema ao usar media queries. Quando reduzo a janela, realmente o elemento some. Contudo se acesso em celular com largura menor que 800px ele num some. Se tento usar a viewport ele funciona mas o tamanho do elemento na tela fica maior do que deveria.

 

Percebi que seu script é um pouco diferente do meu. O meu está assim: 

<script language="JavaScript" type="text/javascript">
  if (screen.width >= "800") {
    window.location.href = "desktop/index.html";
  }
  </script>

Funciona muito bem para redirecionar. Sabe se tem um jeito de mudar somente: 

window.location.href = "desktop/index.html";

para outro comando que esconda a div?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito