Problème de doctype et de dhtml urgent svp

Résolu/Fermé
walid01300 Messages postés 8 Date d'inscription mardi 27 octobre 2009 Statut Membre Dernière intervention 6 mai 2010 - 28 oct. 2009 à 18:11
walid01300 Messages postés 8 Date d'inscription mardi 27 octobre 2009 Statut Membre Dernière intervention 6 mai 2010 - 29 oct. 2009 à 09:33
Bonjour,
alors voila mon problème j'ai un petit code en javascript qui fonctionne parfaitement lorsque je ne met pas de doctype a ma page html. Par contre lorsque je met le doctype :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



le code ne fonctionne plus, et j'arrive pas a savoir d'où sa vien.. :( le code me permet de faire arrivé mon texte petit a petit, voila le code js :


var spd=100;
var obj;
function mov(p) {
	with(obj[p].style) {
		y = parseInt(top) / 1.2;
		top = 10 + y;
		if(y<0)window.setTimeout("mov("+p+")",16);
		else top=10;
	}
}

onload = function (){
	
	// text
	T = document.getElementById("hash").innerHTML.split(" ");
	for(i=0;i<T.length;i++){
		o=document.createElement("span");
		document.body.appendChild(o);
		z=T[i].indexOf("http");if(z>=0)T[i]="<a href='"+T[i].substring(z)+"'>"+T[i]+"</a>";
		t=T[i].toLowerCase();z=t.indexOf("img");if(z>0)T[i]+=" "+T[i+1],T[i+1]="";
		o.innerHTML=T[i]+" ";
		o.style.top=-document.body.offsetHeight*10;
		window.setTimeout("mov("+i+")",1000+i*spd);
	}
	obj=document.getElementsByTagName("span");
}




css :

*
{
	padding : 0;
	margin : 0;
}

body {text-align:right; padding:0; margin:0; position:absolute; overflow:hidden; background:#FFF; left:0; top:0; width:100%; height:100%;}
	span {
		POSITION: relative;
		font-family: arial;
		font-weight:normal;
		color: #000000;
		font-size: 14px;
		z-index:1;
		left:-10%;
	}




et html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>hail the old masters - Interactive DHTML art-demos</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<script type="text/javascript" src="../js/texte.js"></script>
</head>
<body>

<div id=hash style="display:none">
<strong>Ovidius Ars Amatoria I</strong><br><br>
Siquis in hoc artem populo non novit amandi, <br>  Hoc legat et lecto carmine doctus amet. <br>Arte citae veloque rates remoque moventur, <br>  Arte leves currus: arte regendus amor. <br><br>
<strong><em>5</em></strong> Curribus Automedon lentisque erat aptus habenis, <br>  Tiphys in Haemonia puppe magister erat: <br>Me Venus artificem tenero praefecit Amori; <br>  Tiphys et Automedon dicar Amoris ego. <br>Ille quidem ferus est et qui mihi saepe repugnet: <br><br>
<strong><em>10</em></strong> Sed puer est, aetas mollis et apta regi. <br>Phillyrides puerum cithara perfecit Achillem, <br>  Atque animos placida contudit arte feros. <br>Qui totiens socios, totiens exterruit hostes, <br>  Creditur annosum pertimuisse senem. <br><br>
<strong><em>15</em></strong> Quas Hector sensurus erat, poscente magistro...
<br><br>
<img src="encrierplume.gif"> http://www.ulikoehler.de/Autoren/Ovid/ArsAmatoria01.html
<br>
</div>

</body></html>



j'espère que j'ai été assez compréhensible.. Merci pour vos futur réponse!
A voir également:
  • Problème de doctype et de dhtml urgent svp
  • Dhtml download - Télécharger - Divers Web & Internet

1 réponse

walid01300 Messages postés 8 Date d'inscription mardi 27 octobre 2009 Statut Membre Dernière intervention 6 mai 2010 1
29 oct. 2009 à 09:33
C'est bon problème résolu en fait quand on est en mode strict en XHTML, ce mode vaut aussi pour la CSS. Or en CSS on doit toujours préciser les unités pour les valeurs.
Donc il faut ajouter "px" (pour pixel) à chaque fois qu'on modifies la propriété top.

Ce qui donne le js suivant :
function mov(p) {
with(obj[p].style) {
y = parseInt(top) / 1.2;
top = 10 + y +"px";
if(y<0)
window.setTimeout("mov("+p+")",16);
else
top="10px";
}
}

onload = function (){
// text
T = document.getElementById("hash").innerHTML.split(" ");
for(i=0;i<T.length;i++){
o=document.createElement("span");
document.body.appendChild(o);
z=T[i].indexOf("http");
if(z>=0)
T[i]="<a href='"+T[i].substring(z)+"'>"+T[i]+"</a>";
t=T[i].toLowerCase();
z=t.indexOf("img");
if(z>0)
T[i]+=" "+T[i+1],T[i+1]="";
o.innerHTML=T[i]+" ";
o.style.top=-document.body.offsetHeight*10+"px";
window.setTimeout("mov("+i+")",1000+i*spd);
}
obj=document.getElementsByTagName("span");
}


Voila !
1