esta funcion debe desplegararse mas rapido y depende del tiempo pero esta muy lenta

jor_0203 · #1 (**permalink**) 28/10/2011, 03:44

mas rápido según el tiempo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
function mensaje(a){
et=parseInt(document.getElementById(a).style.heigh t);
et++;
document.getElementById(a).innerHTML = et;
document.getElementById(a).style.height=et+"px";

}
</script>

</head>

<body>

<input type="button" id="recoger" value="recoger" onclick=" setInterval(mensaje('capa2'),10 );" /> //esta funcion es para que se desplege rapido
<input type="button" id="recoger" value="recoger" onclick=" setInterval(mensaje('capa3'),10 );" /> /esta funcion es para que se desplege rapido

<div id="capa2" style="width:720px; height:305px; background-color: #CC0000; position:relative;"></div>

<div id="capa3" style="width:720px; height:305px; background-color: #CCFF00; position:relative;"></div>

</body>
</html>

maycolalvarez · #2 (**permalink**) 28/10/2011, 06:55

si quieres que se ejecute más rápido, lo más lógico es asignar menos tiempo en el timeout, claro esto depende también de la capacidad de respuesta del motor js del cliente, eso no lo puedes alterar

jor_0203 · #3 (**permalink**) 28/10/2011, 15:05

Cita:

Iniciado por maycolalvarez

si quieres que se ejecute más rápido, lo más lógico es asignar menos tiempo en el timeout, claro esto depende también de la capacidad de respuesta del motor js del cliente, eso no lo puedes alterar

creo que no hiciste la prueba de mi codigo
copia el código y pruebalo
y veras que lo que dijiste no es la solución
y si estoy de acuerdo vale mas saber poco que mucho y nada
muchas gracias por tu opinión
sin embargo este tipo de preguntas es para gente que le guste programar y sienta
placer al poder entender cualquier código ya que esta interesante

maycolalvarez · #4 (**permalink**) 28/10/2011, 15:16

claro, si dejas el innerHTML activo es normal que sea más lento, además si va de 1 en 1 estás limitado a que se despliegue a esa velocidad, a no ser que uses un función exponencial para aumentarlo.

además tienes errores en la implementación del setInterval

y por cierto, sentir placer por la programación no implica que me ponga a ejecutar cuanto código posteen los participantes, yo también tengo vida y mi propio código con el cual apasionarme, tu opinión está fuera de contexto, saludos.

Franz1628 · #5 (**permalink**) 28/10/2011, 15:23

Amigo creo que tu error es el uso de setInterval
para usar una funcion con parametros deberías usar algo así

onclick=" setInterval(function(){mensaje('capa2')},10 );"

para los dos casos
Saludos

_cronos2 · #6 (**permalink**) 28/10/2011, 15:40

