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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
/**
* METHODE PERMETTANT DE RECUPERER DES OBJETS PAR RAPPORT A SA CLASSE ET/OU UN CONTENEUR ET TYPE DE TAG
* @param {className} Nom de la classe recherchée
* @param {tag} Permet de filtrer par exemple uniquement sur des div ou des li ou autre
* @param {elm} Représente , le parent dans lequel effectuer la recherche ( par défaut le document )
*/
function getElementsByClassName(className, tag, elm){
var testClass = new RegExp("(^|s)" + className + "(s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i ];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
};
/**
* L'obejet de type togle.
* Cet objet comporte 2 méthodes principales :
* - create, permet de créer , et retourner l'objet qui sera affecter par l'effet
* - move, qui permet d'effectuer l'action sur l'objet, ce qui permet d'agir sur l'objet a partir de n'importe quel autre.
* @param {target} définit sur quel objet , on va effectuer la méthode de replis et d'ouverture
*/
var Toggle = {
create: function(target) {
return {
//Déclaration et instantiation des propriétés
id: "no name",
orientation: "vertical",
myObject : target,
min: 0,
max: target.offsetHeight,
speed: 350,
isOpen : true,
//Méthode move , effectuant les calculs
move: function(titleChange) {
if(this.myObject.testTime == null){
start = (this.isOpen) ? this.max:this.min;
end = (this.isOpen) ? this.min:this.max;
c = (350 / 50);
d = Math.round(this.speed / c);
w = new Array();
this.myObject.currentStepX = 0;
this.myObject.testTime = null;
//Etape permettant de calculer les pas pour avoir une animation fluide et dont la durée sera
//toujours la même, quelque soit la hauteur du conteneur
for (var i = 1; i <= d; i++) {
w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
}
titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
this.go(this,c,w);
}
},
//Méthode effectuant l'ouverture ou fermeture
go: function(b, c , w) {
b.myObject.testTime = window.setInterval(function() {
var a = true;
if (w[b.myObject.currentStepX]) {
b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
b.myObject.currentStepX++;
a = false
}
if (a) {
window.clearInterval(b.myObject.testTime);
b.myObject.testTime = null;
b.isOpen = (b.isOpen) ? false:true;
if (b.callBack) {
b.callBack()
}
return
}
},
c);
},
//Méthode d'algo calculant les pas ;)
easeOutCubic : function (t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
}
}
}
}; |
[SRC] toggle ( paneau déroulant ) -de 5ko ( sans librairie ;) )
est ton ami 
fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes 
Répondre avec citation
), seule petite remarque, la div contentToggle étant plus large que le cadre, ça déborde quand il y a plus de contenu.
Pas de question technique par MP !
il y a aussi qqs erreurs ...
Envoyé par le_chomeur
il me faut à peu près trois-quart d'heure pour décrypter une ligne 
Sinon ouvrez une section Défis
Partager