MARQUEE EN JAVASCRIPT

Commentaire de Manuel78 le 14/04/2009 23:35:39

très bonne source vais m'en servir, dommage pour chrome mais vu sont taux de pénétration limite on s'en fout...

Commentaire de crazygogo le 15/04/2009 09:34:16

Comme l'a dit kimjoa, c'est la balise marquee qui n'est pas compatible !!!

Commentaire de crazygogo le 15/04/2009 09:59:55

par contre sous IE7 ça me donne ça:

http://i87.servimg.com/u/f87/13/27/85/89/2009-010.png

Commentaire de Kimjoa le 15/04/2009 15:14:00

merci les gars pour vos commentaire !!

concernant la compatibilité sur chrome , j'avais éssayé y a 1 an de ça avec un doctype transitional , et ça ne marchait pas, oui je sais 1 an c'est énorme :) , après c'est sur respecté les normes à fond c'est une chose , mais est-ce vraiment utile si aux final c'est 100% compatible?? .... perso , je suis pas un acharné des normes, mais ais créer ce script pour kil soit aussi plus évolutif que la simple balise marquee , y'a déjà un système de défilement au passage de la sourie en plus , j'ai pas le temps d'en faire plus , vous peux être :) ,par exemple un systeme de scroll  à barre et bouton plus classique , ou scroller directement le contenue avec un mouse down , intégrer des items au contenue pour un défilement discontinue  ect... En faite je lais fais surtout pour bien comprendre la méthode pour le  développement ma librairie, dont je reprendrais le développement après le taff qui m'a été confié ...

Pour info , une règle css comme marque devrait voire le jour en css3 , donc dans 10 ans , çà fait 10 de moins :)

Concernant ie7, je règle ce beug de suite, et  élargie mes testes de  compatibilité.

a++

Commentaire de jdmcreator le 16/04/2009 23:56:03

Bonjour,

Pour le white-space, pourquoi ne l'ajoute tu pas dynamiquement ? Sinon, bonne source, je n'ai pas vu la version modifié mais serais-ce possible que lorsque l'on aille d'un bord, cela ne change pas de direction ?

JDMCreator

Commentaire de Kimjoa le 17/04/2009 12:57:10

Salut jdmcreator, concernant le white-space : nowrap; il est pas forcement nécessaire dans 100% des cas, par exemple si mon contenue est un tableau ect ...,mais juste à 99ù :) !!

concernant la direction , c'est tout à fait possible , par défaut  cette option  vaut 3 , pour faire simple faut juste remplacé cette ligne .

this.coefOverSpeed=coefOverSpeed || 3;
par
this.coefOverSpeed=coefOverSpeed || 0;

voià, je reposte pas pour si peu...

merci pour la note crazygogo , j'espère que ça te servira !!

a++

Commentaire de CreaReno le 13/05/2009 17:05:00

J'ai l'impression qu'il y a un conflit entre les javascript type Lightbox et ce code :(

Quelqu'un d'autre a t-il observé quelque chose de similaire ?

Commentaire de CreaReno le 20/05/2009 17:10:03

En fait il y avait un autre fichier Js qui n'étais plus utilisé et qui s'appelait scroll.js je suppose que c'est lui qui fesait un conflit.
Pour le coup faute de temps j'ai mis en place un malheureux <marquee> mais à l'occasion je me re-pencherais sur ton jolie script.
je repasserais poster le résultat de mes pérégrination au besoin.

Commentaire de analog101 le 07/06/2010 10:07:40

bonjour,
ou peut-on voir des exemples ?

Commentaire de Kimjoa le 07/06/2010 12:41:03

heu sinon y a une nouvelle version ici
http://www.javascriptfr.com/codes/MARQUEE-VERSION2-COMPATIBLE-MOOTOOLS-JQUERY-PROTOTYPE-SANS-LIBRAIRIE_51524.aspx

Commentaire de masternico le 29/11/2010 16:59:45

Salut,
j'aime beaucoup ton script que j'utilise sur un de mes sites. L'intégration s'est passé sans (trop) de problèmes.

Par contre, je ne mets pas 10 car tu as restreint le fonctionnement du passage de la souris à la seule accélération et abitrairement en te basant sur la zone du milieu. Par exemple, j'avais besoin que le marquee s'arrete et non pas qu'il accélère. Il serait interessant que tu rajoute un paramètre qui permette de définir comment on veut que celà fonctionne

