11549 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème entre Doctype et un script

Pages :
Bonjour,

j'ai un gros souci. Je souhaite faire un site sous Wordpress, et le mettre sous W3C Validator. Effectivement il me sort de nombreux problèmes, puisque je n'ai pas mis un DOCTYPE.
Si je ne l'ai pas mis, c'est pour pouvoir faire fonctionner un script (Qui fait déplacer un div de haut en bas, et inversement). Voici mon code :



<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<style type='text/css'>
.pro
{height:200px;
width:400px;
border:solid red 1px;
background-color:yellow;
position:absolute;
top:-150px;
left:500px;
}
</style>


</head>
<body>
<div id="dalbon" onclick='deplace();' onMouseout='range();' class='pro'>
tout mon menu est
</div>
<a href="#" onclick='deplace();'>Cliquez</a>
<a href="#" onclick='range();'>Enlevez </a>
<script language='javascript'>
var compte=0;
obj=document.getElementById('dalbon');
obj.style.top=obj.offsetTop;
topDepart=obj.offsetTop;

function fDeplace()
{
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop+500;
deplace();}
}

function deplace()
{
vitesseDeplacement=1;
if(compte==0)
{
deplacement=setTimeout("fDeplace()",vitesseDeplacement);}
else
{clearTimeout(rangement);
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
compte=0;
}
}


function fRange()
{
if(obj.offsetTop>=-140)
{
obj.style.top=obj.offsetTop-10;
range();}
}


function range()
{
clearTimeout(deplacement);
vitesseRange=1;
rangement=setTimeout("fRange()",vitesseRange);
compte=1;
}


</script>


Vous verrez qu'il marche parfaitement, mais si vous ajoutez un : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ou un autre DOCTYPE, le script ne fonctionne plus du tout !
Que faire ?


Merci Smiley smile
Modifié par Richie (04 Feb 2013 - 00:43)
J'ai essayé tout les Doctype qu'il y a dedans :
http://www.pompage.net/traduction/le-doctype-qu-il-vous-faut

Sinon sur ma page wordpress, j'ai :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?php
include('espace/config.php');
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[if IE 7]>
<html class="ie ie7" lang="fr-FR">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="fr-FR">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="fr-FR">
<!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">

Et sur la "page d'exemple", tu peux voir que j'ai mis uniquement cette balise :
<html xmlns="http://www.w3.org/1999/xhtml">
Je ne connais que très peu WordPress, donc je ne pense pas pouvoir t'aider.
Mais juste pour être sur est-ce que tu peux mettre un doctype HTML5 et virer tout le code entre les balises doctype et head ? Tu fais un copier/coller sur une autre page.
Ben, j'ai essayé ça sur une page php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type='text/css'>
.pro
{height:200px;
width:400px;
border:solid red 1px;
background-color:yellow;
position:absolute;
top:-150px;
left:500px;
}
</style>


</head>
<body>
<div id="dalbon" onclick='deplace();' onMouseout='range();' class='pro'>
tout mon menu est
</div>
<a href="#" onclick='deplace();'>Cliquez</a>
<a href="#" onclick='range();'>Enlevez </a>
<script type="text/javascript" language='javascript'>
var compte=0;
obj=document.getElementById('dalbon');
obj.style.top=obj.offsetTop;
topDepart=obj.offsetTop;

function fDeplace()
{
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop+500;
deplace();}
}

function deplace()
{
vitesseDeplacement=1;
if(compte==0)
{
deplacement=setTimeout("fDeplace()",vitesseDeplacement);}
else
{clearTimeout(rangement);
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
compte=0;
}
}


function fRange()
{
if(obj.offsetTop>=-140)
{
obj.style.top=obj.offsetTop-10;
range();}
}


function range()
{
clearTimeout(deplacement);
vitesseRange=1;
rangement=setTimeout("fRange()",vitesseRange);
compte=1;
}


</script>