Hay varios "fallos", si lo que buscas es la optimización del código para que sea más rapido:
A) Cada llamada a la función implica calcular el height del elemento, y después setearlo, esto puede afectar mucho la UI por el repaint y reflow
B) Llamas 3 veces a document.getElementById, esta función es más rápida que otras del DOM puesto que la id en principio es única, pero sigue siendo una pédida de tiempo, usa una variable local!
C) Si usas un setInterval deberás establecer en algún punto un clearInterval, o si no el div crecerá sin parar hasta que se cuelgue el navegador.
D) No uses una función lineal en las transiciones!
E) Yo no suelo hacer apología de los frameworks a no ser que domines bien el JS "normal", pero en este caso creo que tienes demasiada tarea y poco conocimiento como para hacerlo por ti mismo, así que puedes usar jQuery, que además funciona en todos los sitios y está optimizado.
Sin embargo, si deseas investigar y hacerlo por ti mismo, te recomiendo altamente que leas el post de @panino5001 sobre las transiciones en JS, muy bien explicado y muy útil.
Espero que todo esto te sirva de ayuda.
Saludos (:

Raziel_Ravenheart · #7 (**permalink**) 28/10/2011, 15:51

Así sería como yo dejaría el código, pero es cierto, para aumentar la velocidad, se depende de lo que le sumes a et, y como te dijo maycolalvarez, si quieres que se aumente la velocidad esa es la única opción, por que incluso le puse como tiempo de demora al setInterval solo cero (0), y seguía igual de lento.

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reto 2</title>
 
<script type="text/javascript">
window.onload = function () {
    document.getElementById("r1").onclick = enviarMensaje;
    document.getElementById("r2").onclick = enviarMensaje;
}
 
function enviarMensaje (evt) {
    if (evt.target.id == "r1") {
        setInterval(mensaje,6, "capa2" );
    } else {
        setInterval(mensaje,6, "capa3");
    }
}
 
function mensaje(a){
    var et = parseInt(document.getElementById(a).style.height);
    et += 3;    
    document.getElementById(a).style.height = et+"px";
}
</script>
</head>
 
<body>
<input type="button" id="r1" value="Recoger" />
<input type="button" id="r2" value="Recoger" />
<div id="capa2" style="width:720px; height:305px; background-color: #CC0000; position:relative;"></div>
<div id="capa3" style="width:720px; height:305px; background-color: #CCFF00; position:relative;"></div>
 
</body>
</html>

Si no estás contento con mi opción, por favor explica más detalladamente que es lo que quieres lograr.

Saludos.

IsaBelM · #8 (**permalink**) 28/10/2011, 16:48

Raziel_Ravenheart, ese código no es válido por diversas razones

evt.target ----> para que funcione en ie y en cualquier otro navegador cámbialo por this.id
setInterval(mensaje,6, "capa2" ) ---> el 3º valor no es aceptado por ie
Cita:
Iniciado por _cronos2
A) Cada llamada a la función implica calcular el height del elemento, y después setearlo, esto puede afectar mucho la UI por el repaint y reflow
Cita:
Iniciado por _cronos2
C) Si usas un setInterval deberás establecer en algún punto un clearInterval, o si no el div crecerá sin parar hasta que se cuelgue el navegador.

Raziel_Ravenheart · #9 (**permalink**) 28/10/2011, 17:13

Gracias Isabel por señalarme esto, y voy a tenerlo en cuenta de ahora en adelante, pero la razón, por la que utilicé event como evt, es que:

1. Yo estoy totalmente consciente que no sirve en Internet Explorer

2. Por algún motivo sigo utilizando event en vez de this, para cualquier cosa, ya que con event accedo a muchas otras cosas que this no tiene, por ejemplo, charCodes, keyCodes, which, y otras propiedades, y por eso me acostumbré a utilizar event.

3. Actualmente estoy desarrollando una página web, y por motivos de comodidad, mi contratante me dijo que no tuviera en cuenta internet explorer, ya que le explique que a veces tendría que hacer las cosas dos o tres veces dependiendo del navegador, y siguiendo el ejemplo de algunos programadores amigos, ya no voy a volver a hacer páginas que soporten Internet Explorer, lo cual no es un traumatismo grande, ya que chrome y firefox se descargan muy rápido.

4. La razón por la que no deseo volver a soportar Internet Explorer, es por que sus desarrolladores, específicamente Microsoft, muy difícilmente se une a la causa de estandares web, basta con solo mirar el código fuente de la página de inicio de hotmail, ya que el layout, está hecho con tablas, y como todos sabemos, para alquien que le importe esto realmente, le hace sangrar lo ojos.. jejejejeje, a mi no, solo me decepcionó más. Y la verdad no soy muy partidario de Microsoft, solo por lo q los juegos corren bienn en windows xp, y situación familiar, pero prefiero linux, para lo demás.

Yo se que muchos no están de acuerdo con esta práctica, pero aún así, ya me he "mal acostumbrado" a utilzar XmlHttpRequest directamente sin acudir a objetos activex-aunque IE ya soporta el elemento directo, sin necesidad de activeX-, y tampoco utilizo el modelo window.event de internet explorer. Pero como te dije, para una futura ocasión, haré caso de los consejos que han dado cronos y tu.

Les dejo un ejemplo de una página donde su desarrollador ya decidió no soportar IE:
Clan 1UP Urban Terror
Tema del foro donde dicen que no van a soportar IE

Y ya hay otras varias...

jor_0203 · #10 (**permalink**) 29/10/2011, 22:31

esta es la solución que yo estoy realizando espero que les guste
todavía no esta terminada pero vean el código y prubenla esta muy buena

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
    background:#FFCC00;
    border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
 
