Sujet Précédent Sujet Suivant

Problème doctype et 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:05
walid01300
Messages postés
8
Date d'inscription
mardi 27 octobre 2009
Statut
Membre
Dernière intervention
6 mai 2010
 - 29 oct. 2009 à 09:32
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:

2 réponses

Réponse 1 / 2
boulepate62
Messages postés
22968
Date d'inscription
mardi 14 mars 2006
Statut
Contributeur sécurité
Dernière intervention
24 décembre 2016
 2 588
29 oct. 2009 à 01:37
Bonjour

Tu utilises un <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict et tu ne respectes pas les régles quel intérêt ? Change par un <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional peut-être que ça passera ou alors utiliser un DOCTYPE non XHTML

0
Réponse 2 / 2
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:32
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 !
0