11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je rencontre un problème plutôt étrange.
J'utilise un script Javascript pour faire défiler des news avec un temps d'arrêt entre chaque news.
Lorsque je met la balise DOCTYPE au début de mon document, mon script déraille un peu.

Je me doute que mon problème vient de Javascript mais je ne vois vraiment pas ce qui cloche.
(hormis le fait peut-être que le code de la newsbox n'est pas des plus récents...)

voici mon code:
newsbox.js :

function ejs_scroll_start()
	{
	if(ejs_scroll_mode == 1)
		{
		ejs_scroller_haut = "ejs_scroller_1";
		ejs_scroller_bas = "ejs_scroller_2";
		ejs_scroll_mode = 0;
		}
	else
		{
		ejs_scroller_bas = "ejs_scroller_1";
		ejs_scroller_haut = "ejs_scroller_2";
		ejs_scroll_mode = 1;
		}
	ejs_scroll_nb_message = ejs_scroll_message.length-1;
	if(ejs_scroll_actuel == ejs_scroll_nb_message)
		ejs_scroll_suivant = 0;
	else
		ejs_scroll_suivant = ejs_scroll_actuel+1;
	if(document.getElementById)
		document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
	ejs_scroll_top = 0;
	if(document.getElementById)
		setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
	}

function ejs_scroll_action()
	{
	ejs_scroll_top -= 1;
	document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
	document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
	if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
		setTimeout("ejs_scroll_action()",10)
	else
		ejs_scroll_stop()
	}

function ejs_scroll_stop()
	{
	ejs_scroll_actuel = ejs_scroll_suivant;
	ejs_scroll_start()
	}
	
function d(texte)
	{
	document.write(texte);
	}


index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<?php
	//On inclu le fichier de fonctions de connexion à la base
	include "fonctions/php/acces_bdd.php";
 
	//Connexion à la base de donnees
	connecter("test_menu");
?>
<head>
	<title>Intranet V 2.0</title>
  	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
	
	<!--Feuille de style principale-->
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<!--Feuille de style du Menu-->
	<link rel="stylesheet" href="css/style_menu.css" type="text/css" />
	<!--Feuille de style de la NewsBox-->
	<link rel="stylesheet" href="css/style_newsbox.css" type="text/css" />
	
	<!--Fonctions contenant les animation de la newsbox -->
	<script type="text/javascript" src="fonctions/js/newsbox.js"></script>
	<!--Fonctions pour IE & Flash -->
	<script type="text/javascript" src="fonctions/js/flash_ie.js"></script>
	
	<!--*************************************************************************************************************-->
	<!--Script pour lancer plusieurs script sur window.onload --> 
	<script type="text/javascript">
	<!--
	// Fonction de stockage des scripts à charger 
	FuncOL = new Array(); 
	function StkFunc(Obj) { 
		FuncOL[FuncOL.length] = Obj; 
	} 
   
	// Execution des scripts au chargement de la page 
	window.onload = function() { 
		for(k=0; k<FuncOL.length; k++) 
			{FuncOL[k]();} 
	}
	
	/***************************************************************************************************************/
	/*Script de recuperation des news */
	
	/*Parametres de la boite de news*/
	ejs_scroll_largeur = 250;
	ejs_scroll_hauteur = 80;
	ejs_scroll_bgcolor = '#fdfdf8';
	/* Mettre ici le chemin de l'image de fond */
	ejs_scroll_background = "";
	/* Mettre ici le temps en secondes */
	ejs_scroll_pause_seconde = 3;

	<?php
		//On selectionne les news dans MySQL et on les stocke dans un tableau
		$query = "SELECT * FROM news ORDER BY date_news DESC";
		$result = mysql_query($query);
		$i = 0;
		$tableau  = array();
		while($row = mysql_fetch_row($result)){
			$tableau [$i][0] = $row['1'];
			$tableau [$i][1] = $row['2'];
			$tableau [$i][2] = $row['3'];
		$i++;
		}

		//Déclaration du tableau JavaScript et retranscription du tableau PHP en tableau JS
		$tableau_JS="Tableau";
		printf("%s = new Array();\n",$tableau_JS);

		foreach($tableau as $keyItems => $valueItems)
		{
			printf("%s[%s]= new Array();\n",$tableau_JS, $keyItems);
			foreach($valueItems as $keyItem => $valueItem)
			{	
				printf("%s[%s][%s] =%s;\n",$tableau_JS, $keyItems, $keyItem,
					is_string($valueItem) ?  "\"".addslashes($valueItem)."\"" : $valueItem);
			}
		}   			
	?>		

	/*Préparation du tableau de news*/
	ejs_scroll_message = new Array;   
	ejs_scroll_message[0]="<span class='ejs_scroll_titre'>"+Tableau['0']['0']+"</span><br><span class='ejs_scroll_contenu'>"+Tableau['0']['1']+"</span><br><a href='"+Tableau['0']['2']+"'>Cliquez ici</a>";
	ejs_scroll_message[1]="<span class='ejs_scroll_titre'>"+Tableau['1']['0']+"</span><br><span class='ejs_scroll_contenu'>"+Tableau['1']['1']+"</span><br><a href='"+Tableau['1']['2']+"'>Cliquez ici</a>";
	ejs_scroll_message[2]="<span class='ejs_scroll_titre'>"+Tableau['2']['0']+"</span><br><span class='ejs_scroll_contenu'>"+Tableau['2']['1']+"</span><br><a href='"+Tableau['2']['2']+"'>Cliquez ici</a>";
	ejs_scroll_message[3]="<span class='ejs_scroll_titre'>"+Tableau['3']['0']+"</span><br><span class='ejs_scroll_contenu'>"+Tableau['3']['1']+"</span><br><a href='"+Tableau['3']['2']+"'>Cliquez ici</a>";
	ejs_scroll_message[4]="<span class='ejs_scroll_titre'>"+Tableau['4']['0']+"</span><br><span class='ejs_scroll_contenu'>"+Tableau['4']['1']+"</span><br><a href='"+Tableau['4']['2']+"'>Cliquez ici</a>";
	
	ejs_scroll_mode =1;
	ejs_scroll_actuel = 0;
	
	<?php if (! $_GET['page']){?>
	StkFunc(ejs_scroll_start);
	<?php }?>
	
	/**************************************************************************************************************/
	
	/*Script permettant l affichage ou non des sousmenus*/
	
		StkFunc(montre);
		function montre(id) {	
			var g = document.getElementById(id);
				//Ne pas oublier de modifier le nombre de menu principaux
				for (var j = 1; j<=11; j++) {
					if (document.getElementById('smenu'+j)) {document.getElementById('smenu'+j).style.display='none';}
				}
			if (g) {g.style.display='block';}
		}
		-->
	</script>
	<!--*************************************************************************************************************-->
</head>
<body>
	<div id="ombre">
	  <div id="global">
			<!--Bandeau-->
			<?php include ("header.php");?>
			
			<!--Menu-->
			<?php include ("menu.php");?>
			
			<!--Contenu | Corps de la page-->
			<div id="general">
			    <?php
					if (!$_GET['page']){
						include ("accueil.php");
					}else {
						include ($_GET['page']);
					}
				?>
			</div>
			
			<!--Pied de page-->
			<?php include ("footer.php");?>
		</div>	  
	</div>	
</body>
<?php
	//Deconnexion à la base de donnees
	deconnecter();
?>
</html>


A l'écran, mes news ne défilent pas correctement, sous IE, elles défilent mais sont visibles au dessus et en dessous de la box. Sous FF, elles se chevauchent.

Merci d'avance de votre aide...
Sujet déplacé dans le salon Javascript, vu qu'il s'agit ici d'un script qui déraille en mode Strict, ce qui n'est pas un problème de HTML.
Euh ?? l'inclusion de fichiers php ou javascript ne se fait-elles pas après le body ???

Déplace tes inclusions après le <body>

Edit: de même que la déconnexion a la bdd, déplace avant le </body>
Edit: j'avais eu des problemes (notamment sous IE) d'affichage de données avec javascript lorsque j'avais mis mes inclusions avant le <body>
Modifié par ashesheart (21 Mar 2008 - 14:07)
Quand tu spécifies un mode strict, les unités de propriétés top, bottom, right et left doivent être spécifiées: il faut donc que tu ajoutes la chaîne "px" à chaque fois que tu fais un appel à style.top and co dans le javascript.
merci pour vos réponses.

j'ai modifié au possible les include.
J'ai ajouté les "px" la ou il fallait et apparemment, ca fonctionne déjà mieux.

Il me reste encore un problème.
Au lieu de ne voir qu'une seule news, j'en vois 2. la news qui remonte pour laisser place à la suivante reste visible au dessus de ma news box.

apparemment, le problème viendrai de :
clip:rect(0 ,'+(ejs_scroll_largeur-8)+' ,'+(ejs_scroll_hauteur-8)+' ,0")


il n'a pas l'air d'être pris en compte...

je viens de me rendre compte que j'avais mis " avant ma parenthese de fermeture pour le clip:rect.
C'est bon tout fonctionne.

Il me reste à remplacer innerHTML pour avoir quelque chose de plus accessible.
Modifié par manuporquet (21 Mar 2008 - 15:35)