Class barre de défilement (scrollbar) javascript

Soyez le premier à donner votre avis sur cette source.

Vue 12 836 fois - Téléchargée 1 124 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

Messages postés
618
Date d'inscription
mercredi 4 avril 2007
Statut
Membre
Dernière intervention
27 août 2010
2
Bonjour,
ça marche sur Safari mac. Je peux pas dire pour la souris, j'utilise une palette graphique.
Bravo
Messages postés
16
Date d'inscription
mercredi 2 mars 2005
Statut
Membre
Dernière intervention
17 décembre 2007

super, ça marche vraiment mieux comme ça...
ne reste que la molette qui fonctionne pas pour moi : ubuntu 9.04 avec Firefox
par contre ça fonctionne avec Opéra 9.64 (toujours Linux), mais la molette n'est-elle pas inversée ?
- quand je tourne vers moi, le défilement devrait descendre... et là ça monte...
en tout cas bien joué !
;o)
Messages postés
40
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 août 2009

Je viens de la mettre à jour à l'instant.

->Amélioration de la vitesse de défilement de base
->Changement du nom du répertoire
->Correction de mille et un bugs divers
->Amélioration de la vitesse de la molette
->Plus de perte de contrôle lorsque l'on déplace la barre avec le curseur !

Cordialement
TheWeasel47
Messages postés
16
Date d'inscription
mercredi 2 mars 2005
Statut
Membre
Dernière intervention
17 décembre 2007

ce qui me gênait était la vitesse de défilement, pour l'utilisateur... j'avais pas vu que c'était configurable alors je jette un œil... ;o)
Messages postés
40
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 août 2009

1) Effectivement, sous Windows on oublie le respect de la casse donc je corrige dessuite le nom du répertoire(Je le mettrai à la prochaine Mise à jour)

2)Difficile à utiliser ???? comment ça d'un point de vue développeur ou utilisateur ?
3)pour ce qui est de la vitesse de défilement ut peux la changer grace aux méthodes suivante :
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 3)
Barre.ChangerPasDeplacementH(10); //Change le pas de déplacement horizontal (par défault 3)

4)jQuery je ne sais pas trop ...je vais me pencher sur le problème.

5)Pour FireFox 3 j'ai testé tout fonctionne sur windows mais Ubuntu je n'ai pas eu l'occasion ...Je vais voir.

Merci pour ces remarques.
Bien Cordialement
THeWeasel47
Afficher les 11 commentaires

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.