Ir para conteúdo
Fórum Script Brasil
  • 0

Problema de visibilidade


Guest Hérick

Pergunta

Pessoal estou com o seguinte problema.

Tenho várias divs e cada uma delas tem um texto escrito.

Tanto a div quanto o texto estão com visibility=hidden. Tenho um botão para cada div, quando clico no botão a respectiva div aparece, se clico de novo eu volto a colocar ela como hidden. Até aí tudo bem, porém, se eu altero algumas coisas na div, eu seto a visibilitade do texto como visible, então na próxima vez que eu quiser visualizar a div o texto dentro dela vai estar visível.

Acontece que no IE funciona...se meu texto está visível e eu fecho a div tanto o texto como a div devem desaparecer, só que no FF e no Chrome, a div desaparece mas o texto fica visível.

Alguém sabe como resolver isso?

Pelo pouco de html que eu sei, a div é como um container, se ela está invisível todo o seu conteúdo deve estar invisível também, porém não é isso que está acontecendo...

Desde já agradeço a ajuda de todos.

Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
Pelo pouco de html que eu sei, a div é como um container, se ela está invisível todo o seu conteúdo deve estar invisível também, porém não é isso que está acontecendo...

É o que eu também pensava...

Provavelmente tem algo de errado na sua lógica. Posta o javascript.

Link para o comentário
Compartilhar em outros sites

  • 0

Desculpem a demora, é que o código é muito grande e essas DIvs são feitas com JSP.

Fiz um protótipo só em html e javascript pra vocês verem o que acontece.

Na aplicação tem o arquivo css e tal mas como é para o exemplo botei direto na div mesmo só pra constar..

Note que no IE, o texto some junto com a div, no FF e Chrome não.

Quanto ao amigo que disse que provavelmente o IE está errado eu concordo, aliás, tive que fazer dois métodos diferentes na aplicação porque uma função em javascript o IE não suporta...sem falar em quesito de performance.

Mas segue o código:

<html>
    <head>
    </head>
    
    <body>
    <script>
    function abre(){
    document.getElementById("divdetr").style.visibility="visible";
    }
    
    function abreTexto(){
    document.getElementById("paragr").style.visibility="visible";
    }
    
    function fechaDiv(){
            div = document.getElementsByName("divdetr");                                     
            div[0].style.visibility="hidden";                           
    }        
    
    </script>
    <div id='divdetr' name='divdetr' style='position:absolute; left:100; top:100; height: auto; width: 400px; border: 1px solid; background: #999999; visibility:hidden' >
    <table>                 
        <div name='graficor' id='graficor'>
        </div>
    </table>
    <font id='paragr' name='paragr' style='visibility:hidden' color='red'>O texto é aqui</font>
    </div>
    
    <input type="button" value="abreDiv" onclick="abre();"/>
    <input type="button" value="abreTexto" onclick="abreTexto();"/>
    <input type="button" value="fechaDiv" onclick="fechaDiv();"/>
    
    </body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0

Faz isso aqui:

<html>
    <head>
    </head>
    
    <body>
    <script>
    function abre(){
    document.getElementById("divdetr").style.visibility="visible";
    }
    
    function abreTexto(){
    document.getElementById("paragr").style.visibility="visible";
    }
    
    function fechaDiv(){
            div = document.getElementsByName("divdetr");                                     
            div[0].style.visibility="hidden";                           
    }        
    
    </script>
    <div id='divdetr' name='divdetr' style='position:absolute; left:100; top:100; height: auto; width: 400px; border: 1px solid; background: #999999; visibility:hidden' >
    <table>                 
        <div name='graficor' id='graficor'>
        </div>
    </table>
    O texto é aqui
    </div>
    
    <input type="button" value="abreDiv" onclick="abre();"/>
    <input type="button" value="abreTexto" onclick="abreTexto();"/>
    <input type="button" value="fechaDiv" onclick="fechaDiv();"/>
    
    </body>
</html>

Simplesmente tira a etiqueta "<font>"

Link para o comentário
Compartilhar em outros sites

  • 0

