Bonjour,

Je souhaite revenir sur le script de Golmote dont il s'agissait d'un news scroller horizontal. Le code source se trouve ici: http://www.siteduzero.com/forum-83-398 [...] rizontal.html

J'ai depuis transformé ce news scroller horizontal en vertical. Sauf que pour faire une pause de la news défilante, faut survoler la div en question. Moi j'aimerais une pause automatique de X seconde entre chaque news en plus de mon onmouseover déja présent qui met en pause le scroll jusqu'au prochain onmouseout détecté. Voici le script:

var arr = [ 
'test1','test2','test3'
];

// News Scroller
function news(){ // En paramètre l'indice du premier <span> défilant
	var largeur=0; // On initialise une variable largeur
	for(var i=0,l=sp.length;i<l;i++){ // Pour chaque <span>
		sp[i].style.top = (parseInt(sp[i].style.top,10) - pas)+"px"; // On le fait défiler vers le haut
		largeur += i==index_first ? 0 : parseInt(sp[i].offsetHeight,10); // Et on incrémente la largeur du <span> (sauf si premier)
	}
	if(-1*(sp[index_first].offsetTop)>parseInt(sp[index_first].offsetHeight,10)) { // Si le premier <span> n'est plus visible
		if(largeur>div.offsetHeight){
			sp[index_first].style.top = largeur+"px"; // On le déplace à la fin
		} 
		else{
			sp[index_first].style.top = div.offsetHeight+"px";
		}
		index_first++; // Et on incrément l'index
		if(index_first>=sp.length) { index_first=0; } // (Si l'index est trop grand on le réinitialise
	}
	timer = setTimeout(news,vit); // On relance la fonction
}

// PERSONNALISATION :
var esp = 30; // Espace entre chaque SMS (en px)
var vit = 20; // Vitesse de défilement (en ms), vaut 35 par défaut
var pas = 1; // Pas de défilement (en px)
var id_d = "live_api"; // ID du div conteneur
var div, sp, timer, index_first; // Quatre variables globales
window.onload = function(){ // Au chargement (initialisation)
	index_first = 0; // On initialise l'index
	div = $(id_d); // On récupère le div conteneur
	sp = []; // Et on crée un tableau vide
	var position = 0; // On initialise une variable "position"
	for(var i=0,l=arr.length;i<l;i++){ // Pour chaque SMS
		  sp[i] = document.createElement("span"); // On crée un <span>
		  sp[i].appendChild(document.createTextNode(arr[i])); // On lui mets le contenu du SMS
		  sp[i].style.paddingRight = esp+"px"; // On fait un peu de CSS...
		  sp[i].style.position="absolute"; // position absolute
		  sp[i].style.top = position+"px"; // et top prend la valeur de la variable "position"
		  div.appendChild(sp[i]); // On insère le <span>
		  position += sp[i].offsetHeight; // et on incrémente "position" de la hauteur de <span>
	}
	div.onmouseover=function(){ // Au survol
		clearTimeout(timer); // On stoppe le défilement
	};
	div.onmouseout=function() { // A la fin du survol
		timer = setTimeout(news,vit); // On le relance
	};
	timer = setTimeout(news,vit); // On lance la fonction
}

Théorique je pense qu'il faut mettre en pause le scroll lorsque ma news arrive à 0 px du bord haut de ma div "live_api" et par exemple relancer le scroll 5 secondes après et ainsi de suite pour les news suivantes. Le soucis c'est la pratique. Donc j'en appelle aux âmes bien veillantes de ce forum.

Une démo ICI
En haut à droite vous verrez rapidement le scroller vertical

up

var arr = [ 
'test1','test2','test3'
];

