Code JavaScript HTML OK, XHTML KO

**mra_ch** · 27/05/2010, 16h43

Bonjour,

J'ai un problème que je n'arrive pas à comprendre depuis un petit moment.
Voila, j'ai trouvé sur le web un petit bout de code permettant d'afficher sur une page web (HTML) un "scrolling text".http://www.mioplanet.com/rsc/newsticker_javascript.htm.
Il s'agit de downloader un fichier webticker_lib.js et inclure dans la page html le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  <div id="TICKER" style="overflow:hidden; width:100%"  onmouseover="TICKER_PAUSED=true" onMouseOut="TICKER_PAUSED=false">
  	<a href="#">My First Ticker!</a></li>
  </div>
  <script type="text/javascript" src="webticker.js" language="javascript"></script>

Le JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
// WebTicker by Mioplanet
// www.mioplanet.com
 
TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
 
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
 
ticker_start();
 
function ticker_start() {
	var tickerSupported = false;
	TICKER_WIDTH = document.getElementById("TICKER").style.width;
	var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
 
	// Firefox
	if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
		document.getElementById("TICKER").innerHTML = "<TABLE  cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
		tickerSupported = true;
	}
	// IE
	if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
		document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
		tickerSupported = true;
	}
	if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
		document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
		document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
		document.getElementById("TICKER").style.display="block";
		TICKER_tick();
	}
}
 
function TICKER_tick() {
	if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
	if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
	if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
	window.setTimeout("TICKER_tick()", 30);
}

Mes problèmes :
Si la page est xhtml c'est à dire en entête on a :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

le code ne marche pas, par contre si j'enlève :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!! le code marche !!!

Autre chose : si on déplace le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  <script type="text/javascript" src="webticker.js" language="javascript">

dans la partie "<head" le code ne marche pas de nouveau.

Quelcun a une solution ?
Merci d'avance

**vermine** · 27/05/2010, 17h05

Il y a un appel de la fonction dans le script donc dès que vous l'inclurez dans la page, il lance la fonction. Or, la div que la fonction contacte est déclarée après le <head> (logique), ce qui fait que la fonction ne trouve pas la div et s'arrête là.

Pour le xhtml, je ne sais pas mais il y a moyen d'écrire le script plus proprement et avec plus de rigueur.

Code JavaScript HTML OK, XHTML KO

JavaScript

Discussions similaires

Partager

Partager