Résolu [php] Réalisation d'un curseur (slider) possible ou pas ?

Solutions (20)
Tags :
  • Input
  • Php
  • Programmation
, Maître Yoda |
Bonjours à tous.

Je me permet de créer se post pour vous posez une question à laquel je n'ai trouvé aucune réponse.

Sur une de mes pages web j'ai un champs input de type text ou le client viens régler sa vitesse comprise entre 0 a 100.
Je voudrais donc savoir s'il est possible de réaliser en php un curseur qui évolue par palier de 1 que le client viendrait déplacer au lieu de rentrer les chiffres ?? ou sinon quel langage utiliser ?

J'éspère que vous aurez compris ma question ^^ ?!

Merci par avance.
Contenus similaires
Meilleure solution
partage
|
Ben, tu as $_POST['sliderValue4h'] et $_POST['sliderValue3h'], c'est un formulaire normal au final.
  • Commenter cette solution |
Score
0
òh
òi
|
je continue mon monologue :

le problème que je rencontrais entre la version locale/distante provient du formulaire dans le bandeau de mon site
étant connecté en local, le formulaire n'existait plus.
Par contre quand il est présent, le slider ne s'affiche pas.

illustration en testant ces 2 pages :
http://www.chdup.fr/pronostiks2/test.php
http://www.chdup.fr/pronostiks2/test_sans_form.php

L'unique différence est que dans la 2nde, j'ai supprimé la partie <form> jusque </form> (voir code source)
J'ai beau cherché sur le net des infos sur des conflits entre 2 formulaires sur une même page, je ne trouve rien qui m'eclaire.
help, please !

  • Commenter cette réponse |
Score
0
òh
òi
|
Je bloque sur autre chose maintenant.

L'affichage de plusieurs sliders sur une même page, avec des noms dynamiques ....

aurais-tu une idée du pourquoi les sliders ne s'affichent pas sur cette page ?
www.chdup.fr/pronostiks2/pronostiks.php