function restar(obj){
 g=parseInt(document.getElementById(obj).style.height);
  document.getElementById("fg").innerHTML = g;
if(g<=50){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); } 
</script>
</head>
    <body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> &nbsp;<a onclick="restar('cuadros')">cuadros uno pregar</a>&nbsp; <a onclick="mover('cuadro')">cuadro dos</a> 
  &nbsp;<a onclick="restar('cuadro')">cuadro dos pregar</a> 
  <div class="contenedor" >    
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px;" onClick="mover('cuadros')">click</div>
    <br />
    <br />
    <br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px;" >click</div>
 </div> 
 <div id="fg"></div>  
    
    </body>
    </html>

jor_0203 · #11 (**permalink**) 30/10/2011, 00:09

esta función solo tiene un problema el div se va haciendo mas chico o más grande pero el contenido no desaparece cuando lo hacemos muy chiquito
hay que ver como borramos el contenido
ojala alguien pueda dar una idea

dleal100 · #12 (**permalink**) 30/10/2011, 02:23

Cita:

Iniciado por jor_0203

esta función solo tiene un problema el div se va haciendo mas chico o más grande pero el contenido no desaparece cuando lo hacemos muy chiquito
hay que ver como borramos el contenido
ojala alguien pueda dar una idea

ESO SE ASE CON CSS ACA TE DEJO TU CODIGO CORREGIDO QUE ELIMINA TAMBIEN EL CONTENIDO CUANDO EL CUADRITO SE ASE PEQUEÑO

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
    background:#FFCC00;
    border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
 
function restar(obj){
 g=parseInt(document.getElementById(obj).style.height);
  document.getElementById("fg").innerHTML = g;
if(g<=0){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); } 
</script>
</head>
    <body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> &nbsp;<a onclick="restar('cuadros')">cuadros uno pregar</a>&nbsp; <a onclick="mover('cuadro')">cuadro dos</a> 
  &nbsp;<a onclick="restar('cuadro')">cuadro dos pregar</a> 
  <div class="contenedor" >    
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
    <br />
    <br />
    <br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
 </div> 
 <div id="fg"></div>  
    
    </body>
    </html>

jor_0203 · #13 (**permalink**) 31/10/2011, 09:08

me mandaron un comentario que le encontraron un error, cuando el cuadro se muestra y le dan otra vez mostrar, vuele a cargarse, como si estuviera escondido y eso esta mal, ya que no debía hacer nada, por que lógicamente se muestra, ojala alguien tenga la solución.
pero ya es la ultima. gracias a todos, ya que todos hemos cooperado

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
    background:#FFCC00;
    border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
 
function restar(obj){
 g=parseInt(document.getElementById(obj).style.height);
  document.getElementById("fg").innerHTML = g;
if(g<=0){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); } 
</script>
</head>
    <body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> &nbsp;<a onclick="restar('cuadros')">cuadros uno pregar</a>&nbsp; <a onclick="mover('cuadro')">cuadro dos</a> 
  &nbsp;<a onclick="restar('cuadro')">cuadro dos pregar</a> 
  <div class="contenedor" >    
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
    <br />
    <br />
    <br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
 </div> 
 <div id="fg"></div>  
    
    </body>
    </html>

Franz1628 · #14 (**permalink**) 31/10/2011, 10:37

a la variable p debes de asignarle el valor de cero en la funcion restar, y agragar un else en la función mover.
Algo así :

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
* * background:#FFCC00;
* * border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=355,t;
function mover(obj){
    if(p>350){
        clearTimeout(t);
        return;
    }
    else{
        p+=5;
        document.getElementById(obj).style.height=p+'px';
        document.getElementById(obj).style.width=p+'px';
        t=setTimeout( function(){ mover(obj) },30 ); 
    }
}
 
function restar(obj){
    g=parseInt(document.getElementById(obj).style.height);
    document.getElementById("fg").innerHTML = g;
    if(g<=0){
        clearTimeout(tt);
        g=0;p=0;
        return;
    }
    g-=5;
    document.getElementById("fg").innerHTML =g;
    document.getElementById(obj).style.height=g+'px';
    document.getElementById(obj).style.width=g+'px';
    tt=setTimeout( function(){ restar(obj) },30 ); 
} 
</script>
</head>
* * <body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> &nbsp;<a onclick="restar('cuadros')">cuadros uno pregar</a>&nbsp; <a onclick="mover('cuadro')">cuadro dos</a> 
* &nbsp;<a onclick="restar('cuadro')">cuadro dos pregar</a> 
* <div class="contenedor" > * *
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
* * <br />
* * <br />
* * <br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
*</div> 
*<div id="fg"></div> *
* * 
* * </body>
* * </html>

