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

Exibir Texto Oculto <div>


juliano.ma

Pergunta

Olá amigos,

baseado em um script aqui do fórum, estou tentando implantar em uma página de piadas com a função de ocultar texto na div com php + javascript.

meu código:

<script language="javascript">
function Layer()
{
  if (document.getElementById("mensagem_layer").style.visibility == 'visible')  
    document.getElementById("mensagem_layer").style.visibility = 'hidden';
  else                
    document.getElementById("mensagem_layer").style.visibility = 'visible';
}

</script>


<?php

//conecta no bd

$conexao = mysql_connect("localhost","user","senha");
$db = mysql_select_db("banco");

//realiza a querie de busca no banco de dados

$sql = "SELECT * FROM piadas ORDER BY id ASC";

$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");

while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
?>

<font size="2" face="Verdana"><? echo "$id"; ?> - <a href="#" onclick="Layer()"><? echo "$titulo"; ?></a></font>
<div id="mensagem_layer" style="cursor: pointer; position:absolute; width:580px; height:100%; z-index:1; visibility:hidden; overflow: hidden; left: 90px; top: 30px; background-color: #F0F8FF; layer-background-color: #F0F8FF; border: 1px none #000000;" onclick="Layer()">
<table width="100%" border="1" cellspacing="0" bordercolorlight="#FFFFFF" bordercolordark="#6495ED">
<tr>
<td align="center"><font size="2" face="Verdana"><b><? echo "$texto"; ?></font></td>
</tr>
</table>
</div>
<br>

<?
}
?>

O problema é que ele não faz o loop do texto. Ele está repetindo em todas as piadas o texto da primeira piada.

Se alguém puder me dar uma dica de como fazer com que a div seja aberta entre um titulo e outro (no caso empurrando os próximos títulos para baixo), pois do jeito que está ele abre sobre o conteúdo da página.

Editado por juliano.ma
Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0

olah juliano!!

no primeiro problema, não identifiquei o problema...só uma duvida o titulo também repete??? ou só o texto??

bom, para o segundo caso, acho que você teria que utilizar a posiçao vertical da div como uma variavel e incrementar a cada texto novo puxado do banco... poderia criar uma funçao em javascript como você fez para as propriedades visibility..

ateh mais, abraço

Link para o comentário
Compartilhar em outros sites

  • 0

Camarada... o problema com seu script eu não achei, sugiro a você acrescentar uns "echo" no código para acompanhar seu funcionamento.

Quanto à formatação, fiz um código um tempo atrás que, acredito, pode ser útil:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <style type="text/css">

 .botao_link {
   position: absolute;
   left: 40px;
   height: 22px;
   width: 129px;
   font-family: Verdana;
   font-size: x-small;
   font-weight: bold;
   font-style: italic;
   color: rgb(49, 49, 49);
   padding-bottom: 3px;
 }

 .container_parametros_oculto {
   position: relative;
   left: 40px;
   width: 300px;
   height: 0px;
   background-color: rgb(224,219,201);
   border: none;
   font-family: Verdana;
   font-size: 10px;
   font-style: normal;
   font-weight: normal;
   color: black;
   visibility: hidden;
 }

 .container_parametros_visivel {
   position: relative;
   left: 40px;
   width: 300px;
   height: 200px;
   background-color: rgb(224,219,201);
   border: 1px solid black;
   font-family: Verdana;
   font-size: 11px;
   font-style: normal;
   font-weight: normal;
   color: black;
   visibility: visible;
 }

 </style>

 <script type="text/javascript">

 var qtde_tipos_relatorios = 3;

 function exibe_parametros(tipo)
 {
     if (document.getElementById('parametros_relatorio_' + tipo).className == 'container_parametros_visivel')
     {
         document.getElementById('parametros_relatorio_' + tipo).className = 'container_parametros_oculto';
     }
     else
     {
         for (var cont = 1; cont <= qtde_tipos_relatorios; cont++)
         {
             document.getElementById('parametros_relatorio_' + cont).className = (cont == tipo ? 'container_parametros_visivel' : 'container_parametros_oculto');
         }
     }
 }

 function gera_relatorio(tipo)
 {
 }

 </script>
</head>
<body>

