Foros del web, para los que viven de bits

ceaped · 03-abr-2008, 12:40

Buenas tardes.

Deseo hacer este ejemplo:
http://demos.mootools.net/Fx.Styles

Hago esto. Pego este código en el html entre el <head></head>

Cita:

Entre las etiquetas <body></body> peo esto:

Cita:

<h3>The always requested hover transition</h3>
<ul id="idList">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>

</ul>

Y hago un estilo css llamado "style.css".

Que lo pongo en el html asi:

<link href="style.css" rel="stylesheet" type="text/css" />

Cita:

#idList {
margin: 0;
padding: 0;
}

#idList li {
display: block;
margin: 0;
padding: 4px;
width: 120px;
background: #333;
color: #888;
}

Entre el <head></head> este otro código para llamar a la herramienta:

Cita:

Pero no me funciona. Que estoy haciendo mal o que me falta agregarle?.
Gracias por su ayuda

cleek · 03-abr-2008, 15:31

el primer código javascript esta entre los tags de script?

y entre el ondomready?

Código:

<script type="text/javascript"><!--
window.addEvent('domready', function(){

var list = $$('#idList li');
list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
color: '#ff8'
});
});

element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});

});

};

--></script>

Saludos

ceaped · 03-abr-2008, 15:38

Hola cleek, gracias por ayudarme. Te paso como está todo:

Cita:

<!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>xxx</title>

<script type="text/javascript" src="mootools.js"></script>

<script type="text/javascript">
var list = $$('#idList li');
list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
color: '#ff8'
});
});

element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});

});
</script>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
<h3>The always requested hover transition</h3>
<ul id="idList">
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>option 5</li>
<li>option 6</li>
<li>option 7</li>
<li>option 8</li>
<li>option 9</li>

</ul>
</div>

</body>
</html>

ceaped · 03-abr-2008, 18:46

eee que cosa esto he tratado por todos los medios y no logro saber porque no me funciona....

ceaped · 04-abr-2008, 06:40

AAA que descanso problema solucionado.
Lo hice de este tutorial:

http://edenahp.net/tutorial-mootools-1/

Espero que les sirva.

Saludos

03-abr-2008, 12:40	#1 (permalink)
ceaped Fecha de Ingreso: febrero-2004 Mensajes: 1.045	Utilizar mootools Fx.Styles Buenas tardes. Deseo hacer este ejemplo: http://demos.mootools.net/Fx.Styles Hago esto. Pego este código en el html entre el <head></head> Cita: var list = $$('#idList li'); list.each(function(element) { var fx = new Fx.Styles(element, {duration:200, wait:false}); element.addEvent('mouseenter', function(){ fx.start({ 'margin-left': 5, 'background-color': '#666', color: '#ff8' }); }); element.addEvent('mouseleave', function(){ fx.start({ 'margin-left': 0, 'background-color': '#333', 'color': '#888' }); }); }); Entre las etiquetas <body></body> peo esto: Cita: <h3>The always requested hover transition</h3> <ul id="idList"> <li>option 1</li> <li>option 2</li> <li>option 3</li> </ul> Y hago un estilo css llamado "style.css". Que lo pongo en el html asi: <link href="style.css" rel="stylesheet" type="text/css" /> Cita: #idList { margin: 0; padding: 0; } #idList li { display: block; margin: 0; padding: 4px; width: 120px; background: #333; color: #888; } Entre el <head></head> este otro código para llamar a la herramienta: Cita: <script type="text/javascript" src="mootools.js"></script> Pero no me funciona. Que estoy haciendo mal o que me falta agregarle?. Gracias por su ayuda __________________ Diseñador Gráfico y Publicitario Última edición por ceaped; 03-abr-2008 a las 12:45. Razón: cambiar código

03-abr-2008, 15:38	#3 (permalink)
ceaped Fecha de Ingreso: febrero-2004 Mensajes: 1.045	Re: Utilizar mootools Fx.Styles Hola cleek, gracias por ayudarme. Te paso como está todo: Cita: <!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>xxx</title> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> var list = $$('#idList li'); list.each(function(element) { var fx = new Fx.Styles(element, {duration:200, wait:false}); element.addEvent('mouseenter', function(){ fx.start({ 'margin-left': 5, 'background-color': '#666', color: '#ff8' }); }); element.addEvent('mouseleave', function(){ fx.start({ 'margin-left': 0, 'background-color': '#333', 'color': '#888' }); }); }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <h3>The always requested hover transition</h3> <ul id="idList"> <li>option 1</li> <li>option 2</li> <li>option 3</li> <li>option 4</li> <li>option 5</li> <li>option 6</li> <li>option 7</li> <li>option 8</li> <li>option 9</li> </ul> </div> </body> </html> __________________ Diseñador Gráfico y Publicitario

03-abr-2008, 18:46	#4 (permalink)
ceaped Fecha de Ingreso: febrero-2004 Mensajes: 1.045	Re: Utilizar mootools Fx.Styles eee que cosa esto he tratado por todos los medios y no logro saber porque no me funciona.... __________________ Diseñador Gráfico y Publicitario

04-abr-2008, 06:40	#5 (permalink)
ceaped Fecha de Ingreso: febrero-2004 Mensajes: 1.045	Re: Utilizar mootools Fx.Styles AAA que descanso problema solucionado. Lo hice de este tutorial: http://edenahp.net/tutorial-mootools-1/ Espero que les sirva. Saludos __________________ Diseñador Gráfico y Publicitario

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado