Sujet Précédent Sujet Suivant

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

Résolu
topo64 Messages postés 3 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 24 mai 2012 - 23 mai 2012 à 14:18
 Utilisateur anonyme - 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>

5 réponses

Réponse 1 / 5
Utilisateur anonyme
24 mai 2012 à 11:59
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 !
3
Réponse 2 / 5
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
23 mai 2012 à 23:17
bonjour

il faudrait voir le fichier slider.js
0
Réponse 3 / 5
topo64 Messages postés 3 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 24 mai 2012
23 mai 2012 à 23:22
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);

}

}

}
0
Réponse 4 / 5
topo64 Messages postés 3 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 24 mai 2012
24 mai 2012 à 12:15
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,
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Utilisateur anonyme
24 mai 2012 à 13:54
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())
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
sweetAlert
ckrisL -
ckrisL -

15 réponses
Récupérer toutes les class d'un élément
cs_flexx -
flexx -

2 réponses
Incrémentation d'une variable globale en javascript
forcels -
forcels -

4 réponses
Vider un div de son contenu avant de faire un innerHTML dessus
nicomilville -
nicomilville -

9 réponses
Rejoignez-nous