Protótipo 5 - versão 1
<br>
<br>
<br>
&raquo; Relatórios disponíveis:
<br>
<br>

<form>

 <input type="button" value="Turma" class="botao_link" onclick="exibe_parametros(1);">
 <br>
 <br>
 <div id="parametros_relatorio_1" class="container_parametros_oculto">
  <p style="position: absolute; top: 0px; left: 10px;">Turma:</p>
  <select name="turma_1" style="position: absolute; top: 30px; left: 10px; width: 270px;">
   <option>Turma 1</option>
   <option>Turma 2</option>
  </select>
  <input type="button" value="Gera relatório" class="botao_link" onclick="gera_relatorio(1);"
         style="top: 150px; left: 50px;">
 </div>
 <br>
 <input type="button" value="Aluno" class="botao_link" onclick="exibe_parametros(2);">
 <br>
 <br>
 <div id="parametros_relatorio_2" class="container_parametros_oculto">
  <p style="position: absolute; top: 0px; left: 10px;">Turma:</p>
  <select name="turma_2" style="position: absolute; top: 30px; left: 10px; width: 270px;">
   <option>Turma 1</option>
   <option>Turma 2</option>
  </select>
  <p style="position: absolute; top: 60px; left: 10px;">Aluno:</p>
  <select name="aluno_2" style="position: absolute; top: 90px; left: 10px; width: 270px;">
   <option>Aluno 1</option>
   <option>Aluno 2</option>
  </select>
  <input type="button" value="Gera relatório" class="botao_link" onclick="gera_relatorio(2);"
         style="top: 150px; left: 50px;">
 </div>
 <br>
 <input type="button" value="Mês" class="botao_link" onclick="exibe_parametros(3);">
 <br>
 <br>
 <div id="parametros_relatorio_3" class="container_parametros_oculto">
  <p style="position: absolute; top: 0px; left: 10px;">Turma:</p>
  <select name="turma_3" style="position: absolute; top: 30px; left: 10px; width: 270px;">
   <option>Turma 1</option>
   <option>Turma 2</option>
  </select>
  <p style="position: absolute; top: 60px; left: 10px;">Mês:</p>
  <select name="aluno_3" style="position: absolute; top: 90px; left: 10px; width: 270px;">
   <option>2007 - 04</option>
   <option>2007 - 03</option>
   <option>2007 - 02</option>
  </select>
  <input type="button" value="Gera relatório" class="botao_link" onclick="gera_relatorio(3);"
         style="top: 150px; left: 50px;">
 </div>

</form>

</body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0

Obrigado Allan e CSML por terem respondido!

Allan, ele faz o loop do título normalmente somente do texto que ele repete sempre o texto da primeira piada. Dá a impressão que ele grava na memória o texto da primeira e sempre quando eu chamo a div ele está na memoria prontinho para apresentar ao invés de chamar o texto pertencente ao título.

CSML, seu script é show heim! O problema é eu não sei onde colocar os "echos" devido ao meu pouco conhecimento em php, pois estou aprendendo na marra essa linguagem... Quanto ao seu script acontece a mesma coisa quando tentei adaptar, ele coloca os títulos normalmente e faz o loop mas o texto das piadas repete sempre o texto da primeira.

Quando eu uso somente o php ele vai belezinha...

//desse jeito ele vai que é uma beleza

while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
echo "$id";
echo "<br>";
echo $texto";
echo "<br>";
echo "<hr>";
}

?>
Bom, procurando na net encontrei um site que tem exatamente o que eu quero. vejam esse link Tem uma lista de itens e as descrições deles estão escondidas na div. a página: (deixei só um item pra analizar o funcionamento) index.html
<LINK title=Default href="default.css" type=text/css rel=stylesheet></LINK>

<script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>
<td> 
  <div align="center"> 
    <table align="center" class=view style="WIDTH: 580">
      <tbody>
        <tr class=cell2 onMouseOver="this.className='tRow'" 
        onMouseOut="this.className='cell2'"> 
          <td 
          style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center"> 
            <div align="left"><a href="java script:expand('730');">1carat Diamond</a></div></td>
        <tr class=detailedHidden id=info730> 
          <td colspan=11 class=detailed> <table class=detailed>
              <tbody>
                <tr> 
                  <td height="81"></td>
                </tr>
              </tbody>
            </table></td>
        </tr>
      </tbody>
    </table>    
  </div>
