Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT


Information sur la source

Catégorie :Formulaire Classé sous : Sliders, Élément, Windows, Élément Formulaire, Valeur Variable Niveau : Débutant Date de création : 17/08/2008 Date de mise à jour : 27/08/2008 20:29:04 Vu / téléchargé: 4 082 / 306

Note :
9 / 10 - par 4 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (23)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
Cette source sert à intégrer un Slider dans vos pages Web. Qu'est-ce qu'un slider ? C'est un élément qui permet de choisir une valeur comprises entre deux nombre en déplaçant un curseur sur une piste. Comme lorsque vous modifiez le niveau du son sous Windows.

Le Slider peut être utilisé de deux façons, soit vous l'utilisez dynamiquement en utilisant la fonction CallBack, soit vous l'utilisez en récupérant sa valeur sur un retour de formulaire.

Vous pouvez ajouter des Sliders Horizontaux ou Verticaux.
 

Source

  • <html>
  • <head>
  • <title>Slider JavaScript</title>
  • <link type="text/css" rel="stylesheet" href="CSS/slider.css" />
  • <script type="text/javascript" src="JS/slider.js"></script>
  • </head>
  • <body onmousemove="move_mouse_cursor(event)" onmouseup="mouseup_slider()">
  • <div id="monSlider"></div>
  • <script type="text/javascript">
  • init_slider('monSlider',0,0,100,75,150,'');
  • </script>
  • </body>
  • </html>
<html>
<head>
<title>Slider JavaScript</title>

<link type="text/css" rel="stylesheet" href="CSS/slider.css" />
<script type="text/javascript" src="JS/slider.js"></script>

</head>

<body onmousemove="move_mouse_cursor(event)" onmouseup="mouseup_slider()">

<div id="monSlider"></div>

<script type="text/javascript">
init_slider('monSlider',0,0,100,75,150,'');
</script>

</body>
</html>

Conclusion

Le Script fonctionne parfaitement sous Internet Explorer 6.0 et sous Firefox 3.0 avec Windows Xp, je remercie ceux qui pourront tester sous d'autres navigateurs et autre systèmes d'exploitation.

J'ai ajouter deux fichiers dans le zip afin de tester, test.html et test.js, ce n'est qu'a titre démonstratif.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

19 août 2008 01:25:33 :
Les arrays sont maintenant déclarées
27 août 2008 20:29:04 :
Version 1.0.2: Je me sens plus "cool" en mettant des numéros de version. J'ai créer davantage d'alias vers mes éléments pour simplifier le code.

Commentaires et avis

signaler à un administrateur
Commentaire de kgilbert le 18/08/2008 12:56:19

Voilà, j'ai testé avec plusieurs navigateurs;

Avec Safari sous Windows XP: Aucun problème
Avec Internet Explorer 6.0 sous Windows XP: Aucun problème
Avec Internet Explorer 7 sous Windows Vista: Aucun problème
Avec Firefox 2 sous Windows XP: Aucun problème
Avec Firefox 3.0 sous Windows XP: Aucun problème
Avec Firefox 3.0 sous Windows Vista: Aucun problème

Avec Opéra 9.25 r-8827 sous Windows XP: Tout s'affiche correctement et les événements sont bien pris en compte, mais les limittes sont décalés de 2. Un maximum de 0 à 100 donne un maximum de 2 à 102.

Je mettrai le code à jour lorsque j'aurai résolu le problème.

Cordialement,
Kevin.

signaler à un administrateur
Commentaire de djmmix le 18/08/2008 13:25:15 10/10

pas mal la source je vais tester sa :)

signaler à un administrateur
Commentaire de djmmix le 18/08/2008 13:28:01

ha oui vraiment utile je te remercie beau boulot

signaler à un administrateur
Commentaire de kgilbert le 18/08/2008 13:40:16

Merci pour la note, je ne crois pas que ma source vaille 10/10, je remerci d'avance ceux qui testeront et qui noteront mon code-source. a+

