Comment récupérerla valeur d'un curseur (slider) dans un variable en javascript [Résolu]

Messages postés
3
Date d'inscription
lundi 9 mars 2009
Dernière intervention
24 mai 2012
- - Dernière réponse : adelami
Messages postés
65
Date d'inscription
mardi 1 novembre 2005
Dernière intervention
8 juin 2012
- 24 mai 2012 à 13:54
Bonjour,

J'essaye de faire un site pour l'école de ma fille et je cale sur (probablement une bêtise) n'étant pas du tout un pro en javascript. Je m'explique : je voudrais associer une fonction de curseur (slider)( puisée dans un script de Kgilbert) et utiliser la valeur du curseur comme rayon (aradius) pour un cercle sur une carte google.
Le curseur fonctionne bien, la carte google avec le marqueur aussi mais je cale pour faire le lien entre les deux.
De plus la récupération de cette valeur (variable) devrait également me servir comme base à un critère de sélection dans une DB sql....
Bref si quelqu'un avait la gentillesse d'éclairer ma lanterne.... (pour le moment aradius = 15000 mais je voudrais le remplacer par la récupération de la valeur du curseur)

Merci d'avance

voici le code complet de la page :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Sliders JavaScript</title>

<!-- DÉBUT inclusions nécéssaires pour les sliders -->

<link type="text/css" rel="stylesheet" href="http://manad.be/example/CSS/slider.css" />
<script type="text/javascript" src="http://manad.be/example/JS/slider.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >




// mise en page de la carte
aradius = 15000 ;


function initialisation(){
var centreCarte = new google.maps.LatLng(50.6667, 4.71667);

if(aradius<=20000){azoom=10;}
else{if(aradius<=50000){azoom=9;}
else{if(aradius<=90000){azoom=8;}
else{if(aradius<=170000){azoom=7;}
else{azoom=6;}}}}

var optionsCarte = {
zoom: azoom,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
zoomControl: false,
panControl: false,
mapTypeControl: false,
streetViewControl: false,
keyboardShortcuts: false,
scrollwheel: false,
rotateControl: false,
overviewMapControl: false,

}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);

var optionsMarqueur = {
position: centreCarte,
map: maCarte,
title: "Titre de mon premier marqueur"
}
var marqueur = new google.maps.Marker(optionsMarqueur);

var optionsCercle = {
center: centreCarte,
map: maCarte,
radius: aradius,
fillColor: "#FF0000",
fillOpacity: .2,
strokeColor: "#0000FF",
strokeOpacity: 1.0, trokeWeight:1,
}

var monCercle = new google.maps.Circle(optionsCercle);
google.maps.event.addListenerOnce(maCarte, 'tilesloaded', function(){
agrandirCercle(monCercle,0);
});
}

google.maps.event.addDomListener(window, 'load', initialisation);



// mise en page du curseur slider

function curseur(){

if(document.getElementById('slider_1')){
document.getElementById('slider_1_msg').innerHTML = document.getElementById('slider_1').value;
}}


</script>






</head>











distance en km:




0







<script type="text/javascript">

init_slider('slider_1',0,0,1000000,1000000,300,curseur);

</script>









</html>
Afficher la suite 

Votre réponse

5 réponses

Meilleure réponse
Messages postés
65
Date d'inscription
mardi 1 novembre 2005
Dernière intervention
8 juin 2012
3
Merci
Bonjour,

En réalité, récupérer la valeur du slider, tu sais déjà la faire...
Dans ta fonction curseur(), il suffit de faire
aradius = parseInt(document.getElementById('slider_1').value);
pour avoir la valeur du slider dans la variable aradius.

La difficulté est ensuite de mettre à jour la Google Map avec cette valeur récupérée.

Voilà une idée de la manière de procéder inspirée de ton code :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<title>Sliders JavaScript</title> 

<!-- DÉBUT inclusions nécéssaires pour les sliders --> 

<link type="text/css" rel="stylesheet" href="http://manad.be/example/CSS/slider.css" /> 
<script type="text/javascript" src="http://manad.be/example/JS/slider.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" > 

// mise en page de la carte 
aradius = 15000 ; 

// Les elements que doit changer la 
var monCercle = null;
var maCarte = null;