O problema é que eu preciso controlar quando o texto vai ou não aparecer na div. Se eu tirar a etiqueta <font> além de eu não poder alterar a cor do meu texto eu não vou consigar habilitá-lo quando eu quiser entende?

Mas valeu pela tentativa!

Link para o comentário
Compartilhar em outros sites

  • 0

Entendi vou elaborar um script aqui pra você

Tenta fazer isso:

<html>
    <head>
    </head>
    
    <body>
    <script>
    function abre(){
    document.getElementById("divdetr").style.visibility="visible";
    abreTexto()
    }
    
    function abreTexto(){
    document.getElementById("paragr").style.visibility="visible";
    }

function fechaTexto(){
    document.getElementById("paragr").style.visibility="hidden";
    }
    
    function fechaDiv(){
            div = document.getElementsByName("divdetr");                                     
            div[0].style.visibility="hidden";                          
        fechaTexto()
    }        
    
    </script>
    <div id='divdetr' name='divdetr' style='position:absolute; left:100; top:100; height: auto; width: 400px; border: 1px solid; background: #999999; visibility:hidden' >
    <table>                 
        <div name='graficor' id='graficor'>
        </div>
    </table>
    <span id="paragr" name="paragr" style="color: red">O texto é aqui</span>
    </div>
    
    <input type="button" value="abreDiv" onclick="abre();"/>
    <input type="button" value="abreTexto" onclick="abreTexto();"/>
    <input type="button" value="fechaDiv" onclick="fechaDiv();"/>
    
    </body>
</html>

Quando abrir a DIV irá mostrar o texto e quando fechar a DIV irá esconder também o texto

Link para o comentário
Compartilhar em outros sites

  • 0

Bom, eu tomei vergonha na cara e me registrei no site.

Entendi o que você fez. O porém, é que no caso minha aplicação suponha que tenha 20 dessas divs escondidas. Se eu altero uma dessas divs o texto na respectiva div vai se tornar visível. Quando eu fechá-la da maneira como você fez eu fecho o texto também.

Só que se eu voltar a abrí-la, como vou saber se ela sofreu alteração ou não, sendo que o texto vai estar hidden?

Até tive a idéia aqui de colocar um campo <hidden> na minha div que indica se ela sofreu alteração ou não e toda vez que abrir uma div, se esse campo for true eu mostro o texto de novo.

Bom eu vou tentar depois e posto a resposta e o código caso dê certo.

Eu ainda acho que tenha jeito de fazer isso sem toda essa trabalheira, mas só Deus sabe o porque mesmo o texto fazendo parte da div não some junto com ela..

Mas valeu pela ajuda!

Abraço!!

Link para o comentário
Compartilhar em outros sites

  • 0

valeu Jonathan,

Então, como eu disse que ia tentar fazer, com o campo Hidden servindo como um flag deu certo. Porém acho que essa não é a melhor solução. Caso alguém conseguir resolver é só postar aqui.

Segue o código com o Hidden:

<html>
    <head>
    </head>
    
    <body>
    <script>
    function abre(){
    if(document.getElementById("teste").value=="true"){
        document.getElementById("paragr").style.visibility="visible";
    }
    document.getElementById("divdetr").style.visibility="visible";
    
    }
    
    function abreTexto(){
    document.getElementById("paragr").style.visibility="visible";
    document.getElementById("teste").value="true";
    }
    
    function fechaDiv(){
            div = document.getElementsByName("divdetr");                                     
            div[0].style.visibility="hidden";                           
            document.getElementById("paragr").style.visibility="hidden";
    }        
    
    </script>
    <div id='divdetr' name='divdetr' style='position:absolute; left:100; top:100; height: auto; width: 400px; border: 1px solid; background: #999999; visibility:hidden' >
    <table>                 
        <div name='graficor' id='graficor'>
        </div>
    </table>
    <hidden id="teste" name="teste" value="false"/>
    <font id='paragr' name='paragr' style='visibility:hidden' color='red'>O texto é aqui</font>

    </div>
    
    <input type="button" value="abreDiv" onclick="abre();"/>
    <input type="button" value="abreTexto" onclick="abreTexto();"/>
    <input type="button" value="fechaDiv" onclick="fechaDiv();"/>
    
    </body>
</html>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...