Class barre de défilement (scrollbar) javascript
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).
Merci de me signaler toutes incompatibilités, bugs, amélioration ou toutes remarques constructives sur ce projet.
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 : <input type="text" size="60" Onkeydown="if(event.keyCode==13){Envoyer_Message();}" name="Dial" id="Dial"/> <input type="button" value="Envoyer" Onclick="Javascript:Envoyer_Message();" /> <br /> <br /> <h2>Quelques méthodes de la barre horizontale</h2> <input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(1);" /> <input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(2);" /> <input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreH(3);" /><br /> <br /> <input type="button" value="Barre à gauche" Onclick="Javascript:Barre.DeplacerBarreHAGauche();" /> <input type="button" value="Barre à Droite" Onclick="Javascript:Barre.DeplacerBarreHADroite();" /><br /> <br /> <input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(800);" /> <input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirLargeurBarre(300);" /><br /> <br /> <br /> <br /> <h2>Quelques méthodes de la barre verticale</h2> <input type="button" value="Montrer Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(1);" /> <input type="button" value="Cacher Barre" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(2);" /> <input type="button" value="Visibilité Automatique" Onclick="Javascript:Barre.ChangerVisibiliteBarreV(3);" /><br /> <br /> <input type="button" value="Descendre Barre" Onclick="Javascript:Barre.DeplacerBarreVEnBas();" /> <input type="button" value="Monter Barre" Onclick="Javascript:Barre.DeplacerBarreVEnHaut();" /><br /> <br /> <input type="button" value="Diminuer Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(200);" /> <input type="button" value="Agrandir Zone" Onclick="Javascript:Barre.DefinirHauteurBarre(500);" /><br /> <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
- Class barre de défilement (scrollbar) javascript
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Fichier class ✓ - Forum Java
- Défilement automatique page web - Forum Javascript / DHTML
- Javascript poo - Conseils pratiques -Javascript
- Javascript class - Forum Javascript / DHTML
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.