// News Scroller
function news(){
	var largeur=0; // On initialise une variable largeur
	for(var i=0,l=sp.length;i<l;i++){ // Pour chaque <span>
		sp[i].style.top = (parseInt(sp[i].style.top,10) - pas)+"px"; // On le fait défiler vers le haut
		largeur += i==index_first ? 0 : parseInt(sp[i].offsetHeight,10); // Et on incrémente la largeur du <span> (sauf si premier)
	}
	if(-1*(sp[index_first].offsetTop)>parseInt(sp[index_first].offsetHeight,10)) { // Si le premier <span> n'est plus visible
		if(largeur>div.offsetHeight){
			sp[index_first].style.top = largeur+"px"; // On le déplace à la fin
		} 
		else{
			sp[index_first].style.top = div.offsetHeight+"px";
		}
		index_first++; // Et on incrément l'index
		if(index_first>=sp.length) { index_first=0; } // (Si l'index est trop grand on le réinitialise
	}
	timer = setTimeout(news,vit); // On relance la fonction
	
	for(var i=0,l=sp.length;i<l;i++) { // On parcourt encore les <span>
	  if(parseInt(sp[i].style.top,10) == h_arret) { // Si l'un d'eux est à la hauteur de pause
	    clearTimeout(timer); // On arrête le défilement
	    timer = setTimeout(news,tps_pause); // et on le relance tps_pause ms plus tard
	  }
	}
}

// PERSONNALISATION :
var h_arret = 13; // Top où doit s'arrêter la news (en px)
var tps_pause = 1000; // Temps de pause (en ms)
var esp = 30; // Espace entre chaque SMS (en px)
var vit = 20; // Vitesse de défilement (en ms), vaut 35 par défaut
var pas = 1; // Pas de défilement (en px)
var id_d = "live_api"; // ID du div conteneur
var div, sp, timer, index_first; // Quatre variables globales
window.onload = function(){ // Au chargement (initialisation)
	index_first = 0; // On initialise l'index
	div = document.getElementById(id_d); // On récupère le div conteneur
	sp = []; // Et on crée un tableau vide
	var position = 0; // On initialise une variable "position"
	for(var i=0,l=arr.length;i<l;i++){ // Pour chaque SMS
		  sp[i] = document.createElement("span"); // On crée un <span>
		  sp[i].appendChild(document.createTextNode(arr[i])); // On lui mets le contenu du SMS
		  sp[i].style.paddingRight = esp+"px"; // On fait un peu de CSS...
		  sp[i].style.position="absolute"; // position absolute
		  sp[i].style.top = position+"px"; // et top prend la valeur de la variable "position"
		  div.appendChild(sp[i]); // On insère le <span>
		  position += sp[i].offsetHeight; // et on incrémente "position" de la hauteur de <span>
	}
	div.onmouseover=function(){ // Au survol
		clearTimeout(timer); // On stoppe le défilement
	};
	div.onmouseout=function() { // A la fin du survol
		timer = setTimeout(news,vit); // On le relance
	};
	timer = setTimeout(news,vit); // On lance la fonction
}

J'ai ajouté deux variables de personnalisation.

La première sert à indiquer la hauteur de l'élément qui sera mis en pause. (0 : l'élément s'arrêtera quand il touchera le haut de son conteneur, etc.)

La deuxième indique la durée de la pause.

J'ai testé et çà fonctionne hormis que mes news ne se trouvent pas dans la div dans laquelle ils devraient être. Démo: ICI
Ma div encadrée en rouge ne contient pas les news comme prévu mais ces news sont en train de défiler en haut dans le header, à 0px du bord de la fenêtre du navigateur.
Peut-être sa viendrais de:

var position = 0; // On initialise une variable "position"
	for(var i=0,l=arr.length;i<l;i++){ // Pour chaque SMS
		  sp[i] = document.createElement("span"); // On crée un <span>
		  sp[i].appendChild(document.createTextNode(arr[i])); // On lui mets le contenu du SMS
		  sp[i].style.paddingRight = esp+"px"; // On fait un peu de CSS...
		  sp[i].style.position="absolute"; // position absolute
		  sp[i].style.top = position+"px"; // et top prend la valeur de la variable "position"
		  div.appendChild(sp[i]); // On insère le <span>
		  position += sp[i].offsetHeight; // et on incrémente "position" de la hauteur de <span>
	}

