Coordinacion entre funciones

pelusete · #1 (**permalink**) 04/07/2008, 18:50

Hola amigos....alguno de uds me podria ayudar a configurar bien este code, de manera que cuando haga click en el div , éste "aumente" de largo y cuando saque el raton del div, éste "disminuya" su largo?

He tratado varios dias ya, pero no logro tratar de sincronizar las funciones... :S

Cita:

<html>
<head>

<style>
body { background: #777; }
#cont { width: 200px; height: auto; background: #333; padding: 10px; }
#med { width: 200px; height: 20px; background: #069; }
#otro { width: 200px; height: 20px; background: #069; color: white; }
</style>

<script language="javascript">

var w = 0;
var largo = 0;

function atras(elId, xi, xf)
{
var obj = document.getElementById(elId);

if( largo <= xi ) obj.style.width = xi;
else
{
w = w - 15;
obj.style.width = xi + w +"px";
largo = parseInt(obj.style.width);
obj.innerHTML = "Ava Width (" + largo +")";
setTimeout("adelante('"+elId+"', "+xi+", "+xf+")",1000);
}

}

function adelante(elId, xi, xf)
{
var obj = document.getElementById(elId);

if( largo >= xf ) obj.style.width = xf;
else
{
w = w + 15;
obj.style.width = xi + w +"px";
largo = parseInt(obj.style.width);
obj.innerHTML = "Ava Width (" + largo +")";
setTimeout("adelante('"+elId+"', "+xi+", "+xf+")",1000);
}
}

</script>
</HEAD>

<BODY>

<div id=cont>
<div id="otro" onclick="adelante('otro', 200, 250);" onmouseout="atras('otro', 200, 250);">otro</div>
</div>

</BODY>
</html>

chalchis · #2 (**permalink**) 04/07/2008, 22:44

pues yo creo que seria algo asi

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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript">
function normal(ancho,alto)
{
	document.getElementById('contenedor').style.width = ancho+"px";
	document.getElementById('contenedor').style.height = alto+"px";
}

function ampliar(ancho,alto)
{
	document.getElementById('contenedor').style.width = ancho+"px";
	document.getElementById('contenedor').style.height = alto+"px";
}
</script>
</head>

<body>
<div id="contenedor" style="width:200px; height:200px; background-color:#00FF00;" onclick="ampliar('400','400')" onmouseout="normal('200','200')">
<table width="100%" border="1" bgcolor="#0033FF">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</div>
</body>
</html>

saludos

killerangel · #3 (**permalink**) 04/07/2008, 23:09

Hola pelusete:

$("#midiv").animate({"width":"+=180"}, "slow"); (agrandar el div)

$("#midiv").animate({"width":"-=180"}, "slow");(regresar a su tamaño)

.....si colocas esto en tu 'code' js veras q tendras lo que deseas y con una bonita animacion...

CLARO!! debes usar jquery... podrías combinar con 'togle'....

NO ENTIENDES LO Q DIGO??..... PERFECTO!!

por q solo trato de darte una idea de lo facil q se te hace programar usando frameworks asi q te invito a averiguar sobre ello y veras q las cosas q deseas son mas faciles de lo q te imaginas...

googlea 'frameworks'... o mi favorito.... 'jquery'... y VOILA!!... espero haberte animado!!

salu2.

pelusete · #4 (**permalink**) 04/07/2008, 23:59

Gracias amigos por sus respuestas....pero io prefiero 100% a crearme y entender los codes por mi cuenta!, es decir no me gusta andar copy-paste por toda la net buscando lo ke necesito...sino mas bien me encanta programar mis propios codes y asi entenderlos a la perfeccion....

En todo caso, igual vere sus sugerencias ^^
Muchas Gracias!!

killerangel · #5 (**permalink**) 05/07/2008, 12:29

Hola pelusete:

Tu comentario me hace recordar a cundo empece con js... de hecho te doy la razon, pero veras que con el avance del tiempo tendras la necesidad de usar frameworks, al menos para mi lo es, ya que no podemos andar por ahi INVENTANDO LA RUEDA nuevamente.

Por lo demas te comento q crear funciones q realicen acciones mas complejas (por ejemplo el manejo de efectos en capas), requerira de tener conocimientos de js, css, DOM y mas aún el manejo de tus funciones para que sean aceptados por diversos navegadores.

Ciertamente es mas asequible para muchos programadores crease sus funciones propias o hacer, incluso, sus propias librías como maborak ( Hola...

), pero si lo q te hace falta es tiempo puedes usar codigos ya escritos q te facilitan la labor.

A fin de cuentas, reza el refran: sobre gustos y colores....

salu2