Ir para conteúdo

POWERED BY:

Arquivado

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

Victor Ferreira

[Resolvido] Display para esconder um elemento e mostrar outro

Por , em Javascript

Recommended Posts

Victor Ferreira    0

Victor Ferreira
Postado

RESOLVIDO

 

Tenso, o firefox não tem o pior dos depuradores e eu nao percebi que o valor que eu tava passando pro display era "display". Francamente... Além disso o NetBeans nao dá sugestões dentro de atributos de style.

 

Pessoal, tenho um div central e, dois 'botões' e 2 telas de centro dentro dele.

 

Quando passo o mouse sobre um deles, deve esconder um com display: none e mostrar o outro com display: block. Para isso ele faz um testezinho para saber qual esconder e qual mostrar.

 

HTML:

<body onload="criaVariaveis();">
<div id="conteudo">
            <div id="go_left" onmouseover="some_aparece(this);"></div>
            <textarea cols="" rows="" id="texto_construindo"></textarea>
            <div id="texto_formatado"></div>
            <div id="go_right" onmouseover="some_aparece(this);"></div>
        </div>
go_left e go_right são os botões. texto_construindo e texto_formatado são os divs de centro.

CSS:

#conteudo{
            margin: 0 auto;
            _text-align: left;
            height: 410px;
            overflow: hidden;
            width: 100%;
        }
        #texto_construindo{
            width: 750px;
            height: 400px;
            float: left;
            margin: 0px;
            padding: 0px;
            display: block;
        }
        #texto_formatado{
            width: 740px;
            height: 400px;
            float: left;
            margin: 0px;
            padding: 0px;
            background: #3d1;
            display: none;
        }
        #go_left{
            margin-top: 10px;
            width: 15px;
            height: 380px;
            background: aqua;
            float: left;
        }
        #go_right{
            margin-top: 10px;
            width: 15px;
            height: 380px;
            background: aqua;
            float: left;
        }
Um div central já começa hidden e outro já começa block, como deve ser

Javascript:

function criaVariaveis(){
            var go_left = document.getElementById('go_left');
            var go_right = document.getElementById('go_right');
            var texto_construindo = document.getElementById('texto_construindo');
            var texto_formatado = document.getElementById('texto_formatado');
        }

        function some_aparece(obj){
            if(obj.id==go_left.id){
                    texto_construindo.style.display="display";
                    texto_formatado.style.display="none";
            }
            if(obj.id==go_right.id){
                    texto_formatado.style.display="display";
                    texto_construindo.style.display="none";
            }
        }

O problema ocorre quando eu sumo com um. Simplesmente o outro não aparece. Os dois botões ficam coladinhos (já que o que os fazem ficar separados são algum elemento no meio, e que agora está com display: none;) e não adianta passar novamente o mouse sobre um dos botões que ele não reaparece.

Saberiam me ajudar? Vou postar o código completo caso queiram copiar e colar para verem o problema. Abração!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script type="text/javascript" >

        function criaVariaveis(){
            var go_left = document.getElementById('go_left');
            var go_right = document.getElementById('go_right');
            var texto_construindo = document.getElementById('texto_construindo');
            var texto_formatado = document.getElementById('texto_formatado');
        }

        function some_aparece(obj){
            if(obj.id==go_left.id){
             //   if(texto_construindo.style.display=="none"){
                    texto_construindo.style.display="display";
                    texto_formatado.style.display="none";
             // }
            }
            if(obj.id==go_right.id){
              //  if(texto_formatado.style.display=="none"){
                    texto_formatado.style.display="display";
                    texto_construindo.style.display="none";
                //}
            }
        }

    </script>

    <style type="text/css" media="all">

        #tudo{
            width: 780px;
            margin: 0 auto;
        }
        #topo{
            background: #23f;
            width: 100%;
            height: 150px;
            margin-bottom: 10px;
        }
        #conteudo{
            margin: 0 auto;
            _text-align: left;
            height: 410px;
            overflow: hidden;
            width: 100%;
        }
        #texto_construindo{
            width: 750px;
            height: 400px;
            float: left;
            margin: 0px;
            padding: 0px;
            display: block;
        }
        #texto_formatado{
            width: 740px;
            height: 400px;
            float: left;
            margin: 0px;
            padding: 0px;
            background: #3d1;
            display: none;
        }
        #go_left{
            margin-top: 10px;
            width: 15px;
            height: 380px;
            background: aqua;
            float: left;
        }
        #go_right{
            margin-top: 10px;
            width: 15px;
            height: 380px;
            background: aqua;
            float: left;
        }        
        body{
            padding: 0px;
            background: #000;
            margin: 0 auto;
            _text-align: center;
        }
    </style>
  </head>
  <body onload="criaVariaveis();">
      <div id="tudo">
        <div id="topo"></div>

        <div id="conteudo">
            <div id="go_left" onmouseover="some_aparece(this);"></div>
            <textarea cols="" rows="" id="texto_construindo"></textarea>
            <div id="texto_formatado"></div>
            <div id="go_right" onmouseover="some_aparece(this);"></div>
        </div>

      </div>
  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

Conseguiu resolver de fato?

 

Qual seria a solução?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tenso, o firefox não tem o pior dos depuradores e eu nao percebi que o valor que eu tava passando pro display era "display". Francamente... Além disso o NetBeans nao dá sugestões dentro de atributos de style.

Para parte client side, eu prefiro o Aptana.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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