begin process at 2010 02 10 10:24:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :7 186 / 604
Auteur : kgilbert

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent 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.

 Sources de la même categorie

Source avec Zip Source avec une capture CALCULS RAYNAUX V2 par Ali Bibi
Source avec Zip Source avec une capture VALIDATION D'UN FORMULAIRE par grarestephane
Source avec Zip Source avec une capture CHAT VIRTUEL par grarestephane
Source avec Zip Source avec une capture AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

CONSOLE DOS par djebbipgm
ROTATION DES ÉLÉMENTS D'UN PAGE WEB par yoyo17560
Source avec Zip Source avec une capture FENETRE MULTIPLE par kazma
Source avec Zip Source avec une capture TRAITER LES RÉPONSES DES APPLICATIONS FOURNIES À L'INVITE DE... par bultez
Source avec Zip MENU CONTEXTUEL PERSONNALISABLE POUR CLIC DROIT par rubiks10

Commentaires et avis

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.

Commentaire de djmmix le 18/08/2008 13:25:15 10/10

pas mal la source je vais tester sa :)

Commentaire de djmmix le 18/08/2008 13:28:01

ha oui vraiment utile je te remercie beau boulot

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+

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++

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.

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++

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 !

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.

Commentaire de kazma le 19/08/2008 15:57:49

bonjour

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

ca fait vulgaire

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

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

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

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

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);

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.

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

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 ?

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.

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

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.

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.

@+

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...

Comparez les prix


BORDERLANDS pour Windows
Entre 50€ et 50€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,655 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)