Ir para conteúdo
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

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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"

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

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