folha de estilo: default.css
.cell2 {
    BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #c0c0c0 1px solid; FONT-FAMILY: Arial; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #e8ecef
}
.tRow {
    BORDER-RIGHT: #f48624 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #f48624 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #f48624 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #f48624 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffe1c8
}
TABLE.view {
    BORDER-RIGHT: #8fb3e4 1px solid; BORDER-TOP: #8fb3e4 1px solid; BORDER-LEFT: #8fb3e4 1px solid; WIDTH: 100%; BORDER-BOTTOM: #8fb3e4 1px solid
}
TABLE.view TD.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailedHidden {
    PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed {
    BACKGROUND: white; WIDTH: 100%
}
TABLE.view TR TD.detailed TABLE.detailed TD.left {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 120px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE.view TR TD.detailed TABLE.detailed TD.right {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.left {
    BORDER-RIGHT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.right {
    BORDER-LEFT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.desc {
    BORDER-TOP: #bbbbbb 1px solid; WIDTH: 100%; TEXT-ALIGN: left
}

Se alguém puder me ajudar colocar meu código php nisso...

Editado por juliano.ma
Link para o comentário
Compartilhar em outros sites

  • 0

Link legal mesmo.

Então, eu tentei assim, mas ainda está repetindo o texo da primeira.

<LINK title=Default href="default.css" type=text/css rel=stylesheet></LINK>

<script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>
<p> 
  <?php
$conexao = mysql_connect("localhost","user","senha");
$db = mysql_select_db("banco");
$sql = "SELECT * FROM piadas ORDER BY id ASC";
$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");
while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
?>
<div align="center"> 
  
  <table align="center" class=view style="WIDTH: 580">
  
          <tbody>
            <tr class=cell2 onMouseOver="this.className='tRow'" 
        onMouseOut="this.className='cell2'"> 
              <td 
          style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center"> 
                <div align="left"> <? echo "$id"; ?> - <a href="java script:expand('id');"><? echo "$titulo"; ?></a></div></td>
            <tr class=detailedHidden id=infoid> 
              <td colspan=11 class=detailed> <table class=detailed>
            <tbody>
                    <tr> 
                      
                <td><? echo "$texto"; ?></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table>

  
</div>
<div align="center"> 
  
</div>
<?
}
?>

essa linha é assim mesmo?

<tr class=detailedHidden id=infoid>

não teria que ser o id=""info"+id" conforme está no javascript?

outra coisa, na linha:

java script:expand('id')

não teria que ser java script:expand(id) sem os ' ?

Dá uma força aí amigos!

Abraços!

Link para o comentário
Compartilhar em outros sites

  • 0

Cara...peguei esse ultimo código que você postou e modifiquei pra você...agora pode ter ctz...funciona mesmo!!!

segue:

<LINK title=Default href="default.css" type=text/css rel=stylesheet></LINK>

<script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>
<p>
  <?php
$conexao = mysql_connect("localhost","root","root");
$db = mysql_select_db("banco");
$sql = "SELECT * FROM piadas ORDER BY id ASC";
$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");
while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
?>
<div align="center">
  
  <table align="center" class=view style="WIDTH: 580">
  
          <tbody>
            <tr class=cell2 onMouseOver="this.className='tRow'"
        onMouseOut="this.className='cell2'">
              <td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center">
                <div align="left"> <? echo "$id"; ?> - <a href="java script:expand('<? echo "$id"; ?>');"><? echo "$titulo"; ?></a></div></td>
            <tr class=detailedHidden id=info<? echo "$id"; ?>>
              <td colspan=11 class=detailed> <table class=detailed>
            <tbody>
                    <tr>
                      
                    <td><? echo "$texto"; ?></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table>

  
</div>
<div align="center">
  
</div>
<?
}
?>

note as alterações:

imprime a variavel id do texto na função "expand" e no id da <tr> e ainda onde chama a função js, o javascript deve ser junto...

testa ae...qqer coisa é só falar!!!

flow!

abraços!

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,4k
×
×
  • Criar Novo...