en local, avec exactement le même code, ils s'affichent !
(bon ils ne fonctionnent pas, mais au moins ils s'affichent)
  • Commenter cette réponse |
Score
0
òh
òi
|
bonjour à vous deux.

J'ai un problème en essayant d'utiliser le script de daftlogic.
En fait, le contenu où j'affiche le slider est généré par de l'ajax.
C'est ce qui semble poser problème.
Tout fonctionne bien si j'utilise le code "seul", dans une page html ou php vierge.
par contre quand j'ajoute ce code sur la même page :

Citation :
<div id="cadre_gauche" class="arrondi">
<form action="pronostiks.php" method="post" >

<select name="journee" id="liste_journee" size="19" onchange="request(readData);" onload="request(readData);"/>
<?php
while ($donnees = $reponse->fetch())
{
$numero_journee=$donnees['journee'];
echo ('<option value="'.$numero_journee.'"');
if ($donnees['journee'] == $journee)
{
echo ' selected=selected id="journee_actuelle"';
}
echo ('>journee '.$numero_journee.'</option>');
}
?>
</select>
</form>
</div>


la valeur ne s'affiche plus dans l'input sliderValue, et j'ai la fameuse erreur dès que je bouge le slider :
Citation :
Slider #0 Error:
Can not find the input with NAME='sliderValue4h'.


Comment puis-je solutionner ça ?
merci

edit : ah ben ça alors, en fait c'est juste le fait qu'il y ait deja un <form> qui le gene.
En plus, je me suis rendu compte que si je supprime juste les balises <form> de mon code, tout fonctionne très bien .... Par contre des <select> sans <form> ça ne doit pas être au top, sémantiquement parlant.
  • Commenter cette réponse |
Score
0
òh
òi
|
Il faudrait voir ton code (celui du formulaire) pour pouvoir t'aider mieux.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Enfaite quand j'appui sur mon bouton submit il y a cela qui s'affiche dans mon url :

http://localhost/Appli/index.php?sliderValue4h=49&sliderValue3h=51&Submit=Submit#

ou je récupère la valeur des slidervalue, mais le soucie c'est que je voudrai ajouter ses valeur à l'indice de l'exercice en cour de création.

Quand j'arrive sur ma page index, j'ai dans mon url : http://localhost/Appli/index.php?id_exo=1

la valeur id_exo je l'a met dans une variable de session, mais quand j'appui sur le bouton submit de mon slider, et que ma page index est actualisé, sa se marque :

Notice: Undefined variable: id_exo in C:\wamp\www\Appli\exercice.php on line 142

  • Commenter cette réponse |
Score
0
òh
òi
|
Comment ça dans l'url ? Les valeurs sont mises à jour dans le formulaire, donc il n'y a pas de retour.

Ou bien je ne comprends pas ta question.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
crazycat@idn je voudrais savoir, depuis tout a l'heure je cherche dans le fichier javascript ou se fait le retour des valeurs dans l'url ?
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Meilleure réponse sélectionnée par danydan01.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
C'est bon je viens de réussir.

Merci beaucoup crazycat@idn pour ton aide et ta patience :D 
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
YYYYeeees j'ai réussi a mettre le deuxième slider merci beaucoup crazycat@idn.

il fallait aussi que je rajoute :
  1. var A_TPL3h = {
  2. 'b_vertical' : false,
  3. 'b_watch': true,
  4. 'n_controlWidth': 100,
  5. 'n_controlHeight': 16,
  6. 'n_sliderWidth': 17,
  7. 'n_sliderHeight': 16,
  8. 'n_pathLeft' : 0,
  9. 'n_pathTop' : 0,
  10. 'n_pathLength' : 83,
  11. 's_imgControl': 'background.gif',
  12. 's_imgSlider': 'handle.gif',
  13. 'n_zIndex': 1
  14. }
  15. var A_INIT3h = {
  16. 's_form' : 0,
  17. 's_name': 'sliderValue3h',
  18. 'n_minValue' : 0,
  19. 'n_maxValue' : 100,
  20. 'n_value' : 85,
  21. 'n_step' : 1
  22. }


dans le fichier javascript pour initialiser le 2ème =)

Juste un tout petit dernier truc et je te laisse tranquil =)

Si je veux récupéré la valeur des champs a l'appui des bouton submit dans une variable php, comment je dois me débrouiller ?
  • Commenter cette réponse |
Score
0
òh
òi
|
Ben vu ce qu'il y a dans le onclick des boutons, c'est un peu normal que tu aies l'alerte.

Ensuite, si tu ne crées pas une variable A_INIT3h pour ton deuxième curseur, et que tu ne l'utilise pas dans le "new slider()", c'est normal que ce soit le premier input qui soit toujours modifié.
Et j'imagine que le deuxième onchange doit être modifié aussi.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Enfaite je voudrais récupéré la valeur rentré dans le slider puis la mettre dans ma bdd.
en gros si je sélectionne 80, je met 80 dans ma bdd, mais comment faire pour récupérer la valeur justement... parque jusqu’à présent ça effectue cette action : onClick="javascript:alert('You have selected '+document.getElementById('sliderValue4h').value);

Edit: je viens de tester en ajoutant un id différent comme ceci :

  1. <script type="text/javascript" src="slider.js"></script>
  2.  
  3. <form>
  4. <input name="sliderValue4h" id="sliderValue4h" type="Text" size="3" onChange="A_SLIDERS[3].f_setValue(this.value)">
  5. <input name="sliderValue3h" id="sliderValue3h" type="Text" size="3" onChange="A_SLIDERS[3].f_setValue(this.value)">
  6. <input name="Submit" type="button" value="Submit" onClick="javascript:alert('You have selected '+document.getElementById('sliderValue4h').value);">
  7. <input name="Submit2" type="button" value="Submit2" onClick="javascript:alert('You have selected '+document.getElementById('sliderValue3h').value);">
  8. </form>
  9. <script type="text/javascript">new slider(A_INIT4h, A_TPL4h);</script>
  10. <script type="text/javascript">new slider(A_INIT4h, A_TPL4h);</script>


mais que je bouge l'un ou l'autre cela me modifie toujours la valeur du premier slider =s
Pas si évident que ça de mettre un slider en javascript ^^
  • Commenter cette réponse |
Score
0
òh
òi
|
Images:
http://www.daftlogic.com/images/slider/background.gif et http://www.daftlogic.com/images/slider/handle.

Je ne comprends pas tellement ta question sur la récupération de la valeur.

Et finalement, pour avoir plusieurs sliders, je pense qu'il te suffit de leur mettre des id différents et de créer une nouvelle variable A_INIT4h (avec un autre nom donc) à utiliser dans l'appel de génération du slider.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Yeeeaaah Merci pour l'explication.

Dit moi j'ai encore 2 ou 3 petites questions :

- aurais-tu un lien ou il y a les images déjà faite pour le design du slider ?

- comment faire pour récupéré la valeur du slider ? jusqu’à maintenant je faisais :

  1. <input type="submit" value=" Ajouter " name="ajouter" />
  2.  
  3. if(isset($_POST['ajouter'])){
  4.  
  5. ......
  6.  
  7.  
  8. }


mais je vois pas comment récupérer la valeur du slider maintenant.

- et pour finir, si j'ai 2 slider sur la page dans le même fieldset, comment ça fonctionne ?
  • Commenter cette réponse |
Score
0
òh
òi
|
Voici ce que j'ai fait pour tester:

