Jump to content
fernandoinfo

Ocultar div com Java Script

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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"

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.