Avec donc la position de 0px en absolue?

Oui enfin ça ça n'a rien à voir avec ce que je viens de modifier

Il faut que ton div conteneur soit en position absolue ou relative... mais qu'une des deux soit explicitement définie.

Pour faire simple j'ai fait çà:

var position = 0; // On initialise une variable "position"
	for(var i=0,l=arr.length;i<l;i++){ // Pour chaque SMS
		  sp[i] = document.createElement("div"); // On crée un <span>
		  sp[i].appendChild(document.createTextNode(arr[i])); // On lui mets le contenu du SMS
		  sp[i].style.Height = esp+"px"; // On fait un peu de CSS...
		  sp[i].style.position="relative"; // position absolute
		  sp[i].style.top = position+"px"; // et top prend la valeur de la variable "position"
		  div.appendChild(sp[i]); // On insère le <span>
		  position += sp[i].offsetHeight; // et on incrémente "position" de la hauteur de <span>
	}

La les news sont bien placé au niveau de la boite mais ils partent d'un peu plus bas et défilent jusqu'en haut de la page du navigateur. Et en plus, comment fixer une hauteur pour les news? J'ai éssayé "sp[i].style.Height" mais çà ne semble pas fonctionner car comme ma div conteneur fait 30px de hauteur, si une news ne fait que 10px de hauteur alors une partie de la seconde news apparait dans la div conteneur. D'om mon intérêt était de forcer une news de 30 px de hauteur.

Il faudrait que tu mettes la page à jour parce que je comprends pas tout...

Si tu veux agrandir les news en hauteur, pourquoi tu mets pas un padding ?

Oui, j'ai édité ici, Démo: ICI
J'ai rajouté une bordure jaune pour bien comprendre mon problème.
J'ai fixé la hauteur de mes divs défilantes à 30 px, soit la hauteur du bloc conteneur mais il y a encore 30px d'espace entre chaque div défilante et j'ai comme l'impression que au début mes divs ne se déplacent pas avec le même pas à chaque boucle (je sais pas si on peut appeller çà comme çà). Et aussi, le top à 0px ne correspond pas au bord de la div du conteneur mais au bord de la page du navigateur... Du coup, lorsque ma dernière div a défilé dans le bloc conteneur, ba faut attendre que la première div atteint le bord haut de la fenetre du navigateur avant de réapparaitre dans le bord bas de la fenetre du navigateur et enfin défilé dans la div conteneur. Hors il serait mieux que mes points de répère soient les limites de la div conteneur et pas celle de la fenetre du navigateur.
Et aussi, il y aurait-il un moyen de faire réparraitre la première div jaune quand la dernière disparait dans le bloc conteneur car la je crois que c'est l'inverse qui se produit: La première div réapparait quand elle même disparait.
Voici les paramètres que j'ai mis:

var h_arret = 0; // Top où doit s'arrêter la news (en px)
var tps_pause = 5000; // Temps de pause (en ms)
var espLAPI = 30; // Espace entre chaque SMS (en px)
var vitLAPI = 20; // Vitesse de défilement (en ms), vaut 35 par défaut
var pasLAPI = 1; // Pas de défilement (en px)
var id_dLAPI = "LiveAPI"; // ID du div conteneur

Citation : Golmote

Il faut que ton div conteneur soit en position absolue ou relative... mais qu'une des deux soit explicitement définie.

Tu te souviens quand j'ai dit ça ? Bah c'était pas pour rien... C'est que si tu commences à tout changer (genre mettre les span en position relative), dans ces cas tu changes tout parce que sinon ça plante.

Bref, tu mets le div conteneur en position "relative".

Tu mets les span en position "absolute".

Et tu mets la variable h_arret à 0 (parce que sur ta page mise à jour, elle était toujours à 13)

