Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problemas con Mootools y Joomla 1.5

Estas en el tema de Problemas con Mootools y Joomla 1.5 en el foro de Frameworks JS en Foros del Web. En primer lugar, pedir perdón por estar solicitando ayuda sobre una versión anterior de mootools, pero hasta que Joomla no se actualice a la versión ...
  #1 (permalink)  
Antiguo 24/02/2010, 16:59
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Problemas con Mootools y Joomla 1.5

En primer lugar, pedir perdón por estar solicitando ayuda sobre una versión anterior de mootools, pero hasta que Joomla no se actualice a la versión 1.6, todo el CMS corre con Mootools 1.11.

Estoy teniendo problemas a la hora de ejecutar un script extraído de una de las demos de la página oficial de mootools, aunque es bastante lógico porque no tengo mucha idea de mootools, y soy bastante nuevo en el tema frameworks. El script es este:

Código:
window.addEvent('domready', function() 
{
	var mySlide = new Fx.Slide('test');
		/*mySlide.hide();*/
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
		});
});
Código:
#test {
	background: #222;
	color: #fff;
	padding: 10px;
	margin: 20px;
	border: 10px solid pink;
}
Código:
<a id="toggle" href="#">Click</a>

<div id="test" class="test">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
1) El primer problema que tengo es que, lo que busco es que el div al cargarse la página este oculto y solo se abra cuando el usuario haga click en el enlace. En principio con activar la función hide() estaría resuelto, pero el problema es que cuando lo hago, lo contenido dentro del div desaparece totalmente, sin embargo el div si realiza el movimiento de slide al hacer click en el enlace, raro, no?

2) Y el segundo más que un problema es algo que quiero modificar, y en lo que llevo dando vueltas casi dos días. Ya he probado no menos de 30-40 post, y he revisado todas las demos de la web oficial en busca de luz, pero no doy con la solución.

Lo que busco es poder esconder y mostrar distintos divs, todos ellos con el mismo id="test" y clase="test", pero no doy con ello, estoy desesperado, y hoy casi me pongo a llorar como los niños pequeños de la rabia que me esta dando no dar con la clave.

Se que la cosa podría andar por utilizar algo como esto:

