Alargar div poco a poco

Usa_Firefox · #1 (**permalink**) 18/04/2009, 08:20

Hola!

Acaba de crear un script para alargar un div (no lo he copiado de internet ni nada)

El caso es que no ocurre nada al pulsar el enlace de alargar...

Código javascript:

Ver original<script language="javascript">
function alargar(){
var width;
width=100;
var largodiv=document.getElementById("desplegablex").innerHTML;
 
while(width<500){
width++;
largodiv='<div id="desplegable" style="width:' + width + 'px;">Acortar (Nodisponibletodavia)</div>';
}
}
</script>
</head>
 
<body>
<div class="desplegablex"><div id="desplegable" style="width:100px;"><a onclick="alargar()">Alargar</a></div></div>

En él quiero conseguir que un div se despegue, pero poco a poco...

Saludos

Usa_Firefox · #2 (**permalink**) 18/04/2009, 09:49

+ info:

Creo que la info de antes se queda corta... por ello pongo claramente lo que necesito:

Hacer que un div se vaya agrandando, pero no que se redimensione directamente a un ancho de 500px, sino que se vaya desplegando de derecha a izquierda, es decir, que su redimensionamiento dure un segundo y pico aprox... como el lightbox..

Usa_Firefox · #3 (**permalink**) 20/04/2009, 13:23

Da igual.. he leído que no es posible con javascript... es con ajax y eso... PEro gracias de todos modos

Panino5001 · #4 (**permalink**) 20/04/2009, 14:29

En realidad sí se hace con javascript. Sólo que hay algunos conceptos equivocados, por ejemplo, estás usando, en lugar del valor de un atributo id, el valor de un atributo class como argumento de document.getElementById. Y hay que usar temporizadores para hcer lo que necesitás.
Si no te lo tomás a mal, te paso unos enlaces para que leas en el orden en que te los paso:
http://www.disegnocentell.com.ar/cur...s/basicos.html
http://www.disegnocentell.com.ar/cur...cosVarios.html
http://www.disegnocentell.com.ar/cur...rmularios.html
http://www.disegnocentell.com.ar/cur...rizadores.html
http://www.disegnocentell.com.ar/notas2.php?id=239

jeybi · #5 (**permalink**) 20/04/2009, 14:33

No tiene nada que ver ajax, lo que pasa es que el while se ejecuta en mucho menos de un segundo, lo que debes hacer es usar setInterval(tufuncion, cada_x_tiempo), cada_x_tiempo puede ser por ejemplo 10 (expresado en milisegundos), este codigo hara que tu funcion se ejecute cada 10 milisegundos una y otra vez, la funcion debe encoger entonces el div en 1 o 2 px, para parar el intervalo tendrias que hacer algo asi:

var miintervalo = setInterval(tufuncion, cada_x_tiempo);

tufunfion(){
......
if(width == elwidthfinal)
clearInterval(miintervalo); //Se deja de ejecutar setinterval
}

alor86 · #6 (**permalink**) 20/04/2009, 16:27

exactamente no tiene que ver con ajax. Para hacer el efecto que quieres tienes que usar intervalos te pongo el codigo de como lo deberia hacer espero y te sirva.

<html>

<head>
<script type="text/javaSCript">
var width=100;
var inter;
function ampliar(){
inter = setInterval(amplia,5);
}
function amplia(){
if(width<=500){
width+=10;
document.getElementById('x').style.width=width+'px ';
}
else{
clearInterval(inter);
}
}
</script>
</head>

<body>
<a href="javascript:ampliar()">ampliar</a>
<div id="x" style="width:100px;height:100px;border:solid 1px black">
</div>
</body>
</html>

Usa_Firefox · #7 (**permalink**) 26/04/2009, 13:34

Muchas gracias!!

Ya daba el tema por perdido, pero he revisado mis temas y vi todas esas respuestas.

Muchas gracias.

Me quedo con el ejemplo e investigaré todo para poder hacerlo yo solo, que es lo que interesa.

Edito:

He hecho un código que lo abre y una vez abierto muestra la opción cerrar... Gracias a vuestra ayuda he aprendido algo más

Código javascript:

Ver original<html>
 
<head>
<script type="text/javaSCript">
var width=100;
var inter;
function ampliar(){
inter = setInterval(amplia,5);
}
function amplia(){
if(width<=500){
width+=10;
document.getElementById('x').style.width=width+'px';
}
else{
clearInterval(inter);
document.getElementById('link').innerHTML='<a href="javascript:cerrar()">Cerrar</a>';
}
}
 
//Cerrar
function cerrar(){
intercierra = setInterval(cierra,5);
}
function cierra(){
if(width>=100){
width-=10;
document.getElementById('x').style.width=width+'px';
}
else{
clearInterval(intercierra);
document.getElementById('link').innerHTML='<a href="javascript:ampliar()">Ampliar</a>';
}
}
</script>
</head>
 
<body>
<div id="link">
<a href="javascript:ampliar()">Ampliar</a>
</div>
<div id="x" style="width:100px;height:100px;border:solid 1px black">
</div>
</body>
</html>

Edito 2: (Jaja)

Ya que pregunté, quiero dejar algo más..

Si añadimos esta línea:

document.getElementById('x').style.height=width+'p x';

debajo de document.getElementById('x').style.width=width+'px ';

...se nos ampliará de manera diagonal, es decir, también crecerá el alto... (Ten en cuenta agregar esta línea en las dos funciones, amplia y cierra, para que también se efectúe al cerrar)