jQueryUI Slider et modif CSS en temps réel

tekyo11
Javascript

Bonjour,
je début dans la manipulation de jQueryUI et j'ai bien suivi le tutoriel de jQueryUI Slider qui fonctionne à merveille, merci :)
Par contre, après quelques heures de recherche, je ne parviens pas à trouver le moyen de modifier un paramètre CSS (opacity) pour une div donnée, le tout en temps réel grâce à un slider précis (ID du input class range).

Merci pour votre aide.

5 réponses

tekyo11
Auteur
Réponse acceptée

Bon j'ai fini par trouver une solution. Je ne sais pas si c'est la meilleur ni la plus élégante, mais elle fonctionne. [code] //======================= // Sliders //======================= $('.range').each(function(){ var clss = $(this).attr('class'); var matches = clss.split(/([a-zA-Z]+)-([0-9]+.*[0-9]*)/g); var elem = $(this).parent(); var input = elem.find('input'); var options = {}; elem.append('

'); for(i in matches){ i = i * 1; if(matches* == 'min'){ options.min = matches[i+1]*1; } if(matches* == 'max'){ options.max = matches[i+1]*1; } if(matches* == 'step'){ options.step = matches[i+1]*1; } } options.slide = function(event, ui){ elem.find('label span').empty().append(ui.value); input.val(ui.value); //console.log(); // Effets Images if(input.attr('id') == "OpctImage"){ // Opacité $('#ImgFdPDF').css('opacity', ui.value);} } options.value = input.val(); options.range = 'min'; elem.find('.uirange').slider(options); elem.find('label span').empty().append(input.val()); input.hide(); }); [/code] En revanche, en ce qui concerne d'autre filtres, là je suis totalement largué et rien ne fonctionne...

Long-Live-ASAP

Tu peux simplement le faire en JS pure

document.getElementById('TaDiv').style.opacity = 0.5;
tekyo11
Auteur

Je connais bien cette méthode, mais j'aimerai le faire de manière dynamique avec le script unique de Jquery UI Slider.
En effet, j'ai réussi à le faire si le script n'est pas appliqué sur une série de slide créer sur les class "range" mais en utilisant la méthode "un slide = un script" en utilisant sont id.

Je commence à me demander si c'est possible de récupérer la valeur en temps réel d'un slide en particulier.

Long-Live-ASAP

Fais voir ton code pour voir.

tekyo11
Auteur

Voici le code qui a été mis en place **HTML:** [code]

<label for="">Opacité de l'images de fond : <span></span></label>

<input name="range" type="text" id="OpctImage" value="1" class="range min-0 max-1 step-0.05">
[/code] **Javascript :** [code] //======================= // Sliders //======================= $('.range').each(function(){ var clss = $(this).attr('class'); var matches = clss.split(/([a-zA-Z]+)-([0-9]+.*[0-9]*)/g); var elem = $(this).parent(); var input = elem.find('input'); var options = {}; elem.append('

'); for(i in matches){ i = i * 1; if(matches* == 'min'){ options.min = matches[i+1]*1; } if(matches* == 'max'){ options.max = matches[i+1]*1; } if(matches* == 'step'){ options.step = matches[i+1]*1; } } options.slide = function(event, ui){ elem.find('label span').empty().append(ui.value); input.val(ui.value); //$('#ImgFdPDF').css('opacity', ui.value); } options.value = input.val(); options.range = 'min'; elem.find('.uirange').slider(options); elem.find('label span').empty().append(input.val()); input.hide(); }); [/code] D'après le tutoriel[url=http://www.grafikart.fr/tutoriels/jquery/jquery-ui-slider-165]Tutoriel vidéo jQuery : jQueryUI Slider[/url]