Ok ,chef, çà fonctionne mais si je puis me permettre une toute petite amélioration, sur ma démo, on voit toutes les news défilées alors qu'on voudrait seulement les rendre visible uniquement lorsqu'elle atteignent l'élément contenur. Si quelqu'un sur une hasardeuse recherche Google tombe sur ce topic, n'oubliez pas dans votre fichier CSS, de mettre dans votre élément conteneur, qui est dans mon cas "LiveAPI", un overflow:hidden. Ce qui donne:

#LiveAPI {
height: xxpx;
width: xxpx;
position: relative;
top: 0px;
overflow: hidden;
}

Voila.

Merci Golmote

Et voilà la version verticale, sur le même principe que la nouvelle version horizontale :

<!-- Div qui contiendra les sms. Le css est important -->
<div id="defil" style="height:20px;position:relative;border:1px solid black; width:300px;overflow:hidden;white-space:nowrap;"></div>

<script type="text/javascript">
// PERSONNALISATION :
var tps_pause = 1000; // Durée de la pause (en ms)
var stop = 0; // Emplacement de la pause (sera arrondi en fonction du pas) (en px à partir du haut)
var esp = 20; // Espace entre chaque SMS (en px)
var vit = 100; // Vitesse de défilement (en ms)
var pas = 2; // Pas de défilement (en px)
var id_d = "defil"; // ID du div conteneur
var arr = [ // Un array contenant les SMS...
        "Yop c tro bi1 - Golmote",
        "Un super message - Anonyme",
        "Maman je t'aime - <3<3",
        "Yop yop Boom ! - Jacky"
];

var last=0,timer,div; // Quelques variables globales ("last" représente l'indice du prochain SMS à afficher)
window.onload=function() { // Au chargement... (initialisation)
  div = document.getElementById(id_d); // On sauvegarde le conteneur dans une variable globale
  ajouter_span(); // On ajoute un premier <span>
  
  div.onmouseover=function() { // Au survol du conteneur
    clearTimeout(timer); // On stoppe le défilement
  };
  div.onmouseout=function() { // A la fin du survol
    timer = setTimeout(defile,vit); // On le relance
  };
  timer = setTimeout(defile,vit); // On lance la fonction de défilement
}

function defile() { // Fonction de défilement
  var spans = div.getElementsByTagName("span"); // On récupère tous les <span> du conteneur
  for(var i=0,l=spans.length;i<l;i++) { // Pour chaque <span>
    spans[i].style.top = (parseInt(spans[i].style.top,10) - pas)+"px"; // On le décale de "pas" px vers le haut
  }

  if(parseInt(div.lastChild.style.top,10) < div.offsetHeight-div.lastChild.offsetHeight) { // Quand un <span> apparaît entièrement
    ajouter_span(); // On ajoute le <span> suivant
  }
  
  if(parseInt(div.firstChild.style.top,10)+div.firstChild.offsetHeight < 0) { // Quand un <span> a complètement disparu
    div.removeChild(div.firstChild); // On le supprime
  }
  timer = setTimeout(defile,vit); // On relance la fonction
  
  for(var i=0,l=spans.length;i<l;i++) {
    if(parseInt(spans[i].style.top,10)== Math.round(stop/pas)*pas) {
          clearTimeout(timer);
          timer = setTimeout(defile,tps_pause);
        }
  }
}

function ajouter_span() { // Fonction d'ajout d'un <span>
  var new_span = document.createElement("span"); // On crée un nouveau <span> qu'on paramètre...
  new_span.appendChild(document.createTextNode(arr[last])); // On insère le texte (grâce à "last")
  new_span.style.paddingBottom=esp+"px"; // On met le padding
  new_span.style.position="absolute"; // Position absolue
  new_span.style.display="block";
  new_span.style.textAlign="center";
  new_span.style.width=div.offsetWidth+"px";
  new_span.style.top = div.offsetHeight+"px"; // On le place à l'extrémité droite du conteneur, prêt à apparaître
  div.appendChild(new_span); // On l'insère dans le DOM
  last++; // On incrément "last"
  if(last>=arr.length) { // Si on a dépassé la table de l'array des SMS
    last = 0; // On revient à zéro.
  }
}

</script>

J'ai çà:

la ligne 190 étant

if(parseInt(divLAPI.lastChild.style.top,10) < divLAPI.offsetHeight-divLAPI.lastChild.offsetHeight)

Code complet utilisé:

var h_arret = 0; // Top où doit s'arrêter la news (en px)
var tps_pause = 5000; // Temps de pause (en ms)
var espLAPI = 30; // Espace entre chaque SMS (en px)
var vitLAPI = 20; // Vitesse de défilement (en ms), vaut 35 par défaut
var pasLAPI = 1; // Pas de défilement (en px)
var id_dLAPI = "LiveAPI"; // ID du div conteneur
var lastLAPI = 0, timerLAPI, divLAPI; // Quelques variables globales ("last" représente l'indice du prochain SMS à afficher)

window.onload = function(){
        divLAPI = $(id_dLAPI); // On sauvegarde le conteneur dans une variable globale
        ajouter_spanLAPI(); // On ajoute un premier <span>
        divLAPI.onmouseover=function() { // Au survol du conteneur
                clearTimeout(timer); // On stoppe le défilement
        };
        divLAPI.onmouseout=function() { // A la fin du survol
                timerLAPI = setTimeout(defileLAPI,vitLAPI); // On le relance
        };
        timerLAPI = setTimeout(defileLAPI,vitLAPI); // On lance la fonction de défilement
}

function defileLAPI() { // Fonction de défilement
        var spansLAPI = divLAPI.getElementsByTagName("span"); // On récupère tous les <span> du conteneur
        for(var iLAPI=0,lLAPI=spansLAPI.length;iLAPI<lLAPI;iLAPI++){ // Pour chaque <span>
                spansLAPI[iLAPI].style.top = (parseInt(spansLAPI[iLAPI].style.top,10) - pasLAPI)+"px"; // On le décale de "pas" px vers le haut
        }
        if(parseInt(divLAPI.lastChild.style.top,10) < divLAPI.offsetHeight-divLAPI.lastChild.offsetHeight) { // Quand un <span> apparaît entièrement
                ajouter_spanLAPI(); // On ajoute le <span> suivant
        }
        if(parseInt(divLAPI.firstChild.style.top,10)+divLAPI.firstChild.offsetHeight < 0){ // Quand un <span> a complètement disparu
                divLAPI.removeChild(divLAPI.firstChild); // On le supprime
        }
        timerLAPI = setTimeout(defileLAPI,vitLAPI); // On relance la fonction
        for(var iLAPI=0,lLAPI=spansLAPI.length;iLAPI<lLAPI;iLAPI++){
                if(parseInt(spansLAPI[iLAPI].style.top,10)== Math.round(stop/pasLAPI)*pasLAPI){
                          clearTimeout(timerLAPI);
                          timerLAPI = setTimeout(defileLAPI,tps_pause);
                }
        }
}
function ajouter_spanLAPI() { // Fonction d'ajout d'un <span>
        var new_spanLAPI = document.createElement("span"); // On crée un nouveau <span> qu'on paramètre...
        new_spanLAPI.appendChild(document.createTextNode(arrLAPI[lastLAPI])); // On insère le texte (grâce à "last")
        new_spanLAPI.style.paddingBottom=espLAPI+"px"; // On met le padding
        new_spanLAPI.style.position="absolute"; // Position absolue
        new_spanLAPI.style.display="block";
        new_spanLAPI.style.textAlign="center";
        new_spanLAPI.style.width=divLAPI.offsetWidth+"px";
        new_spanLAPI.style.top = div.offsetHeight+"px"; // On le place à l'extrémité droite du conteneur, prêt à apparaître
        div.appendChild(new_spanLAPI); // On l'insère dans le DOM
        lastLAPI++; // On incrément "last"
        if(lastLAPI>=arrLAPI.length) { // Si on a dépassé la table de l'array des SMS
        lastLAPI = 0; // On revient à zéro.
        }
}