Deberías usar variables locales mejor en vez de globales ya que hay un error cuando muestras dos div ocultos uno seguido de otro y tambien cuando ocultas dos uno seguido de otro

Saludos

Franz1628 · #15 (**permalink**) 31/10/2011, 11:01

He ordenado un poco tu código y le he puesto botones en vez de links porque no se notaban, tambien he cambiado algunas variables que las tenias globales a locales.
Algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
* * background:#FFCC00;
* * border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
 
 
function mover(obj){
    var p = parseInt(document.getElementById(obj).style.height);
    if(p>350){
        clearTimeout(t);
        return;
    }
    else{
        p+=5;
        document.getElementById(obj).style.height=p+'px';
        document.getElementById(obj).style.width=p+'px';
        var t=setTimeout( function(){ mover(obj) },30 ); 
    }
}
 
function restar(obj){
    var g=parseInt(document.getElementById(obj).style.height);
    document.getElementById("fg").innerHTML = g;
    if(g<=0){
        clearTimeout(tt);
        g=0;p=0;
        return;
    }
    g-=5;
    document.getElementById("fg").innerHTML =g;
    document.getElementById(obj).style.height=g+'px';
    document.getElementById(obj).style.width=g+'px';
    var tt=setTimeout( function(){ restar(obj) },30 ); 
} 
</script>
</head>
<body>
<input type="button" onclick="mover('cuadros')" value="cuadro uno mosatar"> &nbsp;
<input type="button" onclick="restar('cuadros')" value="cuadros uno pregar">&nbsp;
<input type="button" onclick="mover('cuadro')" value="cuadro dos"> &nbsp;
<input type="button" onclick="restar('cuadro')" value="cuadro dos pregar">
<div class="contenedor">
    <div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
    <div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
</div>
*<div id="fg"></div> *
* * 
</body>
</html>

Todavía hay un error cuando muestras y a la mitad quieres ocultar y viceversa.
Eso lo puedes hacer creo

jor_0203 · #16 (**permalink**) 31/10/2011, 17:26

Cita:

Iniciado por Franz1628

He ordenado un poco tu código y le he puesto botones en vez de links porque no se notaban, tambien he cambiado algunas variables que las tenias globales a locales.
Algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
* * background:#FFCC00;
* * border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
 
 
function mover(obj){
    var p = parseInt(document.getElementById(obj).style.height);
    if(p>350){
        clearTimeout(t);
        return;
    }
    else{
        p+=5;
        document.getElementById(obj).style.height=p+'px';
        document.getElementById(obj).style.width=p+'px';
        var t=setTimeout( function(){ mover(obj) },30 ); 
    }
}
 
function restar(obj){
    var g=parseInt(document.getElementById(obj).style.height);
    document.getElementById("fg").innerHTML = g;
    if(g<=0){
        clearTimeout(tt);
        g=0;p=0;
        return;
    }
    g-=5;
    document.getElementById("fg").innerHTML =g;
    document.getElementById(obj).style.height=g+'px';
    document.getElementById(obj).style.width=g+'px';
    var tt=setTimeout( function(){ restar(obj) },30 ); 
} 
</script>
</head>
<body>
<input type="button" onclick="mover('cuadros')" value="cuadro uno mosatar"> &nbsp;
<input type="button" onclick="restar('cuadros')" value="cuadros uno pregar">&nbsp;
<input type="button" onclick="mover('cuadro')" value="cuadro dos"> &nbsp;
<input type="button" onclick="restar('cuadro')" value="cuadro dos pregar">
<div class="contenedor">
    <div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
    <div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
</div>
*<div id="fg"></div> *
* * 
</body>
</html>

Todavía hay un error cuando muestras y a la mitad quieres ocultar y viceversa.
Eso lo puedes hacer creo

ya lo vi
y si tienes razón
es cuando esta a la mitad
pero esta función esta quedando muy bien
va atener un gran uso
paro todos los de la comunidad
uso de capas dinámicas con movimiento
voy haber como le hago para mejorar el código
mil gracias