1/ Création d'un fichier slider.js:
  1. function slider (a_init, a_tpl) {
  2. this.f_setValue = f_sliderSetValue;
  3. this.f_getPos = f_sliderGetPos;
  4. // register in the global collection
  5. if (!window.A_SLIDERS) {
  6. window.A_SLIDERS = [];
  7. }
  8. this.n_id = window.A_SLIDERS.length;
  9. window.A_SLIDERS[this.n_id] = this;
  10. // save config parameters in the slider object
  11. var s_key;
  12. if (a_tpl) {
  13. for (s_key in a_tpl) {
  14. this[s_key] = a_tpl[s_key];
  15. }
  16. }
  17. for (s_key in a_init) {
  18. this[s_key] = a_init[s_key];
  19. }
  20. this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue);
  21. if (this.n_value == null) {
  22. this.n_value = this.n_minValue;
  23. }
  24. // generate the control's HTML
  25. document.write('<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' + '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>');
  26. this.e_base = get_element('sl' + this.n_id + 'base');
  27. this.e_slider = get_element('sl' + this.n_id + 'slider');
  28.  
  29. // safely hook document/window events
  30. if (document.onmousemove != f_sliderMouseMove) {
  31. window.f_savedMouseMove = document.onmousemove;
  32. document.onmousemove = f_sliderMouseMove;
  33. }
  34. if (document.onmouseup != f_sliderMouseUp) {
  35. window.f_savedMouseUp = document.onmouseup;
  36. document.onmouseup = f_sliderMouseUp;
  37. }
  38. // preset to the value in the input box if available
  39. var e_input = this.s_form == null ? get_element(this.s_name) : document.forms[this.s_form] ? document.forms[this.s_form].elements[this.s_name] : null;
  40. this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1);
  41. this.e_slider.style.visibility = 'visible';
  42. }
  43.  
  44. function f_sliderSetValue (n_value, b_noInputCheck) {
  45. if (n_value == null)
  46. n_value = this.n_value == null ? this.n_minValue : this.n_value;
  47. if (isNaN(n_value))
  48. return false;
  49. // round to closest multiple if step is specified
  50. if (this.n_step)
  51. n_value = Math.round((n_value - this.n_minValue) / this.n_step) * this.n_step + this.n_minValue;
  52. // smooth out the result
  53. if (n_value % 1)
  54. n_value = Math.round(n_value * 1e5) / 1e5;
  55. if (n_value < this.n_minValue)
  56. n_value = this.n_minValue;
  57. if (n_value > this.n_maxValue)
  58. n_value = this.n_maxValue;
  59. this.n_value = n_value;
  60. // move the slider
  61. if (this.b_vertical)
  62. this.e_slider.style.top = (this.n_pathTop + this.n_pathLength - Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
  63. else
  64. this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
  65. // save new value
  66. var e_input;
  67. if (this.s_form == null) {
  68. e_input = get_element(this.s_name);
  69. if (!e_input)
  70. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with ID='" + this.s_name + "'.");
  71. } else {
  72. var e_form = document.forms[this.s_form];
  73. if (!e_form)
  74. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the form with NAME='" + this.s_form + "'.");
  75. e_input = e_form.elements[this.s_name];
  76. if (!e_input)
  77. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with NAME='" + this.s_name + "'.");
  78. }
  79. e_input.value = n_value;
  80. }
  81.  
  82. // get absolute position of the element in the document
  83. function f_sliderGetPos (b_vertical, b_base) {
  84. var n_pos = 0,
  85. s_coord = (b_vertical ? 'Top' : 'Left');
  86. var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;
  87. while (o_elem) {
  88. n_pos += o_elem["offset" + s_coord];
  89. o_elem = o_elem.offsetParent;
  90. }
  91. o_elem = o_elem2;
  92. var n_offset;
  93. while (o_elem.tagName != "BODY") {
  94. n_offset = o_elem["scroll" + s_coord];
  95. if (n_offset)
  96. n_pos -= o_elem["scroll" + s_coord];
  97. o_elem = o_elem.parentNode;
  98. }
  99. return n_pos;
  100. }
  101.  
  102. function f_sliderMouseDown (n_id) {
  103. window.n_activeSliderId = n_id;
  104. return false;
  105. }
  106.  
  107. function f_sliderMouseUp (e_event, b_watching) {
  108. if (window.n_activeSliderId != null) {
  109. var o_slider = window.A_SLIDERS[window.n_activeSliderId];
  110. o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical ? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop) : (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);
  111. if (b_watching) return;
  112. window.n_activeSliderId = null;
  113. }
  114. if (window.f_savedMouseUp)
  115. return window.f_savedMouseUp(e_event);
  116. }
  117.  
  118. function f_sliderMouseMove (e_event) {
  119. if (!e_event && window.event) e_event = window.event;
  120. // save mouse coordinates
  121. if (e_event) {
  122. window.n_mouseX = e_event.clientX + f_scrollLeft();
  123. window.n_mouseY = e_event.clientY + f_scrollTop();
  124. }
  125. // check if in drag mode
  126. if (window.n_activeSliderId != null) {
  127. var o_slider = window.A_SLIDERS[window.n_activeSliderId];
  128. var n_pxOffset;
  129. if (o_slider.b_vertical) {
  130. var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - 3;
  131. // limit the slider movement
  132. if (n_sliderTop < o_slider.n_pathTop)
  133. n_sliderTop = o_slider.n_pathTop;
  134. var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;
  135. if (n_sliderTop > n_pxMax)
  136. n_sliderTop = n_pxMax;
  137. o_slider.e_slider.style.top = n_sliderTop + 'px';
  138. n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop;
  139. } else {
  140. var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - 3;
  141. // limit the slider movement
  142. if (n_sliderLeft < o_slider.n_pathLeft)
  143. n_sliderLeft = o_slider.n_pathLeft;
  144. var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;
  145. if (n_sliderLeft > n_pxMax)
  146. n_sliderLeft = n_pxMax;
  147. o_slider.e_slider.style.left = n_sliderLeft + 'px';
  148. n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;
  149. }
  150. if (o_slider.b_watch)
  151. f_sliderMouseUp(e_event, 1);
  152. return false;
  153. }
  154. if (window.f_savedMouseMove)
  155. return window.f_savedMouseMove(e_event);
  156. }
  157.  
  158. // get the scroller positions of the page
  159. function f_scrollLeft() {
  160. return f_filterResults (window.pageXOffset ? window.pageXOffset : 0, document.documentElement ? document.documentElement.scrollLeft : 0, document.body ? document.body.scrollLeft : 0);
  161. }
  162. function f_scrollTop() {
  163. return f_filterResults (window.pageYOffset ? window.pageYOffset : 0, document.documentElement ? document.documentElement.scrollTop : 0, document.body ? document.body.scrollTop : 0);
  164. }
  165. function f_filterResults(n_win, n_docel, n_body) {
  166. var n_result = n_win ? n_win : 0;
  167. if (n_docel && (!n_result || (n_result > n_docel)))
  168. n_result = n_docel;
  169. return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
  170. }
  171.  
  172. function f_sliderError (n_id, s_message) {
  173. alert("Slider #" + n_id + " Error:\n" + s_message);
  174. window.n_activeSliderId = null;
  175. }
  176.  
  177. get_element = document.all ? function (s_id) { return document.all[s_id] } : function (s_id) { return document.getElementById(s_id) };
  178.  
  179. var A_TPL4h = {
  180. 'b_vertical' : false,
  181. 'b_watch': true,
  182. 'n_controlWidth': 100,
  183. 'n_controlHeight': 16,
  184. 'n_sliderWidth': 17,
  185. 'n_sliderHeight': 16,
  186. 'n_pathLeft' : 0,
  187. 'n_pathTop' : 0,
  188. 'n_pathLength' : 83,
  189. 's_imgControl': 'images/background.gif',
  190. 's_imgSlider': 'images/handle.gif',
  191. 'n_zIndex': 1
  192. }
  193. var A_INIT4h = {
  194. 's_form' : 0,
  195. 's_name': 'sliderValue4h',
  196. 'n_minValue' : 0,
  197. 'n_maxValue' : 100,
  198. 'n_value' : 85,
  199. 'n_step' : 1
  200. }