Autre modif que j'ai du faire, c'est que le marquee est déjà rempli lorsqu'il commence (  this.startStep=0; )

Et pour un défilement en continu, j'ai rajouté un clonage de div, parceque sinon, il faut attendre que tout le message ait disparu pour le voir réapparaitre à nouveau.

Je mets ici mes modifs pour le cas ou celà inspirerait qqu'un:

function Marquee(box,content,speed,dirc,coefOverSpeed){
  //ini les variables
  this.box=$(box);
  this.content=$(content);


  this.speed=speed || 1;
  this.dirc=dirc || 'top';
  this.coefDirc=1;
  this.coefOverSpeed=coefOverSpeed || 3;
  this.inverseDirc=(this.dirc=='bottom' || this.dirc=='right');
  var horizontalDirc=(this.dirc=='bottom' || this.dirc=='top');

  //on repositionne les élements + cache les scrolls
  this.box.style.overflow='hidden';
  this.box.style.position='relative';//ie7 bug
  this.content.style.position='relative';

  //on clone le content pour avoir un affichage continu
  this.content_double = this.content.cloneNode(this.content);
  this.box.appendChild(this.content_double);

  //calcule la dimension du conteneur  + la dimention du contenue
  var boxDim=this.box['client'+(horizontalDirc?'Height':'Width')];
  var contentDim=this.content['offset'+(horizontalDirc?'Height':'Width')];

  //on definit las position max et de départ
  this.maxDim=this.inverseDirc?-boxDim:-contentDim;
  this.startStep=0;
  this.currentStep=this.startStep;

  //ajoutes les evenemnts
  this.eventOver=this.onMouseover.bindAsEventListener(this);
  Event.observe(this.box,'mouseover',this.eventOver);

  this.eventOut=this.onMouseout.bindAsEventListener(this);
  Event.observe(this.box,'mouseout',this.eventOut);

  this.interval=setInterval(this.interval.bind(this),35);

  this.eventUnload=this.unload.bindAsEventListener(this);
  Event.observe(window,'unload',this.eventUnload.bind(this));
}
Marquee.prototype={
   onMouseout : function(e){
      Event.stopObserving(this.box,'mousemove',this.eventMouseMove);
      this.coefDirc=1;
   },
   onMouseover : function(e){
       var dim=Element.viewportOffset(this.box);
       if(this.dirc=='top' || this.dirc=='bottom'){
         this.coor=[dim[1],dim[1]+this.box.clientHeight];
       }else this.coor=[dim[0],dim[0]+this.box.clientWidth];
       this.mouseMove(e);
       this.eventMouseMove=this.mouseMove.bindAsEventListener(this);
       Event.observe(this.box,'mousemove',this.eventMouseMove);
   },
   interval : function(){
     var acc=this.speed*this.coefDirc;
     $(this.content).style[this.dirc]=this.currentStep-acc+'px';
     $(this.content_double).style[this.dirc]=this.currentStep-acc+'px';
     this.currentStep-=acc;
     if(this.currentStep>this.startStep)
        this.currentStep=this.maxDim;
     if(this.inverseDirc){
        if(this.currentStep<this.maxDim)
           this.currentStep=this.startStep;
     }else{
        if(this.currentStep<this.maxDim)
           this.currentStep=this.startStep;
     }
   },
   mouseMove:function(e){
      this.coefDirc = 0;   // on bloque le défilement
   },
   unload : function(){
      clearInterval(this.interval);
      Event.stopObserving(this.box,'mouseover',this.eventOver);
      Event.stopObserving(this.box,'mouseout',this.eventOut);
      Event.stopObserving(window,'unload',this.eventUnload.bind(this));
   }
}

Event.observe(window, 'load', init_carousel);
function init_carousel(){
/*
liste des arguments possibles :
-  id ou element conteneur
-  id ou element contenue
-  vitesse initiale
-  direction du déplacement
-  vitesse du scrolling , lors d'un mouse mouve au dessus de l 'élement
*/

new Marquee('carousel_conteneur','carousel',1,'top',0);
}


//////////////////

Merci pour ton script