5/5 (5 avis)
Vue 40 155 fois - Téléchargée 2 516 fois
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 }
24 juil. 2007 à 15:29
avez vous des idées pour activer la gestion de la mollette sur firefox?
j'ai essayé avec event.detail au lieu de event.wheelDelta mais rien à faire ça ne fonctionne toujours pas sur firefox (voir http://adomas.org/javascript-mouse-wheel/)
code:
[...]
box[id].wheel = function(id) {
[...]
else if (event.detail >= -3) {
box[id].descendre(id,false)
box[id].descendre(id,false)
box[id].descendre(id,false)
}
else if (event.detail <= 3) {
box[id].monter(id,false)
box[id].monter(id,false)
box[id].monter(id,false)
}
}
[...]
box[id].load = function() {
[...]
if (el.id.addEventListener)
el.id.addEventListener('DOMMouseScroll', box[id].wheel(id), false);
}
merci d'avance
11 août 2006 à 14:05
11 août 2006 à 14:04
12 juin 2006 à 09:12
http://www.opencube.com/ ;)
Un site que je conseille à tout le monde d'ailleurs !
10 juin 2006 à 02:30
puisque cela est ta première sources, je décide donc de faire mes remarque:
C'est très beau, mais je ne sais pas en quoi ça me servirait mais peut-être qu'un jour j'en aurais besoin (des fois ça m'arrive)!
Très belle source, au moin 6/10.
Merci
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.