herdo.be

Quand on a besoin d’un script qui scroll verticalement des éléments html et qu’on ne veut pas downloader tout prototype.js avec moo et/ou script.aculo.us ben on est toujours débouté.

Donc j’ai décidé de le faire moi même.
Il n’est pas merveilleux ni parfait mais en tout cas il est bien utile.

Libre à qui veut de l’utiliser, le modifier et le parfaire.
J’aimerais simplement être averti dans ce cas.

Voici une page exemple de ce que fait le script de scrolling vertical.

Et voici le code du scrolling vertical.

// 2007 © Stéphane Meermans
// sme@herdo.be
//
/*-*/
//
var masterId=”Scroller_Container”;//ID du div contenant les éléments à déplacer
var typeOfElement=”div”;//le type d’élément à déplacer
var prefixeElem=”SC_”;//premiers caractères de l’ID des éléments a déplacer
var speed=10;//vitesse de rafraîchissement lors du déplacement en milisecondes
var moveAtOnce=1;//nombre d’éléments à déplacer entre chaque pose
var waitTime=2;//temps de pose entre chaque mouvement, en secondes
var elementHeight=90;//hauteur de chaque élément à déplacer
var elementWidth=540;//largeur de chaque élément à déplacer
var elementMargin=2;//marge de chaque élément à déplacer (attention identique pour Top Right Bottom et Left)
var elementPadding=2;//padding de chaque élément à déplacer (attention identique pour Top Right Bottom et Left)
var elementBorder=1;//largeur du bordde l’élément
var elementBorderColor=’#fff’;//couleur du bord de l’élément (laisser vide ‘ ‘ si non nécessaire)
var elementBackgroundColor=’#999′//couleur de fond de l’élément (laisser vide ‘ ‘ si non nécessaire)
var elementFontColor=”;//couleur de la police dans l’élément

//
/*—*/
var totalMargin = elementMargin*2;var totalPadding = elementPadding*2;var totalBorder=elementBorder*2;var realHeight=elementHeight-totalMargin-totalPadding-totalBorder;var realwidth=elementWidth-totalMargin-totalPadding-totalBorder;var totalHeight=elementHeight+elementMargin+elementPadding-totalBorder;var totalwidth=elementWidth+elementMargin+elementPadding-totalBorder;var elapsedTime=0;
var arrayOfElement=;var arrayOfStyle=;var topPos,tempPos,finalPos;var masterDiv;var tempTwo;

function placeElem(){

for(var i =0; i<arrayOfElement.length;i++){
var tempTopPos=((elementHeight)*i);
arrayOfElementi.style.top=tempTopPos+’px’;
arrayOfElementi.style.position=”absolute”;
arrayOfElementi.style.margin=elementMargin+”px”;
arrayOfElementi.style.padding=elementPadding+”px”;
arrayOfElementi.style.height=realHeight+”px”;
arrayOfElementi.style.width=realwidth+”px”;
arrayOfElementi.style.border=elementBorder+”px solid “+elementBorderColor;
if(elementBackgroundColor!=”){
arrayOfElementi.style.backgroundColor=elementBackgroundColor;
}
if(elementFontColor!=”){
arrayOfElementi.style.fontColor=elementFontColor;
}
}
tempPos=0;

}
function initVars(){
masterDiv=document.getElementById(masterId);
masterDiv.style.overflow=”hidden”;
masterDiv.style.position=”relative”;
var tempArray=masterDiv.getElementsByTagName(typeOfElement);
finalPos=0-elementHeight;
tempTwo=moveAtOnce;
for (var i=0; i<tempArray.length;i++){

if(tempArrayi.id.indexOf(prefixeElem)!=-1)
{
arrayOfElement.push(tempArrayi);

}
}
placeElem();
waiter();
}

function waiter(){
elapsedTime++;
if(elapsedTime==waitTime)
{
tempTwo=moveAtOnce;
elapsedTime=0;
playScroll();

} else{
setTimeout(”waiter();”,1000);
}

}

function playScroll(){
if(tempPos>finalPos){
tempPos-=1;
for(var i=0; i<arrayOfElement.length;i++){
elemPos=i*elementHeight;
arrayOfElementi.style.top=(elemPos+tempPos)+”px”;
}
setTimeout(”playScroll();”,speed);
} else{
tempTwo–;
var tempElem=arrayOfElement.shift();
arrayOfElement.push(tempElem);
placeElem();
if(tempTwo==0){
waiter();
}else{
playScroll();
}
}

}

Je pense que les commentaires dans le script suffisent mais si ce n’est pas le cas, laissez moi un mail ou un comment.

Bon ammusment