Código:
var togglers = $$('#test');
togglers.each(function(element) {..etc....
y asignar todo el script a cada elemento del array, pero no doy con ello.

Por favor, hay alguna alma caritativa que me pueda ayudar a resolver los dos misterios. El segundo misterio: como asignar el slide a varios divs va camino de convertirse en uno de los misterios de Fátima, he podido leer un montón de post de gente buscando la solución, tanto en inglés como en castellano, y en ninguno de ellos nadie encuentra la respuesta, espero que yo en este foro y en Español, mi idioma, tenga más suerte!!

Muchísimas Gracias por adelantado!

Alberto.
  #2 (permalink)  
Antiguo 24/02/2010, 18:17
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problemas con Mootools y Joomla 1.5

Hola de nuevo:

He encontrado una aproximación a lo que se supone estoy buscando, y lo he adaptado a mi html, sin embargo no me funciona.
He probado a utilizar los ids: .test y .toggle, y he probado a usar también las clases #test y #toggle, pero nada de nada....

Este código fue posteado aquí por MasterPuppet, y se supone que3 funciona pero a mi no:

Código Javascript:
Ver original
  1. window.addEvent('domready', function()
  2. {
  3.     var sliders = $$('.test');
  4.     $$('.toggle').each(function(el, i){
  5.    var fx = new Fx.Slide(sliders[i]);
  6.     el.addEvent('click', function(e){
  7.         e = new Event(e);
  8.                 fx.toggle();
  9.                 e.stop();
  10.     };
  11.     });
  12. });

Alguna idea?
  #3 (permalink)  
Antiguo 24/02/2010, 21:38
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problemas con Mootools y Joomla 1.5

Porque el triple post?

- http://www.forosdelweb.com/f127/prob...-1-5-a-781958/
- http://www.forosdelweb.com/f127/prob...-1-5-a-781957/

Algo asi necesitas?

- http://www.hv-studio.com.ar/mootools/FX/slide.htm
__________________
HV Studio
Diseño y desarrollo web
  #4 (permalink)  
Antiguo 25/02/2010, 16:30
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problemas con Mootools y Joomla 1.5

Hola Jackson, muchas gracias por contestar.

En cuanto a lo del triple post fue causado por alguna incompatibilidad entre mi ordenador (Mac), el navegador (Safari) y el foro. Cada vez que intentaba enviar el mensaje la pantalla se me quedaba totalmente en blanco y no recibía ningún mensaje de confirmación del envío, así que iba hacia atrás en mi navegador y volvía a intentarlo. Lo que no sabía es que si se estaba enviando, y al final fue por triplicado. Por cierto, si tu has sido el responsable de la eliminación de los post fake, Gracias.

Y en cuanto al link que me has posteado funciona perfectamente, aunque no es exactamente lo que estoy buscando.

Lo que busco es que el contenido aparezca (hide) escondido por defecto, y solo aparezca cuando el usuario haga click en el botón o enlace correspondiente.
Esto ya lo se hacer, bueno lo he intentado, haciendo uso del método hide().

1) Pero mi primer problema es que efectivamente hide() esconde el div, pero también hace desaparecer todo el contenido dentro del div, es decir, el div se esconde y aparece al hacer click en el botón, pero aparece y desaparece totalmente vacio sin el texto que hay escrito dentro.

Por otra parte lo que me gustaría utilizar es la función toggle en vez de slide out y slide in, que me obligaría a buscar una ubicación al botón de cierre del div (slideout).

2) Y por último, lo más importante, es que lo que necesito es esconder más de un div, los cuales todos ellos tendrán la misma clase y el mismo id, como puedes ver en el código que he posteado. De momento lo único que he conseguido, y he probado un montón de códigos, es que solo esconda el primero de los div, que por otra parte aparece sin texto dentro por el motivo que te he comentado antes, lo cual es muy raro.

Lo que estoy intentando, bueno ya he conseguido, es eliminar en Virtuemart la necesidad de pasar por el link "detalles del producto" para obtener todos los detalles de un producto dentro de un listado de una categoría con más de un elemento, ahorrando al cliente un click por cada producto que quiera ver más en profundidad.

Ya tengo todos los datos extra que se supone muestra product-details (detalles del producto) al hacer click en en el link, mostrados en el browse page de virtuemart a continuación de los datos básicos, en un div dispuesto a ser escondido.

Solo me falta hacer funcionar el toggle correctamente, y Voilá! Mis clientes me estarán eternamente agradecidos.

Seguiré buscando y probando mañana, y si no doy con la solución, intentaré hacerlo con Jquery, librería de la cual tampoco tengo ni idea, y que me da miedo utilizar por los posibles conflictos que pueda darme con Mootools, aunque ya me he apuntado algunos trucos por ahí acerca del uso de Jquery conflict que se supone evita este tipo de problemas.

En cualquier caso, muchas gracias, y si se te ocurre como hacer lo que estoy buscando te lo agradeceré eternamente.

Un Saludo!!

Última edición por Hermes2009; 25/02/2010 a las 16:35
  #5 (permalink)  
Antiguo 26/02/2010, 11:42
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problemas con Mootools y Joomla 1.5

Hola

¿Algún alma caritativa que sepa como esconder dos divs con el mismo nombre de clase y misma id con MooTools 1.11 y quiera compartir conmigo su sabiduría?

Muchas Gracias!
  #6 (permalink)  
Antiguo 26/02/2010, 12:25
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Problemas con Mootools y Joomla 1.5

Lo siento, hay mucho texto y me resulta dificil encontrar el punto. Por favor sintetizá.

Cita:
Lo que busco es que el contenido aparezca (hide) escondido por defecto, y solo aparezca cuando el usuario haga click en el botón o enlace correspondiente.
Esto ya lo se hacer, bueno lo he intentado, haciendo uso del método hide().

1) Pero mi primer problema es que efectivamente hide() esconde el div, pero también hace desaparecer todo el contenido dentro del div, es decir, el div se esconde y aparece al hacer click en el botón, pero aparece y desaparece totalmente vacio sin el texto que hay escrito dentro.
hide() es como la propiedad css display: none, en cuanto a que es jerarquica. Todo lo que tengas dentro de lo que escondas, va a ser escondido también.
Cita:
2) Y por último, lo más importante, es que lo que necesito es esconder más de un div, los cuales todos ellos tendrán la misma clase y el mismo id, como puedes ver en el código que he posteado. De momento lo único que he conseguido, y he probado un montón de códigos, es que solo esconda el primero de los div, que por otra parte aparece sin texto dentro por el motivo que te he comentado antes, lo cual es muy raro.
Necesitas usar un selector de clases.
No sería $$('#test')
sino $$('.test')

http://www.desarrolloweb.com/articul...ble-dolar.html
  #7 (permalink)  
Antiguo 26/02/2010, 19:52
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problemas con Mootools y Joomla 1.5

A ver, siguiendo tu recomendación he estado probando el siguiente código pero no me funciona, y dice.........

Código HTML:
Ver original
  1. <h3 class="section">Fx.Slide Vertical</h3>
  2.  
  3. <a id="toggle" class="toggle" href="#">toggle</a>
  4.  
  5. <div id="test" class="test">
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  7. </div>
  8.  
  9. <h3 class="section">Fx.Slide Horizontal</h3>
  10.  
  11. <a id="toggle" class="toggle"  href="#">toggle</a>
  12.  
  13. <div id="test" class="test">
  14. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  15. </div>
