Problema de visibilidade

Outubro 20, 2008

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.

TibumWeb · Outubro 20, 2008

Cara posta o código pra gente dar uma olhada, mas só lembro que o firefox e Chrome estão certo, o IE que é zuado

KaKarotto · Outubro 20, 2008

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.

Outubro 20, 2008

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>

Outubro 21, 2008

E ae, alguém sabe como resolveror favor??

Jonathan Queiroz · Outubro 21, 2008

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>"

Outubro 21, 2008

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!

Jonathan Queiroz · Outubro 21, 2008

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

Hericksnake · Outubro 21, 2008

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!!

Jonathan Queiroz · Outubro 21, 2008

só Deus sabe o porque mesmo o texto fazendo parte da div não some junto com ela..

É, realmente o IE é meio chatinho de se trabalhar em alguns casos...

Vou ver aqui se acho alguma forma melhor e mais fácil de se fazer isso

Qualquer coisa, posto aí

Hericksnake · Outubro 22, 2008

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>

Entrar

Problema de visibilidade

Pergunta

Guest Hérick

Link para o comentário

Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest Hérick

Link para o comentário

Compartilhar em outros sites

Guest Hérick

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest Hérick

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns