Liste ul défilante utilisant script.aculo.us

Soyez le premier à donner votre avis sur cette source.

Vue 6 189 fois - Téléchargée 514 fois

Description

Cela fait pas quelque temps que je cherche une liste défilante dont le contenu n'est pas fournit en javascript, mais est directement une liste (X)HTML. Il y avait bien le script de Chmel (pour rappel : http://www.javascriptfr.com/code.aspx?ID=25084) mais je voulais que les éléments de ma liste disparaisse élément par élément.

Donc finalement j'ai utilisé mes mains et mon cerveau (surtout mes mains...) pour faire une jolie liste déroulante avec des effects script.aculo.us.

Le version de script.aculo.us utilisée est la 1.8.1
Le script à été testé sur FireFox 3.0.5 et internet explorer 6.

Source / Exemple :


Voilà le code source pour ceux qui veulent pas downloader le zip. 
Penser à ajouter les librairies scriptaculous 1.8.1 
pour que sa fonctionne :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
  <title>Scroll List</title>

  <script src="lib/prototype.js" type="text/javascript"></script>
  <script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>

  <script type="text/javascript">
  <!--
    /**

  • Constructor
  • /
function Scroller(objName, speed) { this.name = objName; this.speed = speed; this.initList(); this.setSpeed(this.speed); } /**
  • Methods
  • /
Scroller.prototype = { name:"", speed:0, currPos:0, totalHeight:'0px', action:false, /**
  • Get all list elements and move them.
  • /
scrollList : function () { if(this.action) { var list = $(this.name); var listElements = $$('#' + list.id + ' li'); var h = listElements[this.currPos].offsetHeight; for(var i=0; i<listElements.length; i++) { var currE = listElements[i]; this.moveElement(currE,-h); } this.currPos ++; if(this.currPos >= listElements.length) { this.currPos = 0; } } }, /**
  • Move up an element if it's not the first. Else put it to the end of
  • the list. .
  • /
moveElement : function(element, step) { var tempH = this.totalHeight; // create because afterFinish method can't //used this.totalHeight ?! if(element.style.top.split("px")[0] <= 0) { new Effect.Opacity(element, { from: 1.0, to: 0, duration: 0.5, afterFinish:function(){ element.style.top=tempH-element.offsetHeight+'px'; Effect.Appear(element, { duration: 0.5 }); } }); } else { new Effect.Move(element, { x: 0, y: step, mode: 'relative'}); } }, /**
  • init list elements positions.
  • /
initList : function () { var list = $(this.name); var elements = $$('#' + list.id + ' li'); var pos = 0; for(var i=0; i<elements.length; i++) { elements[i].style.top = pos + 'px'; pos = pos + elements[i].offsetHeight; } this.totalHeight = pos; }, /**
  • Allow to adjust the scrolling speed
  • speed : speed in milliseconds
  • /
setSpeed : function(speed) { setInterval(this.name + '.scrollList()',speed); }, /**
  • Allow to start the list scrolling
  • /
startScrolling : function (){ this.action = true; }, /**
  • Allow to stop the list scrolling
  • /
stopScrolling : function() { this.action = false; } } // Hack to draw a correct list when Javascript is disabled document.documentElement.className+=" hasJS"; --> </script> <style type="text/css"> ul.scroller { border:none; padding:0px; margin:0px; } ul.scroller li { padding:10px 0px 0px 15px; margin: 0px 0px 0px 5px; width:100%; list-style:none; background : url('./liststyle.gif') no-repeat left 10px; font-family:arial; font-size:11px; } .hasJS ul.scroller { position:relative; border:1px solid black; overflow:hidden; padding:0px; margin:0px; } .hasJS ul.scroller li { position:absolute; left:0px; padding:10px 0px 0px 15px; margin: 0px 0px 0px 5px; width:90%; list-style:none; background : url('./liststyle.gif') no-repeat left 10px; font-family:arial; font-size:11px; } #scroller1 {position:absolute; left:0px; top:10px; width:340px; height:300px;} #scroller2 {position:absolute; left:400px; top:10px; width:250px; height:400px;} #scroller3 {position:absolute; left:710px; top:10px; width:400px; height:200px;} </style> </head> <body> <ul id="scroller1" class="scroller"> <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. </li> <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> </ul> <ul id="scroller2" class="scroller"> <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> </ul> <ul id="scroller3" class="scroller"> <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li> </ul> <script type="text/javascript"> var scroller1 = new Scroller('scroller1',4000); var scroller2 = new Scroller('scroller2',2000); var scroller3 = new Scroller('scroller3',1500); // start all list scrolling scroller1.startScrolling(); scroller2.startScrolling(); scroller3.startScrolling(); </script> </body> </html>

Conclusion :


Voilà, tout commentaire est le bienvenu. Je suis pas un programmeur Javascript donc n'hésitez pas à me signaler les fautes que je ferais ^^

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
12
Date d'inscription
vendredi 3 janvier 2003
Statut
Membre
Dernière intervention
17 septembre 2009

Je vous fais profiter de mes modifs, ça peut servir à d'autres:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Texte Defilant Vertical en Continue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
var pas=1;
var h_fen="250px";

function scrollmrq(){
list = 'scroller1';
listElements = document.getElementById(list);

mrq.listElements = document.getElementById('scroller1');
mrq.listLength = mrq.listElements.childNodes.length;

if (parseInt(mrq.style.top) > -30 ) { // Regler la hauteur d'une ligne
// en fonction du style du texte
// pour eviter les saccades

// On fait monter la liste jusqu'a ce
// que la premiere ligne disparaisse
mrq.style.top = parseInt(mrq.style.top)-pas+"px";

} else {
// Suppression de la premiere ligne de la liste,
// et ajout de la premiere ligne a la fin de la liste
var Node = document.getElementById(list);
var NodeList = Node.getElementsByTagName("li");
var Child=NodeList.item(0);
Node.removeChild(Child);
Node.appendChild(Child);

// On redescend la liste a sa position initiale
mrq.style.top=0;
}
}

function init_mrq(){
mrq=document.getElementById("menu_defile");
fen=document.getElementById("menu_deroulant");
fen.onmouseover=function(){stoc=pas;pas=0};
fen.onmouseout=function(){pas=stoc};
fen.style.height=h_fen;
h_mrq=mrq.offsetHeight;
with(mrq.style){
position="absolute";
top=0;
}
setInterval("scrollmrq()",100); // vitesse de defilement
}

window.onload = function (){
init_mrq();
}

//-->

</script>

<style type="text/css">
div.flash {
position : absolute;
top : 50px;
left : 200px;
font-family: Arial, Tahoma, Helvetica, Sans-Serif;
font-size: 1em;
border: 1px solid #000000;
width : 340px;
height: 250px;
padding-left : 10px;
overflow: hidden;
}

#menu_deroulant {
overflow: hidden;
position: relative;
}
#menu_defile {
position: relative;
text-align:center;
}

#menu_defile ul {
border:none;
padding:0px;
margin:0px;
}
#menu_defile ul li {
padding:8px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width:100%;
list-style:none;
font-family:arial;
font-size:1.2em;
}

</style>
</head>








<li>01. Lorem ipsum dolor sit amet</li>
<li>02. Lorem ipsum dolor sit amet</li>
<li>03. Lorem ipsum dolor sit amet</li>
<li>04. Lorem ipsum dolor sit amet</li>
<li>05. Lorem ipsum dolor sit amet</li>
<li>06. Lorem ipsum dolor sit amet</li>
<li>07. Lorem ipsum dolor sit amet</li>
<li>08. Lorem ipsum dolor sit amet</li>
<li>09. Lorem ipsum dolor sit amet</li>
<li>10. Lorem ipsum dolor sit amet</li>







</html>
Messages postés
12
Date d'inscription
vendredi 3 janvier 2003
Statut
Membre
Dernière intervention
17 septembre 2009

Bon je viens de m'en sortir, j'ai pris des idées de ton script que j'ai transposé au script de Chmel, maintenant ça roule.

Merci encore
Messages postés
12
Date d'inscription
vendredi 3 janvier 2003
Statut
Membre
Dernière intervention
17 septembre 2009

oops, désolé pour le double message,

en fait j'ai d'abord testé le script de Chmel, mais il me pose 2 problèmes:

1- Quand on charge la page, la liste est d'abord vide, et le scroll commence, ce qui n'est pas très esthétique, par rapport à ton script qui démarre avec une liste pleine

2- Quand la liste arrive au bout, elle laisse un blanc derriere elle jusqu'a ce que la totalité des titres soient afficher pour ensuite recommencer, là encore c'est beaucoup mieux avec ton script qui lui, s'affiche réellement en continue

Donc soit je peux enlever la pause sur ton script, soit il faut que je reprenne celui de Chmel pour voir si je peux gommer ces 2 défauts...
Messages postés
12
Date d'inscription
vendredi 3 janvier 2003
Statut
Membre
Dernière intervention
17 septembre 2009

Bonjour et merci pour cette magnifique source. J'aurais toutefois une question: comment fait-on pour ne plus avoir de pause à chaque mouvement d'un élément?

En fait j'aurais besoin d'une liste déroulante qui fonctionnerait en continue, sans pause et effet d'opacité.

Merci beaucoup
Messages postés
4
Date d'inscription
mercredi 29 septembre 2004
Statut
Membre
Dernière intervention
16 septembre 2009

Salut Etirex,

Ma source est seulement prévue pour effacer un élément à chaque fois. Si tu veux quelque chose en continu, je te propose de regarder le script de Chmel que j'ai déjà cité dans ma description ;) : http://www.javascriptfr.com/code.aspx?ID=25084.
Afficher les 10 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.