Código CSS:
Ver original
  1. #test {
  2.     background: #222;
  3.     color: #fff;
  4.     padding: 10px;
  5.     margin: 20px;
  6.     border: 10px solid pink;
  7. }
  8.  
  9. #test2 {
  10.     background: #222;
  11.     color: #fff;
  12.     padding: 10px;
  13.     margin: 20px;
  14.     border: 10px solid pink;
  15. }&#8203;

Código Javascript:
Ver original
  1. window.addEvent('domready', function()
  2. {  
  3.  
  4. var elements_test = $$(".test");
  5. var elements_toggle =  $$(".toggle");
  6.  
  7. for (i=0; i<elementos_test.length; i++){
  8.     var mySlide = new Fx.Slide(elements_test[i]);
  9.     $(elements_toggle[i]).addEvent('click', function(e){
  10.     e = new Event(e);
  11.     mySlide.toggle();
  12.     e.stop();
  13.     });        
  14. }
  15. });

Espero haberte aclarado la duda acerca de lo que estoy buscando.

En cualquier caso, puedes testar el código que he posteado en la siguiente página que supongo conoces, y que es una maravilla, y si no la conoces, da la voz a la comunidad porque es una pasada!

http://jsfiddle.net/dphaA/8/

Gracias por adelantado!
  #8 (permalink)  
Antiguo 27/02/2010, 08:12
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Problemas con Mootools y Joomla 1.5

Lo que veo a simple vista es un error basico de html: tenes los id repetidos! Y tienen que ser unicos. SOlo los atributops className pueden compartirse en varios tags html.

Cita:
<a id="toggle" class="toggle" href="#">toggle</a>

<div id="test" class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<h3 class="section">Fx.Slide Horizontal</h3>

<a id="toggle" class="toggle" href="#">toggle</a>

<div id="test" class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>​
Respecto al resto del codigo, si esto no ayuda, no se que decirte.
  #9 (permalink)  
Antiguo 28/02/2010, 05:21
 
Fecha de Ingreso: abril-2009
Mensajes: 13
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problemas con Mootools y Joomla 1.5

Hola Mayid:

Sobre el tema Ids, me di cuenta en seguida, soy nuevo pero no tanto.
Lo que pasa es que pensé que para que mootools reconociera los ids como un grupo de ids, y en el código se pudiera usar el selector de clases, los divs debían de tener la misma id, con el mismo nombre, de igual manera que tienen la misma clase para poder usar el selector de clases.

Al final la lógica se impuso, y cambié los ids que era lo más lógico y le puso un id único a cada div, ya que se supone que el id es un identificador que identifica (de perogrullo) de manera único a cada elemento dentro del DOM. En fin, que no te voy a descubrir nada que no sepas ya.

Al final creo que el problema es que no se puede usar el selector de clases con Mootools 1.11, pero no estoy seguro, porque como comento en el post no tengo ni idea de Mootools, todavía.....

En Mootools 1.2 lo tengo funcionando a las mil maravillas, eso si, adjuntando además el paquete moreover 1.2.4.4. He conseguido ya varios efectos distintos, como el efecto toggle, se abre y se cierra la ventana al hacer un click en el mismo botón, usando la función slide abrir el div con un botón y cerrar dicho div con otro botón, y mi efecto soñado para mi tienda online, que es ofrecer un div con una pequeña información, y cuando haces click en un botón, dicho div se esconde y aparece otro con toda la información del producto.

En fin...

Lo que pasa es que sospecho que no voy a poder utilizarlo con Joomla, ya que creo que usar la librería 1.2 de manera conjunta con la 1.11 es imposible, así que o bien actualizo todos los scripts de Mootools que esten siendo usados en la tienda a 1.2 o no voy a poder hacer lo que quiero.

Cuando tenga todo funcionando me pasaré por aquí y os postearé los resultados, OK?

En cualquier caso, si hay alguien que sepa como abrir un div y cerrar otro al mismo tiempo en Mootools 1.11 me ahorrará un buen dolor de cabeza buscando cada uno de los scripts que tiene el Joomla y tratar de traducirlos a la nueva versión, considerando que no tengo ni idea de Mootools.

Si hay alguien, Por favor que salga en nuestra ayuda!!

UN Saludo!!
  #10 (permalink)  
Antiguo 28/02/2010, 09:24
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Problemas con Mootools y Joomla 1.5

Si estas usando un plugin escrito para la version 1.2, es muy probable que no funciona con mootools 1.1 . Eso pasa en otras librerías también. Y es porque las cosas cambian.

Etiquetas: mootools, slide, toggle
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:16.