Comme tu peux le voir, il n'y a rien en haut à part le doctype, et pourtant cela bug. Je pense qu'il y a un souci avec le javascript présent sur ce post, car j'ai également mis 2 ou 3 scripts sur ma page wordpress et ils fonctionnent tout parfaitement !
Attends j'essaye. Il vient d'où ce script ?

EDIT :
Je viens de faire un copier / coller de ton code et mis un doctype HTML5 :
<!DOCTYPE html>


Ca fonctionne, cliquez met le bloc en bas et Enlevez le met en haut, c'est bien ça non ?
Modifié par MagicCarpet (26 Jan 2013 - 19:06)
Je n'avais pas vu ton edit, merci.

Effectivement il fonctionne, mais serait ce risqué de mettre une balise <Doctype> plutot que de mettre d'autres Doctype ? Je travaille sur un projet, et je me demande si ça changerait beaucoup si je passe de <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> à <Doctype> ? Pourrait il y avoir beaucoup de disfonctionnement ?

Je m'excuse d'avance si je n'ai pas été clair, dans ce cas j'essayerai de mieux reformuler Smiley smile
Modifié par Richie (26 Jan 2013 - 17:59)
Déjà ce n'est pas <DOCTYPE> mais <!DOCTYPE html>, c'est pas la même chose.

Ensuite, des fois, on dirait que vous fabriqué des bombes Smiley lol
Pourquoi ça serais dangereux ? Non, ton clavier ne va pas te sauter à la figure.

Pour apprendre, surtout quand on ne connait pas, il faut tester, se poser des questions, essayer, chercher, prendre des risques, remettre en question, etc. Mais il n'y a pas de danger Smiley smile

Ensuite, pour répondre un peu plus sérieusement (bien que ma phrase ci-dessus ai du sens), le doctype HTML5 est l'avenir. De plus en plus utilisé et pour le moment il rend ton code fonctionnel et non l'inverse, donc pourquoi se priver ? Pour le reste déjà fait, il n'y a pas de raison que ce doctype pose de problème, je dirais même que ce sont les anciens qui peuvent en poser car chaque jours ils deviennent de plus en plus obsolète. Pour ma part je n'utilise plus que ce doctype.

Est-ce que je réponds à ta question ?
Modifié par MagicCarpet (26 Jan 2013 - 19:06)
D'accord, je vais donc me servir de cette balise <!DOCTYPE> !
Je vous remercie pour votre aide et votre franchise. Je peux donc partir le coeur léger Smiley smile
Modifié par Richie (26 Jan 2013 - 18:20)
Avant de partir met ton post en [Résolu] Smiley smile

Et de rien ça me rends aussi le coeur léger de pouvoir aider à mon tour Smiley smile
Erreur de ma part, le doctype hmlt5 c'est :

<!DOCTYPE html>


et non pas <!DOCTYPE>. Le HTML5 est (trop ?) laxiste, donc ça devrait fonctionner mais il faut faire les choses bien, donc préciser html.
Effectivement, je viens tout juste de le tester. J'ai meme fait la comparaison avec et sans <!DOCTYPE html>...
Là je ne comprends pas, il fonctionne toujours chez moi.
Tu as dû changer quelque chose d'autre non ?

Tu essayes avec quel navigateur, tu es sous quel OS et quel IDE ?
J'utilise Google Chrome, mais je viens de tester sous Firefox et IE, le script ne fonctionne toujours pas.

Je m'excuse mais je connais pas la définition du mot "OS" (Windows 7 mais pas sur que j'ai bien compris ta demande) mais pour l'IDE, je me sers de notepad++
Modifié par Richie (26 Jan 2013 - 19:25)
OS : Operating System, donc Windows j'imagine si tu utilises NotePad++.

Est-ce que tu peux essayer ici et me dire se qui ce passe ?
Ta page fonctionne, car tu as juste mis comme code :
a écrit :
<!DOCTYPE>


Je viens de vérifier le code source de ta page Smiley lol
Pages :
Sujet clos
Aller à