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
}
#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>
etirex
Messages postés12Date d'inscriptionvendredi 3 janvier 2003StatutMembreDernière intervention17 septembre 2009 17 sept. 2009 à 09:11
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
etirex
Messages postés12Date d'inscriptionvendredi 3 janvier 2003StatutMembreDernière intervention17 septembre 2009 16 sept. 2009 à 22:43
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...
etirex
Messages postés12Date d'inscriptionvendredi 3 janvier 2003StatutMembreDernière intervention17 septembre 2009 16 sept. 2009 à 22:39
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
mikerob
Messages postés4Date d'inscriptionmercredi 29 septembre 2004StatutMembreDernière intervention16 septembre 2009 16 sept. 2009 à 18:15
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.
etirex
Messages postés12Date d'inscriptionvendredi 3 janvier 2003StatutMembreDernière intervention17 septembre 2009 16 sept. 2009 à 18:01
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
mikerob
Messages postés4Date d'inscriptionmercredi 29 septembre 2004StatutMembreDernière intervention16 septembre 2009 5 janv. 2009 à 12:03
Salut Kimjoa,
Bon, vu que les vacances de Noël sont finite :( j'ai enfin pris le temps de regarder tes modifications. En deux mots : Très intéressant !
je ne connaissais pas dutout la fonction clearInterval, se qui fait que du cou, j'ai plein d'autre code source à modifier pour améliorer les performances ^^'
Par contre tu utilise un element.style.filter ou element.style.opacity à la place du Effect.Appear, c'est pour améliorer les perfs ?
Sinon dans l'ensemble, je comprend bien ton code, sauf le .bind(this,this.listElements[i]) après le afterEffect. Mais je suppose que je le comprendrais quand j'aurais lu l'article que tu m'as passé sur les objet javascript.
Par contre je reste sur ma position pour le .hasJS en global, car le but est effectivement de modifier toutes les listes (et j'irai même plus loin, tous les éléments de ma page).
J'appliquerait tes modifs sur ma source dès que j'aurai 5 minutes :)
Merci encode pour tes précieux conseil.
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 19 déc. 2008 à 21:52
re mikerob!
- pour le absolute du css, oublie ... ;),
-pour l'appel de l'intervalle. En js les intervalle consomme bcp de mémoire,que ton scroll soit stoppé ou en marche ton intervalle fonctionne tjrs ...
-pour la class css hasJS, celle ci s'applique pour toute les liste du document, il fallais juste l'appliqué pour chaque instance de t'as classe.
-en ce qui concerne les variable privé , public, js ne permet pas vraiment de faire de sécurité , met on peux le simuler , dans certain cas , voici un tuto tres bien fait en 3 partie http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/ -concernant le binding, quand tu passe une fonction comme argument a une autre fonction, celle-ci pert son context... le js possede 2 fonction native, call et apply ki permet d'appeller une fonction avec un cointext précis, tres utile pour faire de l'héritage... avec le lien ci dessus tu decrait comprende de suite.
je te file le code que j'ai modifierr
pour le css de hasJS, pas grans chose de changé...
note - j'utilse bindAsEventListener au lieux d'un simple bind dans le callback (ou handler) de ma fonction, cela permet de faire passé en 1er argument l'objet event...
je t'explique pas tout , je connais pas ton niveau , alors si t'as des questions hésite pas bye.
mikerob
Messages postés4Date d'inscriptionmercredi 29 septembre 2004StatutMembreDernière intervention16 septembre 2009 19 déc. 2008 à 10:35
Salut Kimjoa,
Merci pour le commentaire. Oui je ocnfirme il est constructif, mais je suis pas sur de tout comprendre :
"-met la valeur relative pour la position dans le css " -> Tu parle de quel élément ?
"-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action." -> Si j'enlève le this.action du coup je peux plus stopper la liste au passage de la souris... Je pourrais faire de manière à se que le startScrolling change le setInterval, mais j'ai eu pas mal de bug en le changeant à la volée...
"-tu aurais du faire 2 variable locale this.listElements et this.liste..." -> yes relicat de test, sa sera changé ^^
"-tu appels t'as fonction locale setSpeed" -> c'est pour permettre éventuellement de changer la vitesse depuis "l'extérieur" et non pas dans l'objet js (méthode public).
D'ailleurs question en passant : en JS il n'y a pas vraiment de notion d'objet privé/public non ?
"-utilise un binding pour lancer ton intervalle" -> je connais pas cette notion mais à froid sa me plait bien. Je test et je l'implémenterais dans la pochaine version :)
Voilà, je revois ma copie pour la prochaine version mais si tu as d'autres remarque n'hésite pas.
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 18 déc. 2008 à 19:42
salut, l'effet est sympas, mais j'ai quelque remarque concernant le code.
-met la valeur relative pour la position dans le css.
-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action.
-tu aurais du faire 2 variable locale this.listElements et this.liste, au lieu de les répété a chaque intervalle.
-tu appels t'as fonction locale setSpeed,avec un argument locale... pas besoin passe par un this (this.speed)
-utilise un binding pour lancer ton intervalle, de plus le nom de l'objet js doit etre le meme que l'id de la liste HTML, c 'est pas logique,... utilse ce bout de code a la place setInterval(this.scrollList.bind(this),this.speed);
-tu utilsie une classe css, hasJS pour documentElement, tu arrais du juste pour te liste lors de leur création.
code a revoir... j'espere avoir été constructif a+
17 sept. 2009 à 15:18
<!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>
17 sept. 2009 à 09:11
Merci encore
16 sept. 2009 à 22:43
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...
16 sept. 2009 à 22:39
En fait j'aurais besoin d'une liste déroulante qui fonctionnerait en continue, sans pause et effet d'opacité.
Merci beaucoup
16 sept. 2009 à 18:15
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.
16 sept. 2009 à 18:01
En fait j'aurais besoin d'une liste déroulante qui fonctionnerait en continue, sans pause et effet d'opacité.
Merci beaucoup
5 janv. 2009 à 12:03
Bon, vu que les vacances de Noël sont finite :( j'ai enfin pris le temps de regarder tes modifications. En deux mots : Très intéressant !
je ne connaissais pas dutout la fonction clearInterval, se qui fait que du cou, j'ai plein d'autre code source à modifier pour améliorer les performances ^^'
Par contre tu utilise un element.style.filter ou element.style.opacity à la place du Effect.Appear, c'est pour améliorer les perfs ?
Sinon dans l'ensemble, je comprend bien ton code, sauf le .bind(this,this.listElements[i]) après le afterEffect. Mais je suppose que je le comprendrais quand j'aurais lu l'article que tu m'as passé sur les objet javascript.
Par contre je reste sur ma position pour le .hasJS en global, car le but est effectivement de modifier toutes les listes (et j'irai même plus loin, tous les éléments de ma page).
J'appliquerait tes modifs sur ma source dès que j'aurai 5 minutes :)
Merci encode pour tes précieux conseil.
19 déc. 2008 à 21:52
- pour le absolute du css, oublie ... ;),
-pour l'appel de l'intervalle. En js les intervalle consomme bcp de mémoire,que ton scroll soit stoppé ou en marche ton intervalle fonctionne tjrs ...
-pour la class css hasJS, celle ci s'applique pour toute les liste du document, il fallais juste l'appliqué pour chaque instance de t'as classe.
-en ce qui concerne les variable privé , public, js ne permet pas vraiment de faire de sécurité , met on peux le simuler , dans certain cas , voici un tuto tres bien fait en 3 partie http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/
-concernant le binding, quand tu passe une fonction comme argument a une autre fonction, celle-ci pert son context... le js possede 2 fonction native, call et apply ki permet d'appeller une fonction avec un cointext précis, tres utile pour faire de l'héritage... avec le lien ci dessus tu decrait comprende de suite.
je te file le code que j'ai modifierr
pour le css de hasJS, pas grans chose de changé...
.scroller.hasJS{
position:relative;
border:1px solid black;
overflow:hidden;
padding:0px;
margin:0px;
}
.scroller.hasJS li {
position:absolute;
left:0px;
padding:10px 0px 0px 15px;
margin: 0px 0px 0px 5px;
width:90%;
list-style:none;
font-family:arial;
font-size:11px;
}
pour le code js
function Scroller(list, speed) {
this.speed=speed;
this.list= $(list);
this.list.className+=" hasJS";
this.listElements = $$('#' + this.list.id + ' li');
this.listLength=this.listElements.length;
this.totalHeight = 0;
for(var i=0; i<this.listLength; i++) {
this.listElements[i].style.top = this.totalHeight + 'px';
this.totalHeight = this.totalHeight + this.listElements[i].offsetHeight;
}
Event.observe(this.list,'mouseover',this.onMouseOver.bindAsEventListener(this));
Event.observe(this.list,'mouseout',this.onMouseOut.bindAsEventListener(this));
}
Scroller.prototype = {
speed:0,
currPos:-1,
totalHeight:'0px',
scrollList : function () {
this.currPos++;
for(var i=0; i<this.listLength; i++) {
if(this.currPos==i) {
new Effect.Opacity(this.listElements[i], { from: 1.0, to: 0, duration: 0.5,
afterFinish:function(element){
element.style.top=this.totalHeight-element.offsetHeight+'px';
if(Prototype.Browser.IE){
element.style.filter="alpha(opacity=100)";
}else{
element.style.opacity=1;
}
}.bind(this,this.listElements[i])
});
if(i==this.listLength-1)
this.currPos=-1;
}else{
new Effect.Move(this.listElements[i], { x: 0, y: -this.listElements[this.currPos].offsetHeight, mode: 'relative'});
}
}
},
startScrolling : function (speed){
if(speed)
this.speed = speed;
this.interval=setInterval(this.scrollList.bind(this),this.speed);
},
stopScrolling : function() {
clearInterval(this.interval);
},
onMouseOver : function(e){
this.stopScrolling();
},
onMouseOut : function(e){
this.startScrolling();
}
}
note - j'utilse bindAsEventListener au lieux d'un simple bind dans le callback (ou handler) de ma fonction, cela permet de faire passé en 1er argument l'objet event...
je t'explique pas tout , je connais pas ton niveau , alors si t'as des questions hésite pas bye.
19 déc. 2008 à 10:35
Merci pour le commentaire. Oui je ocnfirme il est constructif, mais je suis pas sur de tout comprendre :
"-met la valeur relative pour la position dans le css " -> Tu parle de quel élément ?
"-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action." -> Si j'enlève le this.action du coup je peux plus stopper la liste au passage de la souris... Je pourrais faire de manière à se que le startScrolling change le setInterval, mais j'ai eu pas mal de bug en le changeant à la volée...
"-tu aurais du faire 2 variable locale this.listElements et this.liste..." -> yes relicat de test, sa sera changé ^^
"-tu appels t'as fonction locale setSpeed" -> c'est pour permettre éventuellement de changer la vitesse depuis "l'extérieur" et non pas dans l'objet js (méthode public).
D'ailleurs question en passant : en JS il n'y a pas vraiment de notion d'objet privé/public non ?
"-utilise un binding pour lancer ton intervalle" -> je connais pas cette notion mais à froid sa me plait bien. Je test et je l'implémenterais dans la pochaine version :)
Pour le hasJS, c'est une astuce global qui n'a pas d'impacte sur le fonctionnement du code, hormis le fait que la page s'affiche comme il faut si le JS est désactivé ^^ (astuce que l'on m'a donné ici : http://forum.alsacreations.com/topic-5-34711-1-resolu-CSS-specifique-JavaScript-active.html)
Voilà, je revois ma copie pour la prochaine version mais si tu as d'autres remarque n'hésite pas.
18 déc. 2008 à 19:42
-met la valeur relative pour la position dans le css.
-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action.
-tu aurais du faire 2 variable locale this.listElements et this.liste, au lieu de les répété a chaque intervalle.
-tu appels t'as fonction locale setSpeed,avec un argument locale... pas besoin passe par un this (this.speed)
-utilise un binding pour lancer ton intervalle, de plus le nom de l'objet js doit etre le meme que l'id de la liste HTML, c 'est pas logique,... utilse ce bout de code a la place setInterval(this.scrollList.bind(this),this.speed);
-tu utilsie une classe css, hasJS pour documentElement, tu arrais du juste pour te liste lors de leur création.
code a revoir... j'espere avoir été constructif a+