11524 sujets

JavaScript, DOM et API Web HTML5

Créer un "ticker"

Bonjour à tou-te-s,

Je suis en train de créer une version BETA de mon site web. Je tente cette fois-ci de respecter la norme W3C en XHTML 1.0 Strict. J'aimerais que dans la ligne "Informations" (vers le haut), les messages de mon fil RSS apparaissent et disparaissent au fur et à mesure un peu comme sur le site http://www.apple.com/fr/.

J'ai essayé de m'inspirer de leur code mais ça n'a rien donné... Quelqu'un a une idée?

Merci d'avance pour vos réponses Smiley cligne
Bonsoir.

Deux pistes de recherche :
- tu vas avoir besoin d'une temporisation donc setTimeout() en Javascript
- si tu veux un effet de disparition alors c'est la couleur du texte qu'il faut changer avec de nouveau une temporisation

Si tu ne trouves rien je te donnerai plus de détails. Smiley cligne
Bonne chance. Smiley smile
Bon disons que ça me dit pas grand chose... mais avec tes pistes je vais sûrement finir par trouver quelque chose ! Merci beaucoup Smiley cligne
Pour t'aider un peu plus je pense que tu as besoin de deux fonctions ( une pour masquer et une pour afficher ) et bien sûr d'un tableau avec les informations à afficher.
Modifié par CNeo (25 Aug 2007 - 22:17)
Bon j'ai réussi à faire défiler les titres mais les effets de fondu là-dessus je suis pas trop capable d'adapter... en fait, j'ai trouvé le code pour le défilement sur un site espagnol parce que je ne sais pas du tout écrire le javascript. J'imagine que le scriptaculous pourrait m'aider pour les effets mais...

Donc si vous voyez mieux... et que vous pouvez m'aider, merci d'avance Smiley cligne
Modifié par jdebauve (27 Aug 2007 - 14:57)
Normalement on ne donne pas de code tout fait mais comme tu es aimable j'ai écrit le code qu'il te faut.

Édit : pas encore assez compatible j'avais oublié les tests Smiley confus

Le temps d'affichage de chaque texte est 3 secondes et corresponds dans le script aux deux valeurs '3000'. À toi d'adapter selon tes besoins.
Modifié par CNeo (27 Aug 2007 - 22:34)
Ça fonctionne uniquement avec Firefox. IE et Opera ont l'air de ne pas apprécier la regexp mais je ne sais pas pourquoi donc si quelqu'un pouvait m'éclairer. Smiley cligne 

var j = -1;
var texts = new Array('Texte 1', 'Texte 2', 'Texte 3', 'Texte par défaut.');
function showNextText(){
 var textColor = String(document.getElementById('infos').style.color);
 if(textColor!='rgb(0, 0, 0)'){
  var colors=/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(textColor);
  nextColor=parseInt(colors[1])-parseInt('51');
  nextColor=nextColor.toString(16);
  document.getElementById('infos').style.color='#'+nextColor+nextColor+nextColor;
  setTimeout('showNextText()', 100);
 }
 else{
  setTimeout('hideCurrentText()', '3000');
 }
}
function hideCurrentText(){
 var textColor = document.getElementById('infos').style.color;
 if(textColor!='rgb(255, 255, 255)'){
  var colors=/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(textColor);
  nextColor=parseInt(colors[1])+51;
  nextColor=nextColor.toString(16);
  document.getElementById('infos').style.color='#'+nextColor+nextColor+nextColor;
  setTimeout('hideCurrentText()', 100);
 }
 else{
  j++;
  if(j>=texts.length) j=0;
  document.getElementById('infos').firstChild.nodeValue=texts[j];
  showNextText();
 }
}


Édit : je pense que cette fonction aura sa place dans le topic des scripts utiles ... Smiley smile
Modifié par CNeo (27 Aug 2007 - 22:36)
Salut,

je suis pas un pro de Javascript mais si ça ne marche pas avec IE c'est parce que ce dernier retourne les couleurs sous la forme #000000 et pas rgb(0, 0, 0), alors voilà ma petite contribution (on ne se moque pas Smiley biggol !) :
[b]remplacer :[/b]
var textColor = String(document.getElementById('infos').style.color);

[b]par:[/b]
var textColor = getInfosColor();
 if (textColor == 'inconnu') {
 	return;
 }

[b]et la fonction de la mort qui déchire [lol] :[/b]
function getInfosColor(){
	var oElem = document.getElementById('infos'), textColor;
	if( window.getComputedStyle ) {
	  textColor = window.getComputedStyle(oElem,null).color;
	} else if( oElem.currentStyle ) {
	  textColor = oElem.currentStyle.color;
	} else {
	  return 'inconnu';
	}
	var testHexa = textColor.toLowerCase().substr(0, 2); 
	switch(testHexa) {
	 case "#0":
	 textColor='rgb(0, 0, 0)';
	 break;
	 case "#3":
	 textColor='rgb(51, 51, 51)';
	 break;
	 case "#6":
	 textColor='rgb(102, 102, 102)';
	 break;
	 case "#9":
	 textColor='rgb(153, 153, 153)';
	 break;
	 case "#c":
	 textColor='rgb(204, 204, 204)';
	 break;
	 case "#f":
	 textColor='rgb(255, 255, 255)';
	 break;
	}
	return textColor;
}

A+
Modifié par Heyoan (28 Aug 2007 - 03:40)
Merci beaucoup...

Là je vais au boulot mais dès ce soir j'essaye le tout et je vous dis !
(et promis, je vais faire des efforts pour apprendre à écrire le Javascript... j'ai bien fait des efforts pour apprendre à coder le html correctement, je devrais bien y arriver. Quoi que...)

Smiley sweatdrop
Heyoan a écrit :
Salut,

je suis pas un pro de Javascript mais si ça ne marche pas avec IE c'est parce que ce dernier retourne les couleurs sous la forme #000000 et pas rgb(0, 0, 0), alors voilà ma petite contribution (on ne se moque pas Smiley biggol !) :
Bien sûr ! Qu'est-ce que je peux être c** ... Smiley sweatdrop
Merci Heyoan. Smiley cligne
Modifié par CNeo (28 Aug 2007 - 11:37)
C'est bon j'ai réussi ! Testé avec succès sous IE (5.5, 6 et 7), Firefox 2.0, Opera 9.22 et Konqueror 3.5.7. Smiley ravi 

var j = -1;
var texts = new Array('Texte 1', 'Texte 2', 'Texte 3', 'Texte par défaut.');
function showNextText(){
 var textColor = document.getElementById('infos').style.color.toLowerCase();
 if(textColor=='#000000' || textColor=='#000' || textColor=='rgb(0, 0, 0)'){
  setTimeout('hideCurrentText()', '3000');
 }
 else{
  if(textColor.substr(0,1)=='#'){
   textHexColor=textColor.substr(1,2);
   eval('nextColor=0x'+textHexColor+'-0x33;');
  }
  else if(textColor.substr(0,3)=='rgb'){
   var colors=RegExp(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/).exec(textColor);
   nextColor=parseInt(colors[1])-51;
  }
  else return;
  nextColor=nextColor.toString(16);
  document.getElementById('infos').style.color='#'+nextColor+nextColor+nextColor;
  setTimeout('showNextText()', '100');
 }
}
function hideCurrentText(){
 var textColor = document.getElementById('infos').style.color.toLowerCase();
 if(textColor=='#ffffff' || textColor=='#fff' || textColor=='rgb(255, 255, 255)'){
  j++;
  if(j>=texts.length) j=0;
  document.getElementById('infos').firstChild.nodeValue=texts[j];
  showNextText();
 }
 else{
  if(textColor.substr(0,1)=='#'){
   textHexColor=textColor.substr(1,2);
   eval('nextColor=0x'+textHexColor+'+0x33;');
  }
  else if(textColor.substr(0,3)=='rgb'){
   var colors=RegExp(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/).exec(textColor);
   nextColor=parseInt(colors[1])+51;
  }
  else return;
  nextColor=nextColor.toString(16);
  document.getElementById('infos').style.color='#'+nextColor+nextColor+nextColor;
  setTimeout('hideCurrentText()', '100');
 }
}

window.onload=function (){
 document.getElementById('infos').style.color='#000';
 setTimeout('hideCurrentText()', '3000');
}


À savoir pour paramétrer :
- l'effet de disparition/apparition se fait par changement de couleur du texte c'est pourquoi ce script ne fonctionne que avec du texte noir sur fond blanc
- chaque texte reste affiché 3 secondes pour changer cela il faut changer les deux valeurs '3000' dans les setTimeout
- le script s'applique sur l'élément possédant l'id "infos", il faut donc modifier les occurrences de "getElementById('infos')"

Voilà je crois que c'est à peu près tout.
Je m'en vais de suite poster ce script dans le topic des fonctions utiles.
Modifié par CNeo (28 Aug 2007 - 11:38)
Sujet clos
Aller à