function initialisation(){ 
var centreCarte = new google.maps.LatLng(50.6667, 4.71667); 

if(aradius<=20000){azoom=10;} 
else{if(aradius<=50000){azoom=9;} 
else{if(aradius<=90000){azoom=8;} 
else{if(aradius<=170000){azoom=7;} 
else{azoom=6;}}}} 

var optionsCarte = { 
zoom: azoom, 
center: centreCarte, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
scrollwheel: false, 
zoomControl: false, 
panControl: false, 
mapTypeControl: false, 
streetViewControl: false, 
keyboardShortcuts: false, 
scrollwheel: false, 
rotateControl: false, 
overviewMapControl: false, 

} 
maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte); 

var optionsMarqueur = { 
position: centreCarte, 
map: maCarte, 
title: "Titre de mon premier marqueur" 
} 
var marqueur = new google.maps.Marker(optionsMarqueur); 

var optionsCercle = { 
center: centreCarte, 
map: maCarte, 
radius: aradius, 
fillColor: "#FF0000", 
fillOpacity: .2, 
strokeColor: "#0000FF", 
strokeOpacity: 1.0, trokeWeight:1, 
} 

monCercle = new google.maps.Circle(optionsCercle); 

} 

google.maps.event.addDomListener(window, 'load', initialisation); 

// mise en page du curseur slider 

function curseur(){ 

if(document.getElementById('slider_1')){ 

// On recupere la valeur du slider dans aradius
aradius = parseInt(document.getElementById('slider_1').value);
document.getElementById('slider_1_msg').innerHTML = aradius; 

// Si la carte est initialisee
if(maCarte != null){

// calcul du zoom
if(aradius<=20000){azoom=10;} 
else{if(aradius<=50000){azoom=9;} 
else{if(aradius<=90000){azoom=8;} 
else{if(aradius<=170000){azoom=7;} 
else{azoom=6;}}}}

// Affectation du zoom
maCarte.setZoom(azoom);
}

// Si le cercle est initialise
if(monCercle != null){

// On change son rayon
monCercle.setRadius(aradius);
}

}} 
</script> 

</head> 


 



 




distance en km:
 

 

0
 





 
<script type="text/javascript"> 
init_slider('slider_1',0,0,1000000,1500,300,curseur); 
</script> 

 
 
</html>


Bon courage !

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 96 internautes nous ont dit merci ce mois-ci

Commenter la réponse de adelami
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Dernière intervention
3 novembre 2018
0
Merci
bonjour

il faudrait voir le fichier slider.js
Commenter la réponse de @karamel
Messages postés
3
Date d'inscription
lundi 9 mars 2009
Dernière intervention
24 mai 2012
0
Merci
Merci Kazma de t'intéresser à mon soucis. Voici le fichier slider.js

/*Slider JavaScript*/
/*Cet add-on va générer un slider sur la page selon les critères envoyés*/
/*Un champs de type hidden sera créer en même temps, contenant sa valeur*/

/*Ce script à été programmé par Kevin Gilbert (KeGi Site Web)*/
/*Il est libre de droit*/

/*Variables globales*/

var align_slider = new Array;
var width_slider = new Array;
var minimum_slider = new Array;
var maximum_slider = new Array;
var callback_slider = new Array;
var callback_slider = new Array;

var slider_down = '';

/*Largeur du curseur*/

var cursor_width = 11;
var cursor_real_width = (cursor_width + 0); /*ajouter les bordures du cursor si vous en mettez (* 2)*/

function addEvent(obj,event,fct){

/*Cette fonction permet d'ajouter un événements à un objet (cross browsers)*/

if(obj.attachEvent)
obj.attachEvent('on' + event,fct);
else
obj.addEventListener(event,fct,true);

}

function get_posx_parent(child){

/*Cette fonction trouve l'abscise absolu d'un élément*/

var x = 0;
while(child)
{
x += child.offsetLeft;
child = child.offsetParent;
}

return x;

}

function get_posy_parent(child){

/*Cette fonction trouve l'ordoné absolu d'un élément*/

var y = 0;
while(child)
{
y += child.offsetTop;
child = child.offsetParent;
}

return y;

}

function mouseup_slider(){

slider_down = '';

}