signaler à un administrateur
Commentaire de nicomilville le 18/08/2008 13:46:47

Salut,

Un 10/10 ça ne se refuse pas lol...

Ce qui est je pense asez bête c'est que même si cette source vaut un 10/10 la note a été mise au piff car si on regarde le commentaire, la note a été mise dans e commentaire qui dit que Djmmix va tester sauf qu'il l'a pas encore testé donc la note est ise au piff...

Bon ça va qu'après il était satisfait...

Pour ma part, je pense que cette source peut être utile (pas a moi pour l'instant... lol)...

Je regarderai bientot le code en profondeur quand j'aurai finis mo API...

a++

signaler à un administrateur
Commentaire de kgilbert le 18/08/2008 13:58:50

Tu en profiteras pour la noter au passage,
et bonne chance pour cet API d'ouverture de fenêtre.

signaler à un administrateur
Commentaire de nicomilville le 18/08/2008 14:04:48

Oui justement quand je dit que je regarde une source en profondeur c'est pour ensuite la noter...

Désolé de ne pas avoir précisé...

Merci je te souhaite la même chose pour le bug sur opéra, sinon je t'invite a venir mettre un commentaire sur ma source (si tu la connais, ce dont je ne doute pas vu que tu as suivit la discution sur l'API)...

a++

signaler à un administrateur
Commentaire de nicomilville le 18/08/2008 15:46:03 10/10

Après avoir un peut regarde, je n'ai rien trouvé a redire sauf une chose...

Pourquoi déclare tu tes tableaux sans le mot clé "var" ?

Une autre petite question :

Comment as tu fais pour que ta fonction addEvent marche ?

Car moi dans mon code de boite de dialogue j'avais fais la même fonction avec quelques petites choses en plus et elle ne marchait pas car en fait ça me disais que le document n'était pas encore chargé, on aurai dit que la fonction n'attendait pas l'évènement mais qu'elle executait directement la fonction sans se soucier du reste...

a++

PS : comme je n'ai rien trouvé a redire, je me vois contraint de te mettre un 10/10 lol !

signaler à un administrateur
Commentaire de kgilbert le 18/08/2008 16:03:59

Bonjour, merci pour la note, cependant j'apprécierais que tu ne pollue pas trop la page de ma source, ce n'est un forum d'aide, si tu as des questions qui n'ont pas un lien direct avec la source, il me fera plaisir de t'aider avec le système de messagerie interne de CS. Ça n'a rien de perso, PM moi ;) merci encore pour la note.

signaler à un administrateur
Commentaire de kazma le 19/08/2008 15:57:49

bonjour

j'apprécierais que tu ne pollue pas trop.

ca fait vulgaire

signaler à un administrateur
Commentaire de kgilbert le 19/08/2008 16:05:20

Oui, tu as raison, je n'ai pas employé le bon terme, pardonnez-moi. Je voulais plutôt dire, de bien diriger les questions et les demandes d'aide vers les endroits appropriés, polluer dans le sens ne pas mettre le contenue à la bonne place.

Tu as testé ma source Kazma ?

Cordialement,
Kevin

signaler à un administrateur
Commentaire de kazma le 19/08/2008 17:03:56

oui je l'ai teste et ce que j'ai aprecie c'est le balayage tres complet au niveau des couleurs
et pour les  curseurs sa fonctionne tres bien

signaler à un administrateur
Commentaire de soul2006 le 26/08/2008 12:45:03

salut,
tout d abord merci bien pour ce code c'est vraiment très utile, mais j'ai une petite question il y a un mois j'essayerais de faire 4 sliders dont les valeurs de graduation sont prend d'une base SQL et en modifiant la valeur dans l'un des sliders les valeurs dans les 3 autres changent.
j'espère que tout est clair svp aidez moi
merci d'avance

signaler à un administrateur
Commentaire de kgilbert le 26/08/2008 13:19:33

Bonjour soul2006,
Tout d'abord, tu dois créer un attribut onload dans ton <BODY>

