Discussion :

[benoitcalvo]

Bonsoir à vous, j'en viens à demander votre aide sur un soucis surement simple mais qui m'échappe.

Je m'explique... j'essaie de faire en sorte à ce que le slide soit horizontal et dont les valeurs soient définies de façon automatique en rapport à l'élément parent. (je sais pas si je suis clair mais je vais tenter)

Voici la démo de Mootools dont je me suis inspiré :

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
 
var szNormal = 117, szSmall  = 100, szFull   = 219;
 
var kwicks = $$("#kwicks .kwick");
var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
kwicks.each(function(kwick, i) {
	kwick.addEvent("mouseenter", function(event) {
		var o = {};
		o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
		kwicks.each(function(other, j) {
			if(i != j) {
				var w = other.getStyle("width").toInt();
				if(w != szSmall) o[j] = {width: [w, szSmall]};
			}
		});
		fx.start(o);
	});
});
 
$("kwicks").addEvent("mouseleave", function(event) {
	var o = {};
	kwicks.each(function(kwick, i) {
		o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
	});
	fx.start(o);
})

J'en suis donc arrivé à ceci :

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
 
window.addEvent('domready',function() {
	var items=$$('.item');
	var fx=new Fx.Elements(items,{wait:true,duration:500});
 
	items.each(function(_item,i) {
		_item.addEvent('click',function(e) {
			var obj={}; obj[i]={'height':[_item.setStyle('height','auto')]};
			items.each(function(other,j) {
				if(other!=_item) {
					var w=other.getStyle('height').toInt();
					if(w!=36)obj[j]={'height':[w,36]};
				}
			});
			fx.start(obj);
		});
	});
	items.addEvent('mouseleave',function(e) {
		var obj={};
		items.each(function(other,j) {
			obj[j]={'height':[other.setStyle('height',36)]};
		});
		fx.start(obj);
	});
});

Avec ma solution, cela s'agrandit comme il faut mais... je perds l'effet Fx.Elements(items,{wait:true,duration:500});

Donc si quelqu'un peut m'aiguiller, je lui en serai très reconnaissant. Merci.

[benoitcalvo]

Bon et bien voilà que j'ai moi même résolu le soucis comme un grand.

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
 
function getElementsByClass(tag,nom){
	var elements = document.getElementsByTagName(tag);
	var results = new Array();
	for(var i=0; i<elements.length; i++){
		if(elements[i].className == nom){
			results[results.length] = elements[i];
		}
	}
	return results;
}
 
window.addEvent('domready',function(){
	var items=$$('.item');
	var fx=new Fx.Elements(items,{wait:false,duration:500,transition:Fx.Transitions.Sine.easeInOut});
	items.each(function(_item,i){
		_item.addEvent('mouseenter',function(e){
			var obj={};
			var _items_ = getElementsByClass("div","item_info_off");
			var height_item = _items_[i].offsetHeight;
			obj[i]={'height':[_item.getStyle('height').toInt(),height_item+65]};
			items.each(function(other,j){
				if(other!=_item){
					var w=other.getStyle('height').toInt();
					if(w!=36)obj[j]={'height':[w,36]};
				}
			});
			fx.start(obj);
		});
	});
	items.addEvent('mouseleave',function(e){
		var obj={};
		items.each(function(other,j){
			obj[j]={'height':[other.getStyle('height').toInt(),36]};
		});
		fx.start(obj);
	});
});