Problème avec le Jquery

[jagouille]

Bonjour,
J'ai un problème avec un script en Jquery permettant de réaliser des barres de sélections d'intervalles. Le script fonctionne sur tous les navigateurs hors joomla. Sur mon site joomla, il ne fonctionne que sur internet explorer. Sur Chrome et FireFox la barre de sélection disparait quand on essaye de déplacer le curseur. Je n'arrive pas à trouver où est le problème. Pouvez vous m'aider svp.
Merci d'avance

voici l'adresse du site : http://www.encheresparisiennes.com/ c'est le module tout en bas a gauche nommé "test slider"

voici le code :

	<style type="text/css">
		<!--body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }-->
		fieldset { border:0; margin: 0em; height: 12em;}	
		label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
		select {margin-right: 1em; float: left;}
		.ui-slider {clear: both; top: 1em;}
	</style>
	
	
	
	<script type="text/javascript">
		jQuery.noConflict();

		jQuery(function(){
			//demo 2
			jQuery('select#valueA, select#valueB').selectToUISlider();
		
			//fix color 
			fixToolTipColor();
		});
		//purely for theme-switching demo... ignore this unless you're using a theme switcher
		//quick function for tooltip color match
		function fixToolTipColor(){
			//grab the bg color from the tooltip content - set top border of pointer to same
			jQuery('.ui-tooltip-pointer-down-inner').each(function(){
				var bWidth = jQuery('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
				var bColor = jQuery(this).parents('.ui-slider-tooltip').css('backgroundColor')
				$(this).css('border-top', bWidth+' solid '+bColor);
			});	
		}
	</script>
	<!-- jQuery UI theme switcher -->
	<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
	<script type="text/javascript"> jQuery(function(){ jQuery('<div style="position: absolute; right: 20px; margin-top: -40px" />').appendTo('body').themeswitcher({onSelect: function(){ setTimeout(fixToolTipColor, 800); }}); });</script>

	<form action="#">
		<fieldset>
			<label for="valueA">De </label>
			<select name="valueA" id="valueA">
				<option value="1" selected="selected"> 1 </option>
				<option value="2"> 2  </option>
				<option value="3"> 3  </option>
				<option value="4"> 4  </option>
				<option value="5"> 5 et + </option>
			</select>
	
			<label for="valueB"> à </label>
			<select name="valueB" id="valueB">
				<option value="1"> 1 </option>
				<option value="2"> 2  </option>
				<option value="3"> 3  </option>
				<option value="4"> 4  </option>
				<option value="5" selected="selected"> 5 et + </option>
			</select>
		</fieldset>
	</form>

[ghazal]

Re : Problème avec le Jquery

Salut,
1- quand tu bosses avec du JavaScript (jQuery étant une librairie JS), tu utilises l'extension Firebug pour Firefox.
Là, tu verrais tout de suite que le fichier themeswitchertool.js pose pb.

Erreur dans themeswitchertool.js :
$.fn is undefined
En regardant la démo de ton template (ja_portfolio), je n'ai pas vu d'appel vers ce fichier.
Est-ce un rajout externe que tu as fait ?

NB : Le pb avec jQuery est que si les scripts qui s'appuient sur cette librairie ne sont pas nickels, ils entrent en conflit rapidement avec la librairie JS sur laquelle s'appuie Joomla, ie Mootools.

Résultat des courses, si c'est un script maison, laisse tomber si tu ne maitrises pas le JavaScript ET jQuery
Si c'est un script récupéré par joomlart, regarde leur forum ou envoie leur un mail

[jagouille]

Re : Problème avec le Jquery

Merci pour ta réponse
Firebug ne marche pas sur mon ordi (il tourne indéfiniment puis plante) du coup je me sert de Google Chrome pour voir les erreurs. J'ai vu qu'il y avait un problème avec ce fichier mais je n'arrive pas à la résoudre.

En regardant la démo de ton template (ja_portfolio), je n'ai pas vu d'appel vers ce fichier.
Est-ce un rajout externe que tu as fait ?
C'est un rajout, je l'appelle dans le javascript :

<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>

J'ai essayé en le mettant dans le head ca ne change rien au problème.

Pour éviter le confit avec Mootool j'ai mis jQuery.noConflict();... Mais c'est peut être pas suffisant.

C'est un script récupéré sur internet, j'ai le seul que j'ai trouvé et dont j'ai réussi plus ou moins à me servir... Mais ce n'est peut être pas adapter... J'en ai trouvé un autre avec Mootool mais je n'arrive à le faire fonctionner sur mon site.

Je cherche à faire une barre de sélection d'intervalle comme cela : http://www.encheresparisiennes.com/test3/. Si tu as une idée pour que je puisse réaliser cela je suis preneuse...

Merci pour ton aide

[ghazal]

Re : Problème avec le Jquery

Pourrais-tu me décrire exactement comment tu as procédé.
1, 2, 3, etc...
PS : c'est parce que j'ai un script en réserve qui fait à peu près ce que tu veux, mais avec Mootools (donc plus simple à implémenter dans Joomla 1.6)

[jagouille]

Re : Problème avec le Jquery

Je suis partie de ce script : http://developer.expressionz.in/blog...nge-indicator/

J'ai copié la feuille css dans le répertoire CSS de mon template en remplaçant les :

background:url(../images/slider_l.gif)

par

background:url(/images/slider_l.gif)

J'ai copié les images dans le dossier image de mon template et dans celui de base de joomla (je ne sais pas dans le quel je dois les mettre?)

J'ai copié les deux fichiers .js dans le dossier js de mon template et je l'ai ai appelé dans mon header

J'ai copié le code suivant dans mon module flexicontent:

<div class="slider_outer" >
  <div class="slide_container" >
    <div id="slider_minmax_min"  class="floatl fontblue"> </div>
    <div class="slider_gutter" id="minmax_slider" >
      <div id="slider_minmax_gutter_l" class="slider_gutter_item iconsprite_controls"></div>
      <div id="slider_minmax_gutter_m" class="slider_gutter_item gutter iconsprite_controls">
        <!--        <div id="slider_gutter_bkg_minmax" class="slider_gutter_bkg"></div>
-->
        <img id="slider_bkg_img" src="images/bkg_slider.gif"/>
        <div id="slider_minmax_minKnobA" class="knob"></div>
        <div id="slider_minmax_maxKnobA" class="knob"></div>
      </div>
      <div id="slider_minmax_gutter_r" class="slider_gutter_item iconsprite_controls"> </div>
    </div>
    <div id="slider_minmax_max" class="floatl fontblue"> </div>
    <div class="clearfix"></div>
  </div>
</div>

<script type="text/javascript" >
window.addEvent('domready', function() {
	var mySlideA = new Slider($('slider_minmax_gutter_m'), $('slider_minmax_minKnobA'),$('slider_bkg_img'), {
		start: 0,
		end: 5,
		offset:8,
		snap:false,
		onChange: function(pos){$('slider_minmax_min').setHTML('min '+pos.minpos);$('slider_minmax_max').setHTML('max '+pos.maxpos);}
	}, $('slider_minmax_maxKnobA')).setMin(2).setMax(3);
	
	var mySlideB = new Slider($('slider_gutter_1'), $('slider_knob_1'), $('slider_bkg_img_1'),{
		start: 0,
		end: 120,
		offset: 10,
		onChange: function(pos){
			$('slider_current_val').setHTML(pos + ' inches');	
		}
	}, null).setMin(100);
	$('slider_current_val').setHTML(100 + ' inches');
	
	// In this slilder example silder moves 10 steps with an increament of 15 in every step
	var mySlideC = new Slider($('slider_gutter_C'), $('slider_knob_C'), $('slider_bkg_img_C'),{
		start: 0,
		end: 150,
		offset:0,
		snap:true, 
		numsteps:10,
		onChange: function(pos){
			$('slider_current_val_2').setHTML(pos + ' inches');
		}
	}, null).setMin(30);
	$('slider_current_val_2').setHTML(30 + ' inches');

});
</script>

J'obtiens une barre avec deux cursus mais qui ne bougent pas

l'inspecteur de chrome me dit :
Uncaught TypeError: Property '$family' of object [object Object],[object Object] is not a function
2mootools-core.js:1Uncaught TypeError: Property '$family' of object /key/ is not a function
2mootools-core.js:1Uncaught TypeError: Property '$family' of object [object Object],[object Object] is not a function

[ghazal]

Re : Problème avec le Jquery

Ah oui, je connais ce script, il est très bien écrit, mais pour une version antérieure de Mootools. Il nécessite cependant qq modifs pour fontionner avec Mootools 1.3 (version de Moo pour J!1.6).
Script corrigé :

window.addEvent('domready', function() {
	var mySlideA = new Slider(document.id('slider_minmax_gutter_m'), document.id('slider_minmax_minKnobA'),document.id('slider_bkg_img'), {
		start: 0,
		end: 5,
		offset:8,
		snap:false,
		onChange: function(pos){document.id('slider_minmax_min').set('html','min '+pos.minpos);document.id('slider_minmax_max').set('html','max '+pos.maxpos);}
	}, document.id('slider_minmax_maxKnobA')).setMin(2).setMax(3);
	
	var mySlideB = new Slider(document.id('slider_gutter_1'), document.id('slider_knob_1'), document.id('slider_bkg_img_1'),{
		start: 0,
		end: 120,
		offset: 10,
		onChange: function(pos){
			document.id('slider_current_val').set('html',pos + ' inches');
			
		}
	}, null).setMin(100);
	document.id('slider_current_val').set('html',100 + ' inches');
	
	// In this slilder example silder moves 10 steps with an increament of 15 in every step
	var mySlideC = new Slider(document.id('slider_gutter_C'), document.id('slider_knob_C'), document.id('slider_bkg_img_C'),{
		start: 0,
		end: 150,
		offset:0,
		snap:true, 
		numsteps:10,
		onChange: function(pos){
			document.id('slider_current_val_2').set('html', pos + ' inches');
			
		}
	}, null).setMin(30);
	document.id('slider_current_val_2').set('html', 30 + ' inches');

});

PS : Le fichier slider.js n'a pas besoin de modifs.
PPS : partout où il y a 'inches', tu remplaces par le terme que tu veux. C'est juste une indication de valeur. Il faut bien respecter les ' '.
PPPS : ta procédure est correcte.
Mais tu peux aussi utiliser le plugin loadtag_GC (developpé par ced1870 et moi) pour ce genre d'utilisation :

http://extensions.joomla.org/extensions/core-enhancements/embed-a-include/15414

dans un module custom
En ce cas, tu colles le script que j'ai modifié dans un fichier que tu peux nommer slider_usage.js et l'appeler après slider.js

... et post ici si il y a encore un pB.
Hope it helps.

[jagouille]

Re : Problème avec le Jquery

Merci pour ton aide ca fonctionne

[ghazal]

Re : Problème avec le Jquery

de manière générale, si tu utilises des scripts Mootools, il vaut mieux remplacer :
$ par document.id
et
$$ par document.getElements
c'est un premier pas pour éviter les conflits avec jQuery

[jagouille]

Re : Problème avec le Jquery

d'accords je tacherais de m'en souvenir