<body onload="fonctionStart()">

dans fonctionStart, tu met une requête ajax qui ira chercher tes données dans ta base SQL, si tu ne connais pas ajax, je t'invite à le découvrir en lisant des tutoriels sur le net.

note: tu peux aussi utiliser directement un language dynamique tel que le PHP:

<?php
$query = ...
if($result = mysql_query($query)){
$data = mysql_fetch_array($result);
echo 'document.getElementById(tonSlider).value = '+$data['tonChamp']+';';
}
?>

Ensuite, avec la valeur récupérée, tu modifie le champ du slider avec la réponse et tu update l'affichage:

document.getElementById(tonSlider).value = '_ta_value_';
update_value_slider(tonSlider);

Pour la modification des autres sliders, tu peux mettre une fonction en CallBack, c'est-à-dire une fonction qui sera effectuer à chaque changement de valeur. Donc, pour le slider qui doit modifier les 3 autres:

init_slider('tonSlider',0,1,100,1,150,callBackTonSlider);
init_slider('tonSlider2',0,1,100,1,150,'');
init_slider('tonSlider3',0,1,100,1,150,'');
init_slider('tonSlider4',0,1,100,1,150,'');

Dans la fonction callBackTonSlider() tu modifie les valeurs des autres sliders de la même façon, prend bien note que la valeur du slider modifié est envoyée dans la fonction callBack:

callBackTonSlider(val){

document.getElementById(tonSlider2).value = ((document.getElementById(tonSlider).value * 1) + 10);
document.getElementById(tonSlider3).value = ((document.getElementById(tonSlider).value * 1) + 20);
document.getElementById(tonSlider4).value = ((document.getElementById(tonSlider).value * 1) + 30);

update_value_slider(tonSlider2);
update_value_slider(tonSlider3);
update_value_slider(tonSlider4);

}

Les fonctions CallBack des sliders sont appelées automatiquement lors de la mise-à-jour de leurs données, donc si la valeur SQL est 75, les quatres sliders seront à 75, 85, 95 et 105 pour cette exenple. Si vous modifiez le premier slider, les autres sliders seront modifiés selon les différences de notre exemple.

Essaie, si tu as des questions, ne te gènes pas de me les poser.

Cordialement,
Kevin

signaler à un administrateur
Commentaire de kgilbert le 26/08/2008 13:22:45

petite correction, dans la fonction callBackTonSlider(), utilises plutôt:

document.getElementById(tonSlider2).value = (val + 10);

au lieu de:

document.getElementById(tonSlider2).value = ((document.getElementById(tonSlider).value * 1) + 10);

signaler à un administrateur
Commentaire de kgilbert le 26/08/2008 13:50:33

Bon !! je vais finir par l'avoir !
en fait val retourne le nom du dernier champ modifié, voici donc le bonne façon de l'écrire:

document.getElementById('slider_2').value = ((document.getElementById(val).value * 1) + 10);

note: jai aussi quelques petit guillemets plus haut, mais bon, c'est que la démonstration. Bref, bonne chance et ne te gènes pas pour des questions.

signaler à un administrateur
Commentaire de soul2006 le 26/08/2008 13:57:07

merciii bien kgilbert c'est vraiment tréés gentille je vais éssayé tout ça et demain g te dit si ça marche ou pas

signaler à un administrateur
Commentaire de XtremDuke le 27/08/2008 17:45:58

Pas mal mais pourquoi observer les événements de souris dès le chargement du DOM ?
Y'a des problèmes de positionnements lorsqu'on utilise des marges (bof pas grave tu me diras...).
Et une petite remarque : tu utilises 35 fois la fonction 'document.getElementById()'. Ne serais-ce pas judicieux d'utiliser un alias ?

signaler à un administrateur
Commentaire de kgilbert le 27/08/2008 20:24:02

Bonjour XtremDuke,
Tu utilises des marges sur quoi ? le document, div parent, slider meme ? si tu as le temps, envoie moi par courriel un exemple avec problèmes de positionnement, il me sera plus facile de troubleshooter.

