[Resolvido] div2 assumir posição de div1

aluizs · Dezembro 3, 2007

ola,

tenho 2 divs não aninhados, e estou usando o método visibily e hidden, para ocultar algumas informações, e gostaria de quando ocultar o div1 e exibir o div2, o div2 assuma a posição do div1.

mais uma coisa, dando uma olhada no exemplo abaixo, eu tenho os divs 3 e 4 que deverão fazer a mesma coisa que os divs 1 e 2, mas quero que quando eu abra o div2 o div3 desça o suficiente para ser sobreposto, e quando eu fechar o div2 ele volte a posição ocupando o espaço deixado pelo div2.

Obrigado

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

estou usando o seguinte código para teste.

<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Data e Hora</title>
<style type=text/css>
.horax {
  background: #000000;
  border: 1px solid #FFF;
  padding: 0; 
  margin: 0 auto;
  position: relative;
  float: left;
 
  }
 
 .TABLEX {
   background: #00FF00;
   WIDTH: 100%;

  } 
</style>

</head>
<script type="text/javascript">
function togglecategory(div1, div2, add)
{
   if (add == 'x')
   {
	  document.getElementById(div1).style.visibility = 'hidden';
	  document.getElementById(div2).style.visibility = 'visible';
	  document.getElementById(div2).style.display = ''
   }
   else
   {
	  document.getElementById(div1).style.visibility = 'visible';
	  document.getElementById(div2).style.visibility = 'hidden';
   }
}
</script>
<body>
<p> </p>
<p> </p>
<div align="center">
<table class="princ" border="0" width="100%" id="table1" >
	<tr>
		<td class="esquerda" width="55%" align="left" valign="top">
		<div class="horax" style="Display:show" id="hora">
		  <div align="center">
			<table  class="TABLEX" border="1" width="100%">
			 <tr>
			   <td width="431">Data e Hora</td>
			   <td><a href="#" onmousedown=togglecategory("hora","hora1","x")>FECHAR </a></td>
			 </tr>
			</table>
		  </div>
		</div>
		<div class="horax"  style="Display:none" id="hora1"> 
		   <div class="tablex" >
			<table border="1" width="100%">
		<tr>
			<td width="431">Data e Hora</td>
			<td><a href="#" onmousedown=togglecategory("hora","hora1","Y")>FECHAR</a></td>
		</tr>
		</table>
		   </div>
		   <table border="1" width="100%" bordercolor="#FFFFFF">
		<tr>
			<td bgcolor="#FFFFFF">teste</td>
		</tr>
		<tr>
			<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
		</tr>
		<tr>
			<td bgcolor="#FFFFFF">final</td>
		</tr>
		</table>
		</div>
		
		<div class="horax" style="Display:show" id="hora2">
		  <div align="center">
			<table  class="TABLEX" border="1" width="100%">
			 <tr>
			   <td width="431">Data</td>
			   <td><a href="#" onmousedown=togglecategory("hora2","hora3","x")>FECHAR </a></td>
			 </tr>
			</table>
		  </div>
		</div>
		<div class="horax"  style="Display:none" id="hora3"> 
		   <div class="tablex" >
			<table border="1" width="100%">
		<tr>
			<td width="431">Hora</td>
			<td><a href="#" onmousedown=togglecategory("hora2","hora3","Y")>FECHAR</a></td>
		</tr>
		</table>
		   </div>
		   <table border="1" width="100%" bordercolor="#FFFFFF">
		<tr>
			<td bgcolor="#FFFFFF">teste</td>
		</tr>
		<tr>
			<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
		</tr>
		<tr>
			<td bgcolor="#FFFFFF">final</td>
		</tr>
		</table>
		</div></td>
		<td width="86" align="left" valign="top">
		meio<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </p>
		<p> </td>
		<td class="direita" align="left" valign="top" width="39%">
		 <div class="horax" style="Display:show" id="data">
		   <div align="center">
			<table  class="TABLEX" border="1" width="100%">
			 <tr>
			   <td width="431">Data e Hora</td>
			   <td><a href="#" onmousedown=togglecategory("data","data1","x")>FECHAR </a></td>
			 </tr>
			</table>
		  </div>
		</div>
		<div class="horax"  style="Display:none" id="data1"> 
		   <div class="tablex" >
			<table border="1" width="100%">
		<tr>
			<td width="431">Data e Hora</td>
			<td><a href="#" onmousedown=togglecategory("data","data1","Y")>FECHAR</a></td>
		</tr>
		</table>
		   </div>
		   <table border="1" width="100%" bordercolor="#FFFFFF">
		<tr>
			<td bgcolor="#FFFFFF">teste</td>
		</tr>
		<tr>
			<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
		</tr>
		<tr>
			<td bgcolor="#FFFFFF">final</td>
		</tr>
		</table>
		</div>
	 </td>
	</tr>
</table>

</div>

<p> </p>
<p> </p>
<p>O <ACRONYM TITLE="Dynamic HyperText Markup Language">DHTML</ACRONYM> é a principal linguagem dos webmaster para criar websites. </p>

</body>

</html>

Luizgrs · Dezembro 3, 2007

Ao invés de utilizar a propriedade visibility tente a propriedade CSS display.

Com os valores 'none' para desaparecer e 'block' ou '' (vazio, de acordo com as configurações herdadas da div) para aparecer.

Talvez isso já dê o efeito que você queira.

aluizs · Dezembro 3, 2007

Obrigado pela ajuda,

resolveu os dois problemas que eu estava tendo

Giovani · Dezembro 3, 2007

Que bom que o problema foi resolvido. http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Entrar

Arquivado

[Resolvido] div2 assumir posição de div1

Recommended Posts

aluizs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Luizgrs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

aluizs 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante