Boite de texte type scrollbar avec scroll vertical

Télécharger le projet
Commenter

Description

Le principe :

Permet de reprendre le contenue d'un texte dans une balise html et de le transformer en boite qui fait defiler le texte.

Cette méthode a pour moi plusieurs avantages :

1.C'est une classe, donc très souple et facilement reprogrammable
2.de generer un code HTML séparer du javascript et du css.( dans l'exemple c'est dans la meme page mais bon)
3.Si le javascript n'est pas activer le css joue son rôle de mise en forme et overflow:auto intervient.
4.Elle peut gerer autant de texte que souhaiter.
5. Gestion de la molette sous ie et curseur.

Désolé pour la mise en forme du script (mais dans dreamweaver ca doit etre mis en forme correctement).
J'espère que le script est asser commenter.

Voila,c'est ma 1er source, j'aimerais l'avis de la communauté sur mon code.

Le zip est composé d'un js, page html et dossier avec 2 images.

Source / Exemple : 


var box	= new Array()																	;	//	Tableau contenant les futurs boites

function boite( id)	{
	var 
		page			,
		y_pos			,
		vitesse = 10		,
		ie		= (navigator.appName=="Microsoft Internet Explorer")? 1 :0,				//	Teste rapide du navigateur pour certains calcul de largeur de calque
		t		= new Array(),
		id_tmp
	;

	//	Recupère les informations de la balise a remplacer
	id_tmp		= document.getElementById(id)											;
	text		= id_tmp.innerHTML														;
	longueur	= id_tmp.offsetWidth													;
	hauteur 	= id_tmp.offsetHeight													;
	//	Redefinis quelques propriété de la balise "usurpé"...
	with(id_tmp){
		innerHTML	= ''																;	//	Supprime le texte
		className	= ''																;	//	Supprime ca classe de base
		with(style)	{
			position	='relative'	;
			overflow	='hidden'	;
			styleFloat	='left'		;
			cssFloat	='left'		;
		}
	};
	
	//	Création des objets DOM
	t.b 		= document.createElement('div')											;	//	Créer la boite
	t.b.id		= id+"_cadre"
	t.texte		= document.createElement('div')											;	//	Zone de texte
	t.texte.id 	= id+"_texte"
	t.sV		= document.createElement('div')											;	//	Zone du scrollbar vertical
	t.sV.id		= id+"_sV"																;	//	Bouton haut
	t.sV_H		= document.createElement('a')										
	t.sV_H.id 	= id+"_up"							
	t.sV_B		= document.createElement('a')											;	//	Bouton bas
	t.sV_B.id 	= id+"_down"									
	t.sV_E		= document.createElement('span')										;	//	Espace entre les 2 boutons
	t.sV_E.id 	= id+"_esp"
	t.sV_D		= document.createElement('span')										;	//	Barre de défilement
	t.sV_D.id	= id+"_def"														
	t.img_h		= document.createElement('img')											;
	t.img_b		= document.createElement('img')											;
	t.txt		= document.createTextNode("")											;	//	Créer le node du texte
	t.texte.appendChild(t.txt)															;	//	Rattache le texte txt a texte 
	
	box[id]		= new Array()															;	//	On Créer un nouveau tableau
	bx			= new Array()															;	//	Nouveau tableau reference des objets qui vont etres créer.
	box[id].obj	= new Array()															;	//	reférence pour appel des objets 
	
	//	Integration des objets DOM dans la pages
	bx.txt		= t.b.appendChild	( t.texte)											;	//	Rattache texte a la boite
	bx.b_H_I	= t.sV_H.appendChild( t.img_h)											;	//	rattache l'image au lien haut	
	bx.b_B_I	= t.sV_B.appendChild( t.img_b)											;	//	Rattache l'image au lien bas
	bx.b_H		= t.sV.appendChild	( t.sV_H)											;	//	Lien haut 
	bx.sV_E		= t.sV.appendChild	( t.sV_E)											;	//	spaceur
	bx.sV_D		= t.sV_E.appendChild( t.sV_D)											;	//	spaceur
	bx.b_B		= t.sV.appendChild	( t.sV_B)											;	//	Lien bas
	bx.scrl		= t.b.appendChild	( t.sV)												;	//	Rattache le scrollbar a boite
	bx.b 		= id_tmp.appendChild( t.b)												;	//	Créer la boite
	
	//	Applique style
	//	Images > ! Placer en début pour eviter bug ie par défaut prend 30px pour les images
	with( bx.b_H_I)	{																	;	//	Image du haut
		src="image/up.png";
		style.width="9px";
		style.height="9px"
	};var i_H_lg = parseInt( bx.b_H_I.offsetWidth),i_H_ht = parseInt( bx.b_H_I.offsetHeight)
	with( bx.b_B_I)	{																	;	//	Image du bas
		src="image/down.png";
		style.width="9px";
		style.height="9px"
	};var i_B_lg = parseInt( bx.b_B_I.offsetWidth),i_B_ht = parseInt( bx.b_B_I.offsetHeight)
	with( bx.b_B)	{																	;	//	Lien haut (balise <a>)
		with(style){
			display= "block";
			width=i_H_lg+"px";
			height=i_H_ht+"px"
		}
	};var b_B_lg = parseInt( bx.b_B.offsetWidth),b_B_ht = parseInt( bx.b_B.offsetHeight)	
	with( bx.b_H)	{																	;	//	Lien bas (balise <a>)
		with(style){
			display="block";
			width= i_B_lg+"px";
			height= i_B_ht+"px";
		}
	};var b_H_lg = parseInt( bx.b_H.offsetWidth),b_H_ht = parseInt( bx.b_H.offsetHeight)	
	with( bx.b)		{																	;	//	calque principal 
		with( style){
			width=longueur+"px";
			height=hauteur+"px";
			clip= "rect(0px, "+longueur+"px, "+hauteur+"px, 0px)";
		}
	};var b_ht 	 = parseInt(bx.b.offsetHeight),b_lg = parseInt(bx.b.offsetWidth)
	with( bx.sV_E)	{																	;	//	Calque d'espace du scroll Vertical 
		with( style){
			height=b_ht-(b_H_ht+b_B_ht+((ie)? 4 : 0))+"px"
			width=i_B_lg+"px"
		}
	}
	var sV_ht = parseInt( bx.sV_E.offsetHeight)
	
	with( bx.scrl)	{																	;	//	Calque scroll vertical contenant les img,a, et espace scroll vertical
		with( style){
			position= "relative";
			left= longueur-(b_B_lg+( (ie)? 2:0))+"px";
			width= b_B_lg+( (ie)? 2:0)+"px";
			height= b_ht+"px"
		}
	};var s_lg = parseInt( bx.scrl.offsetWidth)
	with( bx.txt)	{																	;	//	Calque du texte
		with( style){
			top= 0+"px";
			width=longueur-( s_lg+((ie)? 4 : 0))+"px";
			height= "auto"
		}
	}
	with( bx.sV_D)	{																	;	//	barre de défillement vertical
		with(style)	{
			display="block"
			position="relative";
			top="0px"
			width="auto";
			height="100%";
			backgroundColor="#ffffff"
		}
	}
	
	//	Applique le css de la feuilles de style d'origine
	bx.b.className		= "box"
	bx.txt.className	= "box_texte"
	bx.scrl.className	= "scroll_V"
	bx.sV_E.className	= "scroll_V_esp"
	
	//	Stock les informations propre a chaque objet
	bx.id				= id_tmp														;	//	Stock le nom de l'id parent 
	bx.ie				= ie															;	//	Test navigateur
	bx.css				= bx.txt.style													;	//	Raccourcie style pour texte
	bx.timer			= 0																;	//	objet de l'interval initialement 0
	bx.txt.innerHTML	= text															;	//	On intègre le texte recupere de la balise d'origine id
	bx.delai			= (ie)? 50:3													;	//	Interval de rappel monter/descendre  regler en fonction ie/firefox
	bx.vitesse			= parseInt( vitesse)											;	//	arrondie vitesse
	bx.v_pos			= parseInt( bx.css.top)											;	//	arrondie top du div [box[id]]_texte
	box[id].top			= bx.v_pos
	box[id].obj			= bx
	
	//	Création des fonctions associées au nouvel objet
	box[id].monter	= function(e,a)		{												//	Appeler par onmousedown,onmousewheel,le par interval									
		var el	= box[e].obj,
			lm	= parseInt(el.txt.offsetHeight)-(parseInt(el.id.offsetHeight)	)		,	//	Calcul la limite a ne pas dépasser 
			maj	=	'box["'+e+'"].monter("'+e+'")'										;	//	Créer le rappel de la fonction

		if(parseInt(el.css.top)>-lm)	{												//	Dans le cas ou c'est bon
			el.sV_D.style.top	= (box[id].scrolling)? box[id].pos()+"px" : ''			;	// box[id].scrolling>ligne 181 | on déplace la barre de défilement 
			el.css.top			= parseInt( el.css.top)-( el.vitesse)+"px"				;	//	On Decremente la hauteur du calque txt
			
			if(a!=false)	{															//	Si c'est par onmousedown,onmousewheel
				box[id].timer	= setTimeout( maj, el.delai)							;	//	 on initialise l'interval et la stock
			}
		}
	}
	box[id].descendre = function(e,a)	{												//	Appeler par onmousedown,onmousewheel,le par interval
		var el	= box[e].obj,
			maj	='box["'+e+'"].descendre("'+e+'")'										;	//	Créer le rappel de la fonction
		if(parseInt(el.css.top)<box[e].top)	{											//	Dans le cas ou c'est bon
			el.sV_D.style.top	= (box[id].scrolling)? box[id].pos()+"px" :''			;	// Meme princpe que pour box[id].monter
			el.css.top			= parseInt(el.css.top)+(el.vitesse)+"px"				;	//	Idem

			if(a!=false)	{															;	//	Idem
				box[id].timer	= setTimeout( maj, el.delai)							;	//	Idem
			}
		}
	}
	box[id].pos	= function()			{												//	Calcul en fct de la position du texte la position de la barre de défilement
		var el	= box[id].obj,
			tHp	= Math.abs((el.txt.offsetTop*100)/el.txt.offsetHeight)					;
		return parseInt( (tHp/100)*el.sV_E.offsetHeight)								;	//	Renvoie le resultats ligne 155 & 157
			
	}
	box[id].initScroll	= function()	{												//	Gestion de positionement du scroll vertical
		es	= box[id].obj.sV_E.offsetHeight												;	//	Hauteur de la zone entre les 2 boutons
		Ht	= box[id].obj.txt.offsetHeight												;	//	Hauteur total du texte 
		Hb	= box[id].obj.id.offsetHeight												;	//	Hauteur du div conteneur
		pHb	= (Hb*100)/Ht																;	//	Calcul en % de la taille  
		box[id].scrolling = false														;	//	Initialise cette variable pour le scrolling
		if(Hb<Ht)	{																	//	Si le texte necessite le scrolling on l'active
			box[id].obj.sV_D.style.top	= "1px"											;	//	Positionne la barre de défilement
			box[id].obj.sV_D.style.height = parseInt((pHb/100)*es)+"px"					;	//	Calcul la hauteur de la barre de défilement
			box[id].scrolling = true													;
		}	
	}
	if(ie)	{																			//	Traitement curseur et scroll de la molette spécifique a IE
		with( bx.b_B){style.cursor="hand"};with( bx.b_H){style.cursor="hand"}
		box[id].wheel	= function(id)	{
			if (event.wheelDelta >= 120)	{
				box[id].descendre(id,false)
        		box[id].descendre(id,false)
				box[id].descendre(id,false)
			}
    		else if (event.wheelDelta <= -120)	{
				box[id].monter(id,false)
				box[id].monter(id,false)
				box[id].monter(id,false)
			}
		}
	}
	box[id].load = function()			{												;	//	Charge les evenements de la sourie
		el					= box[id].obj
		el.b_H.onmousedown	= function(){box[id].descendre(id)}
		el.b_B.onmousedown	= function(){box[id].monter(id)}
		el.b_H.onmouseup	= function(){clearTimeout(box[id].timer)}
		el.b_B.onmouseup	= function(){clearTimeout(box[id].timer)}
		el.id.onmousewheel	= function(){box[id].wheel(id)}
	}
	
	box[id].load()																		;	
	return box[id]																		;	//	Remplace box[id] par l'objet créer
}

Conclusion :


Version 0.1b

- Pas de drag&drop sur la barre de défilement pour l'instant.
- Le calcul de la barre de défilement n'est pas encore exact a 100%. (si quelqu'un a une idée... merci de me le dire).
- Pas de sniffeur pour les navigateurs ( il y a 1 seul document.getElementById()) mais ca viendra.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (celeg)