Pour la fonction "document.getElementById()", tu as tout à fait raison, je met ma source à jour immédiatement, elle n'y ai à présent que 8 fois.

Pour la gestion des événements, j'avais complètement oublié que je procédait ainsi, j'avais modifier ma source pour la rendre compatible avec une autre, du coup j'ai oublié de la remettre dans son état original. Je met à jour d'ici quelques jours.

Merci de prendre le temps de consulter mon travail,
j'attend une reponse ! et pourquoi pas une note.

signaler à un administrateur
Commentaire de soul2006 le 29/08/2008 13:54:41 10/10

g t'ai donné 10/10
parce que c'est un travail trés complet merci

signaler à un administrateur
Commentaire de berkovits le 03/10/2008 21:29:13

Salut Gilbert

J'ai mis les sliders dans une table.
Les curseurs se positionnent n'importe ou dans l'ecran.

(Je suis debutant)
j'ai mis en commentaire /*position:absolute;*/ dans le fichier slider.css, le curseur se place sur le bon slider mais toujours a la position zero et non fonctionnel.
Quelles lignes faut-il modifier pour corriger ce probleme.

Merci.

signaler à un administrateur
Commentaire de kgilbert le 23/10/2008 22:43:14

Bonjour,
L'inclusion dans une table ne porte pas problème de mon coté, envoie moi ton code par message privé, s'il s'agit d'un problème du coté de ma source, je posterai une solution ici.

@+

signaler à un administrateur
Commentaire de itapirica le 27/12/2008 08:36:51 6/10

Merci mille fois pour ton script que je cherchais depuis longtemps.
Seulement, je suis plus que novice en J.S.
Peux-tu m'aider pour créer une page où les sliders afficheraient et cacheraient
des div ?
Je te fais un message privé.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

élément de formulaire [ par booth ] bonjour, je souhaiterai savoir si ya un moyen de tester si un élément de formulaire existe, si en php je crée trois boutons,mais en fonction de la dem SOS!! balise windows.open [ par Olivierp001 ] Bonjour a vous.Vu le mauvais accueil que l'on ma donné sur le chat, je tente ma chance ici.Je n'y connais rien au javascript mais je voudrais bien fin problème avec Windows.Open [ par asm123 ] En quelques mots voici mon problème,j'utilise la fonction javascript côté client "windows.open"(*) à qui je passe des paramètres.mais il arrive +/- 1 Ajouter un élément à une Drop-Down list [ par bob ] Je ne sais pas comment ajouter un élément à une drop-down list pendant que la page est en cour.Est-ce que quelqu'un pourrait m'aider.Merci Comment ajouter un élément à une drop-down list. [ par bob ] Je ne sais pas comment ajouter un élément à une drop-down list pendant que la page est en cours.Est-ce que quelqu'un pourrait m'aider S.V.P. ?Merci ms dos et windows 3.11 [ par ico19 ] Je desirerait trouver ms dos 6.22 pour le mettre sur une vielle becane qui n'a pas de lecteur cd rom. ensuite je voudrait aussi trouver ms windows 3.1 ouvrir une fenêtre sans aucun élément [ par hikker ] j'ai le pb suivant je n'arrive pas à afficher une page sans les options (scroll,barmenu...)voici mon code PopErreur = window.open(page,'','menubar=no, ecriture dans un fichier + username windows [ par math85 ] je cherche comment ecrire le nom d utilisateur de windows et la date dans un fichier en javascript au chargement d une page (onload=...)m@th85 desactivé la touche avec le logo windows [ par minicooper ] Je voudrais savoir si quelqu'un connait le code ascii de cette touche, ou son nom sous windows. Mon but étant de la desactivé dans un code a base de j Barre menu style Windows [ par cstan ] salut a vous,je galere trop depuis 2, 3 jours !!!!HELP ME !!!!Pour mon projet je doit avoir une barre style windows en bas, jusqu'a la pas compliquer


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.