Hm... moi je n'avais pas cette erreur.

Mais il n'empêche que tu avais oublié de remplacer pas mal de variables...

window.onload = function(){
        divLAPI = $(id_dLAPI); // On sauvegarde le conteneur dans une variable globale
        ajouter_spanLAPI(); // On ajoute un premier <span>
        divLAPI.onmouseover=function() { // Au survol du conteneur
                clearTimeout(timerLAPI); // On stoppe le défilement
        };
        divLAPI.onmouseout=function() { // A la fin du survol
                timerLAPI = setTimeout(defileLAPI,vitLAPI); // On le relance
        };
        timerLAPI = setTimeout(defileLAPI,vitLAPI); // On lance la fonction de défilement
}

function defileLAPI() { // Fonction de défilement
        var spansLAPI = divLAPI.getElementsByTagName("span"); // On récupère tous les <span> du conteneur
        for(var iLAPI=0,lLAPI=spansLAPI.length;iLAPI<lLAPI;iLAPI++){ // Pour chaque <span>
                spansLAPI[iLAPI].style.top = (parseInt(spansLAPI[iLAPI].style.top,10) - pasLAPI)+"px"; // On le décale de "pas" px vers le haut
        }
        if(parseInt(divLAPI.lastChild.style.top,10) < divLAPI.offsetHeight-divLAPI.lastChild.offsetHeight) { // Quand un <span> apparaît entièrement
                ajouter_spanLAPI(); // On ajoute le <span> suivant
        }
        if(parseInt(divLAPI.firstChild.style.top,10)+divLAPI.firstChild.offsetHeight < 0){ // Quand un <span> a complètement disparu
                divLAPI.removeChild(divLAPI.firstChild); // On le supprime
        }
        timerLAPI = setTimeout(defileLAPI,vitLAPI); // On relance la fonction
        for(var iLAPI=0,lLAPI=spansLAPI.length;iLAPI<lLAPI;iLAPI++){
                if(parseInt(spansLAPI[iLAPI].style.top,10)== Math.round(h_arret/pasLAPI)*pasLAPI){
                          clearTimeout(timerLAPI);
                          timerLAPI = setTimeout(defileLAPI,tps_pause);
                }
        }
}
function ajouter_spanLAPI() { // Fonction d'ajout d'un <span>
        var new_spanLAPI = document.createElement("span"); // On crée un nouveau <span> qu'on paramètre...
        new_spanLAPI.appendChild(document.createTextNode(arrLAPI[lastLAPI])); // On insère le texte (grâce à "last")
        new_spanLAPI.style.paddingBottom=espLAPI+"px"; // On met le padding
        new_spanLAPI.style.position="absolute"; // Position absolue
        new_spanLAPI.style.display="block";
        new_spanLAPI.style.textAlign="center";
        new_spanLAPI.style.width=divLAPI.offsetWidth+"px";
        new_spanLAPI.style.top = divLAPI.offsetHeight+"px"; // On le place à l'extrémité droite du conteneur, prêt à apparaître
        divLAPI.appendChild(new_spanLAPI); // On l'insère dans le DOM
        lastLAPI++; // On incrément "last"
        if(lastLAPI>=arrLAPI.length) { // Si on a dépassé la table de l'array des SMS
        lastLAPI = 0; // On revient à zéro.
        }
}

Ok, c'est clean là.
Juste avec un dernier petit soucis: On peut scroller manuellement le bloc défilant vertical.
Par exemple en bougeant la souris du haut vers le bas sur le bloc défilant vertical, le texte défile un peu. En gros faudrait que la souris ne puisse pas controller le défilement.

