11550 sujets

JavaScript, DOM et API Web HTML5

bonjour a tous.

le probleme est simple.
Pour le site que je suis en train de creer, j'ai besoin de faire défiler verticalement les news. jusque la rien de chinois.

Le probleme c'est que je ne veux pas me contenter d'un defilement classique (ma patronne non plus d'ailleurs) donc j'ai opté pour une formule ou le texte dfile de haut en bas et ensuite de bas en haut et ce indéfiniment.
J'ai placé deux boutons qui permet de faire descendre ou monter plus vite afin de vite retrouver la news interessante.

L'idée ne palit pas a ma patronne et elle veut garder le defilement infini de haut en bas tout en gardant les boutons qui permettrait de voyager. et la je cale.
J'ai essayer avec un marquee mais pas moyen d'accorder les boutons dessus.

Help.

pour vous aider, voila le code tel qu'il est pour le moment :

<table border="0" cellpadding="25" cellspacing="0" width="889" height="425">
	    <tr><td valign="top"><table border="0" cellpadding="0" cellspacing="0">
	      <tr>
	        <td valign="top" width="380" height="27"><img src="images/news.gif" width="380" height="27"></td>
	      </tr>
	      <tr>
	       <td valign="top">
	        <img src="images/up.gif" onMouseOver="JavaScript:setscroll(-2, 5, false, true);" onMouseOut="JavaScript:resetscroll(200);">
	       </td>
	      </tr>
	      <tr>
	       <td valign="top" align="left">
	        <div id="news" style="overflow:hidden;height:100px">
	          <UL>
				<LI class=TXT_ACTU><STRONG><A class=LK_HOMEPAGE href="#"><FONT color=#333366>Chèques Sport et Culture :</FONT></A></STRONG>&nbsp;du neuf... </LI>
				<LI class=TXT_ACTU><STRONG><A class=LK_HOMEPAGE href="#"><FONT color=#333366>Chèques-cadeaux :</FONT></A> </STRONG>l'arrêté royal du&nbsp;1er décembre dernier confirme l'exonération ONSS de 35 &#128;  .</LI>
				<LI class=TXT_ACTU><STRONG><A class=LK_HOMEPAGE href="#"><FONT color=#333366>Fini les fax ou le téléphone pour commander vos TR.</FONT></A></STRONG>  Commandez les en ligne en cliquant sur le bouton dédié dans la colonne de gauche de cet écran. </LI>
				<LI class=TXT_ACTU><STRONG><A class=LK_HOMEPAGE href="#"><FONT color=#333366>Accor Services assure la gestion des titres-services et des chèques formation à la création d'entreprise.</FONT></A></STRONG> Visitez nos sites dédiés :  www.titres-services.be  et  www.chequecreation.be.  </LI>
				<LI class=TXT_ACTU><STRONG><A class=LK_HOMEPAGE href="#"><FONT color=#333366>Accor Services c'est aussi Accentiv'... </FONT></A></STRONG></LI>
			  </UL>
	        </div>
	       </td>
	      </tr>
	      <tr>
	       <td valign="top">
	        <img src="images/down.gif" onMouseOver="JavaScript:setscroll(2, 5, false, true);" onMouseOut="JavaScript:resetscroll(200);">
		   </td>
		  </tr>
		   <script language="JavaScript">
			 var objdiv = document.getElementById("news");
			 var vstep, vmsec, vscrolltop, vTimer, vcountdown;
			 setTimeout("setscroll(1, 40, true, false)",4000);
			 
			 function setscroll(pstep, pmsec, preturn, pimmediate){
			 	clearInterval(vTimer);
				if(pimmediate){
					vcountdown = 0;
			 	}
			 	vmsec = pmsec;
			 	vstep = pstep;
			 	vTimer = setInterval("doscroll(" + preturn + ")", vmsec);
			 }
			 function resetscroll(pcountdown){
				vcountdown = pcountdown;
				setscroll(1, 40, true, false);
			 }
			 function doscroll(preturn){
				if(vcountdown > 0){
					vcountdown = vcountdown - 1;
				} else {
					objdiv.scrollTop = objdiv.scrollTop + vstep;
					if(preturn){
						if((objdiv.scrollTop <= 0 && vstep < 0) || (objdiv.scrollTop + objdiv.offsetHeight >= objdiv.scrollHeight && vstep > 0)){
							vstep = -vstep;
							vcountdown = 100;
						}
					}
				}
			 }
		  </script>
		  </table>



j'espere que vous pourrez m'aider.

salut

alex
Modifié le 29 Oct 2004 - 09:23
Je ne voudrais pas te paraitre rustre, mais ce forum traite des standards web, de la bonne application de la sémantique web, et des règles d'accessiblité au contenu (entre autres choses), et quand je vois ton code source bourré de table, je vois jaune et en plus quand tu veux un système d'affichage du texte défilant... là je ne peux plus rien dire !!!

Il faudrait voir à faire des solutions utilisables par TOUS les visiteurs, et le défilement d'information incéssent est vraiment très pénible.
Les textes défilant ne sont en effet pas considérés comme une "bonne pratique". Ils posent en outre des problèmes d'accessibilité.
Mais si "la patronne" est insensible à ce type d'argument, autant faire un texte défilant aussi propre que possible:
- avec un javascript non obstructif
- avec un simple bouton d'arrêt / une option permettant de désactiver l'effet et de consulter le texte intégral "à plat".
Je doute que la patronne soit d'accord avec ce genre de choses... Mais c'est en effet la solution la "moins pire"

Il faudrait peut etre songer aussi tant que tu es dans une nouvelle version à passer à une mise en page plus légère grâce aux CSS.
Tu peux effectivement faire un prompteur de news conforme aux standards. Commences on t'aidera par la suite.

Il te faudra voir du coté des divs et de la propriété : overflow. Du coté javascript, tu auras besoin de getElementById();

... Bon courage.
Bonjour,

sur le fond, je suis entièrement d'accord avec vous.
Le problème est que je ne crée pas le site depuis zéro.

La boite dans laquelle je bosse travaille sous CMS et tant qu'elle n'aura pas décidé de m'installer un serveur pour pouvoir remodeler le code, je suis obligé de faire avec ce qui existe déja.

j'ai juste la possibilité d'editer le code à l'interieur d'une table qui fait partie d'un placeholder. code dans lequel j'ai placé un DIV avec overflow comme dans le code ci-dessus.
Je n'ignorais pas les objectifs du forum mais ce forum m'a semblé le plus capable de me fournir une réponse.
Désolé d'en avoir fait bondir plus d'un!

je continue ma quète.

salut