Discussion :

[Lost In Translation]

Bonsoir,

Je cherche à faire fonctionner l'effet Fx.Tween.

J'ai beau lire la documentation, ma console m'envoie l'erreur suivante :

Code :

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

1
2
3
4
 
Erreur*: Fx.Tween($(this.options.container), {duration: this.options.duration, onComplete: function () {if (this.options.amount >= 0) {this.getCount();} else {$(this.options.container).set("text", this.options.onCompleteText);}}.bind(this)}).start is not a function
Fichier Source*: http://localhost/test/dr-coontdown/js/rwkCoontDown.js
Ligne*: 83

Je cherche à faire un compte à rebours avec un décompte comme celui-ci : http://davidwalsh.name/mootools-countdown-plugin

(j'étends juste les fonctionnalités sur un timestamp prenant en compte les jours, les minutes et les secondes).

Le code formaté :

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
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
 
var rwkCoontDown = new Class({
 
	Implements: Options,
 
  options: {
    //public options
		container : 'coontdown',
		onCompleteText : 'Coontdow finished !',
		futureDate : $empty,
		dayText : 'jour',
		hourText : 'heure',
		minuteText : 'minute',
		secondText : 'seconde',
		afterOut : 'avant la fin du monde',
		duration : 1000,
		startFont : '32px',
		finishFont : '16px',
 
    //private options
		now : new Date(),
		amount : $empty,
    days : $empty,
    hours : $empty,
    minutes : $empty,
    seconds : $empty,
    out : ''		
	},
 
	initialize : function(options){
		this.setOptions(options);
 
		//Calcul du temps restant en millisecondes
    this.options.amount = this.options.futureDate - this.options.now.getTime();
    //On récupère le temps en seconde
    this.options.amount = Math.floor(this.options.amount/1000);
 
    if(this.options.amount < 0) {
      $(this.options.container).set('text',this.options.onCompleteText);
    }
  	else {	
      this.getCount();
    }	
 
	},
 
  getCount : function(){
 
    //calcul des jours
    this.options.days = Math.floor(this.options.amount/86400);
    this.options.amount = this.options.amount%86400; 
 
    //calcul des heures
    this.options.hours = Math.floor(this.options.amount/3600);
    this.options.amount = this.options.amount%3600;
 
    //calcul des minutes
    this.options.minutes = Math.floor(this.options.amount/60);
    this.options.amount = this.options.amount%60;
 
    //calcul des secondes
    this.options.seconds = this.options.amount;
 
    //Texte de sortie
 
    if(this.options.days != 0){this.options.out += this.options.days +" "+this.options.dayText+((this.options.days !=1)?"s":"")+", ";}
    if(this.options.days != 0 || this.options.hours != 0){this.options.out += this.options.hours +" "+this.options.hourText+((this.options.hours !=1)?"s":"")+", ";}
    if(this.options.days != 0 || this.options.hours != 0 || this.options.minutes != 0){this.options.out += this.options.minutes +" "+this.options.minuteText+((this.options.minutes !=1)?"s":"")+", ";}
    this.options.out += this.options.seconds +" "+this.options.secondText;
    $(this.options.container).set('text',this.options.out+" "+this.options.afterOut);
 
    //l'effet
 
    var fx = Fx.Tween($(this.options.container),{
      duration: this.options.duration,
      onComplete: function() { 
        if(this.options.amount >= 0) { 
          this.getCount();
        }
        else {
           $(this.options.container).set('text',this.options.onCompleteText);
        }
      }.bind(this)
    }).start('font-size',[this.options.startFont,this.options.finishFont]);
 
  }
 
});

Je précise que tout le reste marche. Par exemple, si je fais le décompte pour le même jour l'an prochain : 364 jours, 22 heures, 1 minute, 51 seconde avant la fin du monde

Et si je fais "f5" ma page se rafraichit et les infos sont bien décrémentées...
Mon but, le faire automatiquement sans le f5 avec l'effet tween ^^

[Lost In Translation]

J'ai pu trouver ma réponse.

Il manquait le "new" devant Fx.Tween.

Ma classe est quasi finie (le code a pas mal bougé depuis hier).
Je la proposerai en DL sur mon blog quand celle ci sera terminée.