Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Incontournables XHTML / CSS :

Forum Alsacréations : CSS et Standards Web · DOM, JavaScript, ECMAScript · Créer un "ticker"
Rechercher dans le sujet :
Auteur
jdebauve
# 25 Aug 2007 - 21:11:56
Citer
10 Posts
 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 cligne
Jonathan Debauve
http://www.jonathandebauve.fr 
^
Changaco
# 25 Aug 2007 - 21:36:17
Citer
782 Posts
 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. cligne
Bonne chance. smile
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
jdebauve
# 25 Aug 2007 - 21:39:19
Citer
10 Posts
 Bon disons que ça me dit pas grand chose... mais avec tes pistes je vais sûrement finir par trouver quelque chose ! Merci beaucoup cligne
Jonathan Debauve
http://www.jonathandebauve.fr 
^
Changaco
# 25 Aug 2007 - 22:16:57
Citer
782 Posts
 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)
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
jdebauve
# 27 Aug 2007 - 14:54:35
Citer
10 Posts
 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 cligne
Modifié par jdebauve (27 Aug 2007 - 14:57)
Jonathan Debauve
http://www.jonathandebauve.fr 
^
Changaco
# 27 Aug 2007 - 22:04:17
Citer
782 Posts
 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 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)
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
Changaco
# 27 Aug 2007 - 22:35:06
Citer
782 Posts
 Ç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. 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 ... smile
Modifié par CNeo (27 Aug 2007 - 22:36)
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
Heyoan
# 28 Aug 2007 - 02:06:23
Citer
Un p'tit Kiwiz Coca ?
Modérateur
3153 Posts
 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 biggol !) :
remplacer :

var textColor = String(document.getElementById('infos').style.color);



par:

var textColor = getInfosColor();

 if (textColor == 'inconnu') {

 	return;

 }



et la fonction de la mort qui déchire  lol  :

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)
balises html et hiérarchie XHTML 1.0 Strict
//propriétés CSS
^
jdebauve
# 28 Aug 2007 - 07:46:41
Citer
10 Posts
 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...)

sweatdrop
Jonathan Debauve
http://www.jonathandebauve.fr 
^
Changaco
# 28 Aug 2007 - 09:57:05
Citer
782 Posts
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 biggol !) :
Bien sûr ! Qu'est-ce que je peux être c** ... sweatdrop
Merci Heyoan. cligne
Modifié par CNeo (28 Aug 2007 - 11:37)
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
Changaco
# 28 Aug 2007 - 11:36:29
Citer
782 Posts
 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. 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)
Assimiler ... Analyser ... Arguer
http://www.changaco.net 
^
jdebauve
# 28 Aug 2007 - 19:02:05
Citer
10 Posts
 Super !

Merci beaucoup...
Jonathan Debauve
http://www.jonathandebauve.fr 
^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 7 ms - Charte