function mouseCoords(ev){

/*Cette fonction retourne les coordonées de la souris (cross browsers)*/

if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

function move_mouse_cursor(event){

if(slider_down != ''){

/*Si on drag présentement un curseur...*/

var souris = mouseCoords(event);
var divSlider = document.getElementById(slider_down+'_div');
var divSliderCursor = document.getElementById(slider_down+'_cursor');

if(align_slider[slider_down]){

/*On calcule la réelle position absolue dans la page*/
pos_container = (get_posy_parent(divSlider) + 1);

/*On calcule la position du curseur dans son parent*/
pos_container_fp = (divSlider.offsetTop + 1);

}else{

pos_container = (get_posx_parent(divSlider) + 1);
pos_container_fp = (divSlider.offsetLeft + 1);

}

var middle_cursor = Math.round((cursor_real_width / 2) - 1);

if(align_slider[slider_down]){

/*On calcule le déplacement en fonction des valeurs envoyés*/

if((((souris.y - pos_container) + (middle_cursor + 1))) < width_slider[slider_down] && (((souris.y - pos_container) - middle_cursor)) > -1){

divSliderCursor.style.top = (((souris.y - pos_container) - middle_cursor) + pos_container_fp)+'px';

}else{

if(((souris.y - pos_container) + (middle_cursor + 1)) >= width_slider[slider_down]){

divSliderCursor.style.top = ((width_slider[slider_down] - cursor_real_width) + pos_container_fp)+'px';

}

if(((souris.y - pos_container) - middle_cursor) <= -1){

divSliderCursor.style.top = pos_container_fp+'px';

}

}

}else{

if((((souris.x - pos_container) + (middle_cursor + 1))) < width_slider[slider_down] && (((souris.x - pos_container) - middle_cursor)) > -1){

divSliderCursor.style.left = (((souris.x - pos_container) - middle_cursor) + pos_container_fp)+'px';

}else{

if(((souris.x - pos_container) + (middle_cursor + 1)) >= width_slider[slider_down]){

divSliderCursor.style.left = ((width_slider[slider_down] - cursor_real_width) + pos_container_fp)+'px';

}

if(((souris.x - pos_container) - middle_cursor) <= -1){

divSliderCursor.style.left = pos_container_fp+'px';

}

}

}

if(align_slider[slider_down]){

/*La position en pixel sur le slider*/
var pos_pix_cursor = (divSliderCursor.offsetTop - pos_container_fp);

}else{

/*La position en pixel sur le slider*/
var pos_pix_cursor = (divSliderCursor.offsetLeft - pos_container_fp);

}

/*On calcule la valeur selon le minimum et le maximum*/
var val_pos_cursor = Math.round(((pos_pix_cursor * (maximum_slider[slider_down] - minimum_slider[slider_down])) / (width_slider[slider_down] - cursor_real_width)) + minimum_slider[slider_down]);

/*On met à jour la valeur du curseur*/
document.getElementById(slider_down).value = val_pos_cursor;

/*On appelle la fonction CallBack*/

if(callback_slider[slider_down] != ''){

callback_slider[slider_down](slider_down);

}

}

}

function update_value_slider(slider){

/*Cette fonction met le curseur à la valeur du slider*/

var val_slider = document.getElementById(slider);
var divSlider = document.getElementById(slider+'_div');
var divSliderCursor = document.getElementById(slider+'_cursor');

if(val_slider == ''){

val_slider.value = 0;
return 0;

}else{

if(val_slider.value >= minimum_slider[slider] && val_slider.value <= maximum_slider[slider]){

/*On affecte la valeur*/

var new_val = Math.floor(((val_slider.value * (width_slider[slider] - cursor_real_width)) / maximum_slider[slider]));

if(align_slider[slider]){

var pos_container = (divSlider.offsetTop + 1);

var new_val = (new_val + pos_container);

divSliderCursor.style.top = new_val+'px';

}else{

var pos_container = (divSlider.offsetLeft + 1);

var new_val = (new_val + pos_container);

divSliderCursor.style.left = new_val+'px';

}

}else{

val_slider.value = 0;
return 0;

}

return 1;

}
}

function init_slider(name_sli,align_sli,minimum_sli,maximum_sli,default_value_sli,width_sli,callback_sli){

/*Uniquement cette fonction sera appellée pour la création, ongénère nos éléments et nos événements*/

/*On remplie nos variables globales*/

align_slider[name_sli] = align_sli;
width_slider[name_sli] = (width_sli + cursor_real_width);
minimum_slider[name_sli] = minimum_sli;
maximum_slider[name_sli] = maximum_sli;
callback_slider[name_sli] = callback_sli;

/*On vérifie la valeur par défaut*/

if(default_value_sli < minimum_slider[name_sli]){
default_value_sli = minimum_slider[name_sli];
}

if(default_value_sli > maximum_slider[name_sli]){
default_value_sli = maximum_slider[name_sli];
}

var divSlider = document.getElementById(name_sli+'_div');

if(divSlider){

/*Background du Slider*/

if(align_slider[name_sli]){

divSlider.className = 'bg_slider_vertical';
divSlider.style.height = width_slider[name_sli]+'px';

}else{

divSlider.className = 'bg_slider_horizontal';
divSlider.style.width = width_slider[name_sli]+'px';

}

divSlider.innerHTML = '';

/*On créer un nouvel élément (Curseur)*/

var cursor_slider = document.createElement("div");

cursor_slider.id = name_sli+'_cursor';

if(align_slider[name_sli]){ /*Si notre slider est vertical*/

cursor_slider.className = 'slider_cursor_vertical';

cursor_slider.style.top = (divSlider.offsetTop + 1)+'px';
cursor_slider.style.left = (divSlider.offsetLeft - 3)+'px';
cursor_slider.style.height = cursor_width+'px';

}else{ /*Si notre slider est horizontale*/

cursor_slider.className = 'slider_cursor_horizontal';

cursor_slider.style.top = (divSlider.offsetTop - 2)+'px';
cursor_slider.style.left = (divSlider.offsetLeft + 1)+'px';
cursor_slider.style.width = cursor_width+'px';

}

divSlider.appendChild(cursor_slider);

var divSliderCursor = document.getElementById(name_sli+'_cursor');

/*On ajoute nos événements et on envoie au parent*/

/*Sur quelques browsers (e.g. FF3), lorsque vous sélectionner un élément une fois*/
/*et que vous réessayez de dragger cet élément, il essayera de sortir l'élément*/
/*et le curseur ne réagira plus, on déselectionne tout en utilisant body.focus();.*/

addEvent(cursor_slider,"mousedown",function(){ document.body.focus(); slider_down = name_sli; });
addEvent(cursor_slider,"mouseup",function (){ mouseup_slider(); document.body.focus(); });

if(align_slider[name_sli]){

addEvent(cursor_slider,"mouseover",function(){ divSliderCursor.className = 'slider_cursor_hover_vertical'; });
addEvent(cursor_slider,"mouseout",function(){ divSliderCursor.className = 'slider_cursor_vertical'; });

}else{

addEvent(cursor_slider,"mouseover",function(){ divSliderCursor.className = 'slider_cursor_hover_horizontal'; });
addEvent(cursor_slider,"mouseout",function(){ divSliderCursor.className = 'slider_cursor_horizontal'; });

}

/*On met les valeurs à jour afin que le curseur prenne la valeur par défaut*/

update_value_slider(name_sli);

/*On appelle la fonction CallBack*/

if(callback_slider[name_sli] != ''){

callback_slider[name_sli](name_sli);

}

}

}
Commenter la réponse de topo64
Messages postés
3
Date d'inscription
lundi 9 mars 2009
Dernière intervention
24 mai 2012
0
Merci
Merci beaucoup Adelami, c'est génial, j'espère un jour pouvoir renvoyer l'ascenceur.
J'ai cependant une dernière petite question si je peux abuser de votre gentillesse comment puis-je récupérer cette variable pour ensuite la faire passer en php (ou je suis nettement plus à l'aise) pour l'utiliser comme critère de sélection dans une DB.

Un tout grand merci,
Commenter la réponse de topo64
Messages postés
65
Date d'inscription
mardi 1 novembre 2005
Dernière intervention
8 juin 2012
0
Merci
Si cela doit se faire à chaque mouvement du slider, il faut voir du côté des requêtes Ajax et transmettre la variable aradius en "post" ou en "get" à PHP à partir de la fonction curseur() (Il faut cependant faire attention, j'ai l'impression que la fonction de rappel curseur() est appelée un trop grand nombre de fois par le script du slider, cela risque de générer un nombre de requêtes conséquent)

Si la transmission de la valeur doit se faire en cliquant sur un bouton après avoir positionné le slider, il suffit de créer un formulaire HTML classique et l'un de ses champs sera modifié par javascript (toujours dans la fonction curseur())
Commenter la réponse de adelami

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.