Euh... chez moi ça fait pas ça...

T'aurais un exemple de ce bug online ?
Dis moi précisément ce que je dois faire pour reproduire le bug.

J'ai pas l'exemple en ligne
Mais normalement il suffit de mettre la souris sur le bloc défilant vertical (sur l'horizontal ya pas ce problème) et de la bouger (comme si tu souhaitait colorier le bloc défilant avec un crayon, genre tu fais des gribouillis).

En maintenant le clic, donc ?

sans le maintient du clic. Juste bouger la souris sur le bloc. Tu fais des mouvements vertical. Pour info mon bloc fait 30px de hauteur.
Du coup la vitesse augmente et je vois des voitures de courses passées

EDIT: J'avais une faute d'ortho dans une variable donc je n'ai plus les bolides mais toujours l'effet de scroll quand j'agite ma souris sur le bloc. De ce fait, même si je met une pause de 5 secondes, la pause ne se fait pas car la souris continu de faire défiler le texte en l'agitant.

Bon, donne moi ton bout de code HTML, ton bout de JS.

Bref, tout ce qu'il me faut pour copier-coller et avoir un exemple fonctionnel pour voir le bug stp.

(Aussi, sous quel navigateur testes-tu ?)

Voici un exemple ici http://www.reseau-empirium.com/test/ dans le bloc agence de presse, si je fait bouger ma souris en continu, il n'y a pas de pause entre le défilement de chaque span. Et donc je peux scroller à la souris rien qu'en la bougeant.
Pour info je suis sous Firefox3

Alors il y a deux solutions.

Soit tu supprimes l'effet oumouseover/onmouseout qui stoppe l'animation (que tu avais demandé sur le news scroller horizontal)
Auquel cas, il faut supprimer ces lignes :

divLAPI.onmouseover=function() { // Au survol du conteneur
                clearTimeout(timerLAPI); // On stoppe le défilement
        };
        divLAPI.onmouseout=function() { // A la fin du survol
                timerLAPI = setTimeout(defileLAPI,vitLAPI); // On le relance
        };

Soit tu ajoutes un booléen "enpause" afin d'empêcher le redémarrage de l'animation durant la pause.
Auquel cas, il faut ajouter une variable globale, comme ceci :

var lastLAPI = 0, timerLAPI, divLAPI, enpause=false;

Puis gérer la mise en pause :

if(parseInt(spansLAPI[iLAPI].style.top,10)== Math.round(h_arret/pasLAPI)*pasLAPI){
                          clearTimeout(timerLAPI);
                                                  enpause=true;
                          timerLAPI = setTimeout(function() {
                                                    enpause=false;
                                                        defileLAPI();
                                                  },tps_pause);
                }

Et enfin ajouter la condition lors des onmouseover/onmouseout :

divLAPI.onmouseover=function() { // Au survol du conteneur
            if(!enpause) {
                clearTimeout(timerLAPI); // On stoppe le défilement
                }
        };
        divLAPI.onmouseout=function() { // A la fin du survol
            if(!enpause) {
                timerLAPI = setTimeout(defileLAPI,vitLAPI); // On le relance
                }
        };

Ok, j'ai pris la solution avec la variable enpause=false et çà fonctionne !!!
De ce côté la, le problème de scroll est réglé.
Encore une toute dernière petite chose après je t'embête plus.
Je souhaite récupérer la largeur de mon span mais pour cela, on doit forcément l'afficher avant sauf que je veux simplement utiliser la valeur de la largeur du span sans l'afficher donc j'ai suggéré un style.display = 'none';
Donc en faite j'aimerais faire un truc du genre:

var new_spanLAPI = document.createElement("span"); // On crée un nouveau <span> qu'on paramètre...
new_spanLAPI.appendChild(document.createTextNode(arrLAPI[lastLAPI])); // On insère le texte (grâce à "last")
if(arrLAPI[lastLAPI].length < 160){
        arrLAPI[lastLAPI].style.paddingTop = "10px";
}
else{
        arrLAPI[lastLAPI].style.paddingTop = "0px";
}

Le but étant de mesurer la largeur du du span: Si cette largeur est supérieur à la div conteneur alors le texte sera sur 2 lignes et donc je l'affiche normal sinon le texte tiens sur une ligne puisqu'il ne dépasse pas la largeur du bloc conteneur et donc je veux lui mettre un padding-top de 10px pour que ce texte soit centré verticalement dans la div conteneur.
Je pense peut-être qu'il faudrait créer le span en display = 'none', puis réupérer sa largeur et enfin le mettre en display block?

Non, en display none, l'offsetWidth du span sera 0.

Comme je te l'avais déjà dit, il faudra que tu l'insères d'abord, et que tu le places correctement ensuite.

Mais je t'assure que dans la vitesse, personne ne verra rien.
(Et ce n'est pas une question de vitesse internet...)


Ce qui donne :

function ajouter_spanLAPI() { // Fonction d'ajout d'un <span>
        var new_spanLAPI = document.createElement("span"); // On crée un nouveau <span> qu'on paramètre...
        new_spanLAPI.appendChild(document.createTextNode(arrLAPI[lastLAPI])); // On insère le texte (grâce à "last")
        new_spanLAPI.style.paddingBottom=espLAPI+"px"; // On met le padding
        new_spanLAPI.style.position="absolute"; // Position absolue
        new_spanLAPI.style.display="block";
        new_spanLAPI.style.textAlign="center";
        new_spanLAPI.style.width=divLAPI.offsetWidth+"px";
        new_spanLAPI.style.top = divLAPI.offsetHeight+"px"; // On le place à l'extrémité droite du conteneur, prêt à apparaître
        divLAPI.appendChild(new_spanLAPI); // On l'insère dans le DOM
                if(new_spanLAPI.offsetWidth<160) {
                  new_spanLAPI.style.paddingTop = "10px";
                }
        lastLAPI++; // On incrément "last"
        if(lastLAPI>=arrLAPI.length) { // Si on a dépassé la table de l'array des SMS
        lastLAPI = 0; // On revient à zéro.
        }
}

(Pas besoin du else normalement, vu que le padding est à 0 par défaut).

Édition :

• 10/06/09 à 02:08 : Ajout de code

</span>

J'ai mis une alert juste après l'insertion dans le dom, du coup j'ai çà (finalement je préfère travailler avec les hauteurs des span):

divLAPI.appendChild(new_spanLAPI); // On l'insère dans le DOM
        alert(new_spanLAPI.offsetHeight);
        if(new_spanLAPI.offsetHeight < 61) {
            new_spanLAPI.style.paddingTop = "10px";
    }

Mon alerte renvoi toujours "60" Pourquoi?
Démo: http://www.reseau-empirium.com/test/

Ne serait-ce pas du au fait que j'ai mis

var esp = 60; // Espace entre chaque message (en px)

???
Et donc comment remédier à mon problème de configuration du padding-top?

Tu n'aurais pas défini un height à 60px par hasard ? Montre le code complet de ta fonction ajouter_spanLAPI()

Sisi, tu as complètement raison
J'avais remplacé le padding-bottom par height Du coup j'avais:

new_spanLAPI.style.height=esp+"px"; // Avec esp = 60px

Du coup çà forçait la hauteur du span
Et je l'ai donc remplacé par

new_spanLAPI.style.height="auto";

Et donc là sa fonctionne niquel
Bon ba c réglé. Merci énormément à toi encore une fois

Content d'en avoir enfin terminé avec ça

Mais de rien

MayDay, nous avons un problème...

J'avais pas remarqué mais le onmouseover ne met plus en pause le défilement
Du coup le défilement s'arrête que pendant 5 secondes et redémarre mais si la souris survol le bloc.

Une page de test stp ?

http://reseau-empirium.com/test/