Discussion :

[Vieillefee]

Bonjour,

Je construis (ou du moins j'essaie !) un site avec le CMS Joomla, et j'ai ajouté sur ce site le module Yoodrawer, visible ici

Comme vous pouvez le voir sur la démo en default style, quand on ouvre un item en passant dessus avec la souris, l'item reste ouvert une fois qu'on dirige la souris ailleurs.
J'aimerais énormément pouvoir trouver la modif à faire pour que l'item que l'on a ouvert en passant dessus se referme automatiquement une fois que le pointeur de la souris s'en va, et que le module revienne donc avec le premier item visible.
J'ai trouvé un fichier .js au sein de ce module, mais là je coince. J'ai vu qu'il y avait une fonction de transition mootools et une fonction mouseenter. Après avoir regardé un peu partout, j'en conclus qu'il faudrait que je rajoute la fonction "mouseleave" pour que les items se referment après le départ de la souris, mais je ne sais pas du tout comment faire.
Je m'y connais un peu en css mais en javascript ...
Voici le code .js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var YOOdrawer = new Class({
 
	initialize: function(wrapper, items, options) {	
		this.setOptions({
			layout: 'vertical',
			itemstyle: 'top',
			shiftSize: 50,
			transition: Fx.Transitions.Expo.easeOut
		}, options);
 
		this.wrapper = $(wrapper);
		this.items = $$(items);
		this.fx = new Fx.Elements(this.items, {wait: false, duration: 600, transition: this.options.transition }); 
 
		if (this.options.layout != 'vertical') this.options.itemstyle = 'left';
 
		var pos = {};
		this.items.each(function(item, i) {	
			pos[i] = item.getStyle(this.options.itemstyle).toInt();
			item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]));	
		}, this);
	},
 
	itemFx: function(pos, item, i) {
		var o = {};
		item.addClass('active');
		this.items.each(function(other, j) {
			var s = other.getStyle(this.options.itemstyle).toInt();
			if (j >= i) {
				if (s != pos[j]) o[j] = this.itemStyle(s, pos[j]);
			} else {
				if (s != pos[j] - this.options.shiftSize) o[j] = this.itemStyle(s, pos[j] - this.options.shiftSize);
			}
			if (j != i) {
				other.removeClass('active');
			}
		}, this);
		this.fx.start(o);	
	},
 
	itemStyle: function(startVal, endVal) {
		if (this.options.layout == 'vertical') { return {top: [startVal, endVal]}; } else {	return {left: [startVal, endVal]}; }
	}
 
});
 
YOOdrawer.implement(new Options);

Si quelqu'un pouvait m'aider ce serait super

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
with (object){
onmouseover = function(){...};
onmouseout=function(){....}
}

[Vieillefee]

bonjour et merci beaucoup SpaceFrog pour ta réponse.
Heu... dois-je rajouter seulement ça à la suite dans le fichier .js ?
je t'avoue que je ne sais pas quoi faire du code que tu m'as donné

[SpaceFrog]

Non je te donnais juste la methode classique d'ajout dynamique de focntion sur un evènement...


dans ton cas le mousover est attribué ici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]));

j'essaierais d'ajouter à la suite le mouseout:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

item.addEvent('mouseleave', ici fonction de disparition joomla);

[Vieillefee]

ah oui ok merci ! c'est bien ce que je me disais
j'avais déjà essayé de faire ce que tu me conseilles, mais j'ai du me blairer au niveau de la fonction disparition Joomla, car ça ne fonctionnait pas.
Je vais creuser ça.
Merci beaucoup