2/ Dans la page html, ajout de l'appel dans les headers:
  1. <script type="text/javascript" src="slider.js"></script>


3/ Là ou je veux afficher le slider dans la page html, je mets le bon formulaire et l'appel au slider:
  1. <form>
  2. <input name="sliderValue" id="sliderValue4h" type="Text" size="3" onChange="A_SLIDERS[3].f_setValue(this.value)">
  3. <input name="Submit" type="button" value="Submit" onClick="javascript:alert('You have selected '+document.getElementById('sliderValue4h').value);">
  4. </form>
  5. <script type="text/javascript">new slider(A_INIT4h, A_TPL4h);</script>


4/ Je pense à mettre les deux images (background.gif et handle.gif) dans le répertoire "images/"

5/ Ca marche :) 
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Je veux bien te croire crazycat@idn mais sur le lien que tu m'as donné, ce qui me fait le plus peur c'est d'essayer de comprendre comment le slider est créé ^^, ou comment le mettre en œuvre dans mon code a moi...

Pourrez tu m'expliquer comment arriver au même résultat que sur le lien que tu m'as donner ?

il donne le code complet mais je n'arrive pas a le mettre en oeuvre...
  • Commenter cette réponse |
Score
0
òh
òi
|
Sans javascript, ce sera impossible.
Et je ne vois pas trop ce qui fait une usine à gaz. Il suffit d'un fichier js pour tout le script (et donc un appel dans tes headers) un d'un simple petit appel là où tu veux avoir ton curseur.
  • Commenter cette réponse |
Score
0
òh
òi
, Maître Yoda |
Merci pour ta réponse, mais bon d'ajouter du javascript a mon projet n'est pas envisagable, j'ai pas envie d'avoir une usine a gaz ^^
  • Commenter cette réponse |
Score
0
òh
òi
|
Ce sera plutôt en javascript, voir en flash.

Jette un oeil sur http://www.daftlogic.com/sandbox-javascript-slider-cont...
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS