Discussion :

[arno15]

Bonjour à tous,

Actuellement en stage dans une petite boite , je développe un menu de recherche avancée ou j'ai essayer d'intégrer un double Slider en javascript.

après quelques recherches sur le web je suis donc parti d'un script que j'ai trouvé sur le forum suivant :
http://forum.mootools.net/viewtopic.php?id=5791

on y trouve un exemple simple qui lorsqu'on déplace les curseurs, change le texte du Label...

Seulement voila, lorsque j'incorpore le script à mes pages, j'ai l'impression que l'événement OnChange n'est pas pris en compte. Je m'explique, je peut tout à fait déplacer les curseurs, mais cela n'a aucune action sur le contenu de label...

voici le code du menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
//CHOIX DU PRIX
	echo '<div id="price"><h1>'.tep_image(DIR_WS_IMAGES.'moteur_recherche_autre4_07.jpg').'Prix</h1>';
	echo '<label id="sliderLabelA" for="gutterA">ca devrait pas etre ca	ici...</label>';
	echo '<input type="text" name="prixmin" id="prixmin"  size="3" maxlength="3">';
	echo '<input type="text" name="prixmax" id="prixmax"  size="3" maxlength="3">';
	echo '<div id="gutterA" class="gutter">';
	echo '<div id="minKnobA" class="knob"></div>';
	echo '<div id="maxKnobA" class="knob"></div>';
	echo '</div></div>';

et voici le code du javascript :

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
 
	window.addEvent('domready', function() {
		var mySlideA = new Slider($('gutterA'), $('minKnobA'),
		{
			start: 0,
			end: 45,
			offset: 2,
			knobheight: 16,
			onChange: function(pos)
			{
				alert('CA MAAAAAAAAAAAAARCHE ');
				document.search_tools.prixmin.value = pos.minpos;
				document.search_tools.prixmax.value = pos.maxpos;
				$('sliderLabelA').innerHTML('min '+pos.minpos+' - max '+pos.maxpos);
			},
			onComplete: function(pos)
			{
				document.search_tools.prixmin.value = pos.minpos;
				document.search_tools.prixmax.value = pos.maxpos;
				$('sliderLabelA').innerHTML('min '+pos.minpos+' - max '+pos.maxpos);
			}
		},
		$('maxKnobA')).setMin(10).setMax(40);
	});

vous trouverez le code de la classe slider que j'utilise a l'adresse suivante : http://users.skynet.be/timer/mootool...o/js/Slider.js

Petite précision, lorsque j'utilise firefox avec firebug, je n'est aucune erreur au chargement de la page ni meme lorsque je déplace les curseurs... du coup j'ai vraiment l'impression que le code qui se trouve dans le onChange et le onComplete n'est tout simplement pas d'exécuté...

Je bloque la dessus depuis pas mal de temps... donc si vous avez une idée n"hésitez pas !

[E.Bzz]

Bonjour,
j'ai beau trouver des références sur le net à l'évènement ondomready (que je connaissais pas), chez moi ça ne déclenche rien, ni sous IE 6 ni sous FF2.
Aucune erreur signalée, en plus ...

Tu as essayé avec onload (donc 'load' dans ta syntaxe) ?
Ca serait plus "standard"

A+

[arno15]

Merci E.Bzz, j'ai essayé ton alternative mais, toujours rien...
le slider se dessine bien, mais lorsque je déplace les curseurs les champs ne changent toujours pas...
J'ai vraiment du mal a comprendre pourquoi, pourtant sur l'exemple que j'ai donné cela fonctionne parfaitement...
tout ce qui se trouve dans le onChange : function(pos)... n'est (j'ai l'impression) jamais executé...

[E.Bzz]

Et sans les majuscules dans les évènements (onchange) ?

[E.Bzz]

... et au fait : il vient d'où, ce "pos" ?

[arno15]

Les majuscules ne changent rien...
le pos vient de la classe Slider (Slider.js) http://users.skynet.be/timer/mootool...o/js/Slider.js

à la ligne 166 :

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
 
	checkStep: function(mx){
		if(mx==null) {
			if (this.previousChange != this.step){
				this.previousChange = this.step;
			}
		}
		else {
			if (this.maxPreviousChange != this.maxstep){
				this.maxPreviousChange = this.maxstep;
			}
		}
 
		if(this.maxknob!=null) {
			if(this.step < this.maxstep)
				this.fireEvent('onChange', { minpos: this.step, maxpos: this.maxstep });
			else
				this.fireEvent('onChange', { minpos: this.maxstep, maxpos: this.step });
		}
		else {
			this.fireEvent('onChange', this.step);
		}
	},

si je comprend bien ce bout de code, cela envoie un evenement onChange avec comme parametre {minpos: this.maxstep, maxpos: this.step} (comptant pour un seul)

[arno15]

Bonjour à tous !,
j'ai enfin trouvé pourquoi est ce que ce satané script ne voulait pas fonctionner... en fait c'est la librairie prototype qui bloque le fonctionnement du slider... (pourquoi ? je n'en sais pas plus... ) .

Malheureusement, j'utilise la librairie prototype sur tout le site... donc il va falloir que je trouve une autre solution ...

En tout cas merci pour votre aide , et si quelqu'un sait ce qui bloque avec prototype qu'il n'hésite pas !

tcho