Desplazamiento dentro de div

lucasphp · #1 (**permalink**) 22/09/2009, 05:51

Creo que es la tercera vez que pregunto por esto - xD -, pero ahí va:
¿vieron que algunos sitios usan acordeones en menús? lo que quiero saber es qué propiedad usan para que al reducir el tamaño del div no se borre ni se corra lo que tiene adentro. Gracias

Adler · #2 (**permalink**) 22/09/2009, 06:03

Hola

El valor de div no se elimina a no ser que tu lo elimines. Es decir que aunque no lo veas el div está ahí. Esto es lo que se usa

Cita:

display = "none" ----> oculto
display = "block" ----> visible

Si quieres que ocupe espacio en la página este o no visible, puede usar

Cita:

visibility = "hide" ----> oculto
visibility = "visible" ----> visible

Suerte

lucasphp · #3 (**permalink**) 22/09/2009, 06:18

Cita:

Iniciado por Adler

Hola

El valor de div no se elimina a no ser que tu lo elimines. Es decir que aunque no lo veas el div está ahí. Esto es lo que se usa

Si quieres que ocupe espacio en la página este o no visible, puede usar

Suerte

¿o sea que a medida que se expande va asignando display='block'; a cada div que lo contiene en un determinado momento ?

Adler · #4 (**permalink**) 22/09/2009, 06:32

Hola

Mira aquí te dejo un ejemplo sencillo

Código javascript:

Ver original<html>
<head>
<script type="text/javascript">
function desplegar(que) {
tag = document.getElementById(que);
tag.style.display = (tag.style.display == "none") ? "block" : "none";
}
</script>
</head>
 
<body>
<div onclick="desplegar('tabla1')">Desplegable 1</div>
<table id="tabla1" style="display: none">
<tr><td>elemento1</td></tr>
<tr><td>elemento2</td></tr>
<tr><td>elemento3</td></tr>
<tr><td>elemento4</td></tr>
<tr><td>elemento5</td></tr>
</tr>
</table>
 
 
<div onclick="desplegar('tabla2')" >Desplegable 2</div>
<table id="tabla2" style="display: none;">
<tr><td>elemento1</td></tr>
<tr><td>elemento2</td></tr>
<tr><td>elemento3</td></tr>
<tr><td>elemento4</td></tr>
<tr><td>elemento5</td></tr>
</table>
</body>
</html>

Suerte

lucasphp · #5 (**permalink**) 22/09/2009, 06:46

xD pero yo hablaba de desplegar usando setTimeout, sumando al div principal - o restando según sea el caso -. También vi que suelen usarlo en jquery, creo, para las páginas principales. logran colocar varios elementos adentro, desplazarlos, pararlos,etc; pero no parecen elementos marquee por eso preguntaba
acá está: http://www.dezinerfolio.com/wp-conte...ordemo/01.html Quiero hacer eso, pero no me sale que el texto se mantenga adentro y desaparezca cuando se contrae

Adler · #6 (**permalink**) 22/09/2009, 07:58

Hola

Estaría bien que en próximas consultas lo explicaras mejor, como en tu segundo post

Prueba con esto

Código javascript:

Ver original<html>
<style type="text/css">
.oculto {display:none}
</style>
<script type="text/javascript">
var visto = null;
function ver(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==visto) ? 'none' : 'block';
  if (visto != null)
    visto.style.display = 'none';
  visto = (obj==visto) ? null : obj;
}
 
 
function ver1(num)
{
var t=setTimeout("ver("+num+")",1000) // Tarda 1 segundo en aparecer
}
 
function ver2(num)
{
var id = setInterval("ver("+num+")",1000); // Tarda 1 segundo en aparecer y parpadea durante 15 segundos
setTimeout("clearInterval("+id+")",15000);
}
 
</script>
<head>
</head>
<body>
<p onclick="ver(0)" style="z-index:3;">MENU0</p>
<div id="0" class="oculto" style="z-index:3;">
SubMenu0<br />
SubMenu0<br />
 
SubMenu0
</div>
 
<p onclick="ver(1)" style="z-index:3;">MENU1</p>
<div id="1" class="oculto" style="z-index:3;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
 
 
<p onclick="ver(2)" style="z-index:2;">MENU2</p>
<div id="2" class="oculto" style="z-index:2;">
 
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
 
 
<p onclick="ver(3)" style="z-index:1;">MENU3</p>
<div id="3" class="oculto" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
 
</body>
</html>

Suerte