CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 20 03:17:42

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT

Information sur la source

Note :

9,00 / 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 539 / 672

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 !

Slider
- CSS
  - slider.css 1 231 octets
- IMAGES
  - bg_slider_horizontal.png 166 octets
  - bg_slider_vertical.png 161 octets
  - cursor_horizontal.png 454 octets
  - cursor_horizontal_hover.png 459 octets
  - cursor_vertical.png 375 octets
  - cursor_vertical_hover.png 378 octets
- JS
  - slider.js 9 275 octets
- doc.txt 1 876 octets
- test.html 3 670 octets
- test.js 3 038 octets

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

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous

IMPLEMENTATION DE HASHTABLE par ousous

JAVASCRIPT.UTIL.ITERATOR par ousous

PALETTE DE COULEURS par titnome

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

ROTATION DES ÉLÉMENTS D'UN PAGE WEB par yoyo17560

FENETRE MULTIPLE par kazma

TRAITER LES RÉPONSES DES APPLICATIONS FOURNIES À L'INVITE DE... par bultez

MENU CONTEXTUEL PERSONNALISABLE POUR CLIC DROIT par rubiks10

MENU CONTEXTUEL PERSONNALISABLE AVEC CHOIX D'IMAGES 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

Derniers Blogs

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

Forum

COMMENT CRéER UNE COMPTEUR EN JAVASCRIPT? par stefoulefou

MODIFIER DYNAMIQUEMENT LES COORDONNéES MAP D'UNE IMAGE CLIQUABLE par eguignier

APPELER UNE ANCRE D'UNE AUTRE PAGE AU COEUR D'UNE FONCTION JAVASCRIPT par MissArmande

RE : TRI PAR ORDRE ALPHABéTIQUE par PetoleTeam

RE : TRI PAR ORDRE ALPHABéTIQUE par El_CaNaRdO

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods