Class barre de défilement (scrollbar) javascript

Soyez le premier à donner votre avis sur cette source.

Vue 12 270 fois - Téléchargée 1 064 fois

Description

Eternel problème dans le développement Web, les "scrollbar" qui sont peu ou pas du tout controlable. d'où l'intérêt de les refaire. Alors voila une petite class Javascript assez complète et simple d'utilisation qui permet de gérer les scrollbar dans un div.

Testé sous les navigateurs suivant :
-> INTERNET EXPLORER 7
-> Google Chrome 2.0
-> FireFox 1.0 jusqu'à 3.5
-> Netscape 7 (Tout fonctionne sauf la roulette de la souris)
-> Opera 8.54 (Tout fonctionne sauf la roulette de la souris)
-> Opera 9.02

(si vous réalisez d'autres tests faites le moi savoir).

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Test du défilement</title>
		<script language="javascript" src="js/BarreDefilement.js" version="1.6"></script>
		<script language="javascript">
			var Barre;
			
				
			function Envoyer_Message(){				
				document.getElementById("Tchat").innerHTML=document.getElementById("Tchat").innerHTML + "<b>Eric >></b>" + document.getElementById("Dial").value+"<br />";
				document.getElementById("Dial").value="";
				Barre.ActualiserContenuBarre();
				
				
			}
			
			function CreerBarre(){
				Barre= new BarreDefilement("Tchat");					
				Barre.DefinirHauteurBarre(300); //Réajuste automatiquement si le contenu d'origine a deformer le calque principale
				Barre.DefinirEpaisseurBarres(30); //Definis la largeur des deux barres de défilement
				
				
				var BV=Barre.ObtenirBarreVerticale(); // Retourne la barre de défilemnt verticale
				BV.style.backgroundImage='url(./img/fondbarre.jpg)';
				
				var IH=Barre.ObtenirIconeHaut(); //renvoie le div contenant la fleche du haut
				IH.style.backgroundImage='url(./img/fleche_haut.gif)';
				IH.style.height="30px";
				var IB=Barre.ObtenirIconeBas(); //renvoie le div contenant la fleche du bas
				IB.style.backgroundImage='url(./img/fleche_bas.gif)';
				IB.style.height="30px";
				Barre.RecalculTailleCurseurV(); //recalcul la hauteur du curseur vertical
				Barre.RecalculPositionCurseurV(); //recalcul la position du curseur verticale
				
				var BH=Barre.ObtenirBarreHorizontale();
				BH.style.backgroundImage='url(./img/fondbarre.jpg)';
				var IG=Barre.ObtenirIconeGauche(); //renvoie le div contenant la fleche du haut
				IG.style.backgroundImage='url(./img/fleche_gauche.gif)';
				IG.style.width="30px";
				var ID=Barre.ObtenirIconeDroite(); //renvoie le div contenant la fleche du bas
				ID.style.backgroundImage='url(./img/fleche_droite.gif)';
				ID.style.width="30px";
				Barre.RecalculTailleCurseurH(); //recalcul la hauteur du curseur vertical
				Barre.RecalculPositionCurseurH(); //recalcul la position du curseur verticale*/

				
				
				//AUTRE METHODES
				 //	Barre.ObtenirBarreHorizontale(); // Retourne la barre de défilemnt horizontale
				 //	Barre.ObtenirIconeMilieuDefilantV(); // Retourne la curseur de défilemnt verticale
				 // Barre.ObtenirIconeMilieuDefilantH(); // Retourne la curseur de défilemnt horizontale
				 //	Barre.ObtenirConteneurGlobal(); // Retourne le calque qui contient tout(Div principale,barre de défilements...)				 
				 // Barre.DefinirEpaisseurBarres(30); //Definis la largeur des deux barres de défilement
				 // 	->Barre.DefinirEpaisseurBarreHorizontale(30) //Definis la largeur de la barres  horizontale
				 // 	->Barre.DefinirEpaisseurBarreVerticale(30) //Definis la largeur de la barres  verticale
				 // Barre.ActualiseAutomatiquement(1000); // Permet une actualisation automatique toutes les 1000ms (parametre changeable)				 
				 // Barre.ActualiseManuellement(); //Repasse en actualisation manuel(arrete l'actualisation automatique) (méthode par défault)
				 // Barre.ActualiserContenuBarre(); //Permet une actualisation manuelle (important lors du rajout de contenu si le mode actualisation n'est pas définit en automatique...)
				 // Barre.DeplacerBarreVEnBas(); //Fait descendre la barre tout en bas
				 // Barre.DeplacerBarreVEnHaut(); //Fait monter la barre en haut
				 // Barre.DeplacerBarreHADroite(); //Déplace la barre à droite
				 // Barre.DeplacerBarreHAGauche(); //Déplace la barre à gauche
				 // Barre.ChangerPasDeplacement(10); //Change les pas de déplacement vertical et horitontale (par défault 3)
				 // Barre.ChangerPasDeplacementV(10); //Change le pas de déplacement vertical (par défault 5)
				 // Barre.ChangerPasDeplacementH(10); //Change le pas de déplacement horizontal (par défault 5)
				 // Barre.DeplacerPrincipalVenPx(10); //Déplace le centre de X pixel
				 // Barre.ChangerVisibiliteBarres(2); //Change la visibilité des deux barres (1->Visible,2->Cache,3->auto)
				 // Barre.ChangerVisibiliteBarreV(2); //Change la visibilité de la barre Verticale (1->Visible,2->Cache,3->auto)
				 // Barre.ChangerVisibiliteBarreH(2); //Change la visibilité de la barre Horizontale (1->Visible,2->Cache,3->auto)
				 // Barre.ActiverDeplacementMouseOver(true); //Active ou désactive l'utilisation des barres au simple survol de la souris (désactivé par défault)
				 // Barre.ActiverDeplacementMouseClick(true); //Active ou désactive l'utilisation des barres au click de la souris (Activé par défault)
				 // Barre.ActiverChangementFondPassageSouris(false);; //Active ou désactive le changement de couleur des éléments de la barre lors du survol de la souris
				 // Barre.DefinirCouleurFondBase("#FF0000"); //Définis la couleur de fond des barres
				 // Barre.DefinirCouleurFondSecondaire("#00FF00"); //Définis la couleur de fond des barres au passage de la souris
			}
			
			
		</script>
	</head>
	<body onload="CreerBarre();">
		<center><h1>Exemple de barre de défilement de DIV</h1></center>
		<center>
			<div id="Tchat" style="padding: 3px; border: 1px solid black;width: 500px; height: 300px;text-align: left;" ></div>
			Parler : &nbsp; <input type="text" size="60" Onkeydown="if(event.keyCode==13){Envoyer_Message();}" name="Dial" id="Dial"/>&nbsp;<input type="button" value="Envoyer" Onclick="Javascript:Envoyer_Message();" />
			<br />&nbsp;<br />
			<h2>Quelques méthodes de la barre horizontale</h2>
			<input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(1);" />&nbsp;&nbsp;<input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(2);" />&nbsp;&nbsp;<input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(3);" /><br />&nbsp;<br />
			<input type="button" value="Barre à gauche" Onclick="Javascript:Barre.DeplacerBarreHAGauche();" />&nbsp;&nbsp;<input type="button" value="Barre à Droite" Onclick="Javascript:Barre.DeplacerBarreHADroite();" /><br />&nbsp;<br />
			<input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(800);" />&nbsp;&nbsp;<input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(300);" /><br />&nbsp;<br />
			<br />&nbsp;<br />
			<h2>Quelques méthodes de la barre verticale</h2>
			<input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(1);" />&nbsp;&nbsp;<input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(2);" />&nbsp;&nbsp;<input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(3);" /><br />&nbsp;<br />
			<input type="button" value="Descendre Barre" Onclick="Javascript:Barre.DeplacerBarreVEnBas();" />&nbsp;&nbsp;<input type="button" value="Monter Barre" Onclick="Javascript:Barre.DeplacerBarreVEnHaut();" /><br />&nbsp;<br />
			<input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(200);" />&nbsp;&nbsp;<input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(500);" /><br />&nbsp;<br />
		</center>
	</body>
</html>

Conclusion :


Merci de me signaler toutes incompatibilités, bugs, amélioration ou toutes remarques constructives sur ce projet.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour,

Chez moi sur Firefox 3, cela ne fonctionne pas.

Sur la console, il est écrit "barreDefilement est indéfini" et "barre est indéfini".

JDMCreator
TheWeasel47
Messages postés
40
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 août 2009
-
Diantre !!!!
Je viens de tester sur FF1.5 et FF2.0(standalone), aucun problème !!! Aurais tu des outils de développeur qui utilisent d'autres moteurs javascript ou tes paramètres de sécurités peu être ?
abdelaziz_info
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017
-
Bonjour,
Et les options de la roulette de ta souris ??
TheWeasel47
Messages postés
40
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 août 2009
-
Je n'y avais pas pensé !!!! mais maintenant que tu le dis je vais les rajouter dans la prochaine version :D
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Ah j'ai enfin réussi à l'afficher !

Ça fonctionne sur Safari 3 sans problème ;)

Petite chose : Lorsque l'on monte la barre trop rapidement, on perd le contrôle sur la barre (à cause de onMouseOut sûrement).

Beau travail ;)

JDMCreator

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.