11488 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]DOCTYPE et document.body.scrollTop BUG IE

Bonjour,

Je viens sur ce forum après avoir epuisé toutes mes sources habituelles (developpez.com par exemple).

Mon problème:

Après m'etre aperçu que ce que j'avais ecrit (HTML+CSS+Javascript), fonctionnant parfaitement sous IE et Firefox, affichait le code de la page au lieu de son contenu chez un ami equipé d'un Apple. J'ai entrepris de valider mon code (http://validator.w3.org/). J'ai donc obtenu des pages validées mais qui ne fonctionnait plus à cause notamment d'affectation de valeur sans unité (...top=100 au lieu de de ... top=100+"px" ). Tout est corrigé et valide , mais il me reste un problème que je ne sais pas par quel bout prendre !

j'ai dans le Head de ma page une routine qui surveille le scroll et qui met à jour une variable qui sera traitée ultérieurement, j'ai tout simplifié (suppression des tests navigateur, etc ) pour arriver à un minimum de code pour tester :

La page de test contient plusieurs lignes pour permettre un scroll de la page et un lien pour afficher un alert.

voila la page de test (sans toutes les lignes texte...):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-script-type" content="text/javascript" />
  <meta http-equiv="Content-style-type" content="text/css" />
  <meta http-equiv="Content-language" content="fr" />
  <title>essai page</title>
<script type="text/javascript">
<!--
function pos() { return document.body.scrollTop; }
-->
</script>
</head>
<body>
  texte<br />
  texte<br />
  texte<br />
  ...
  <a href="index.htm" onClick="alert(pos())">clic</a>
</body>
</html>


Dans cet exemple le DOCTYPE est un XHTML mais j'ai essayé avec un HTML 4.01 et c'est la même chose.

lorsque le DOCTYPE est présent, Internet Explorer retourne la valeur 0.
lorsque le DOCTYPE est supprimé, il retourne la bonne valeur.
avec FIREFOX cela marche dans tous les cas.

Auriez-vous une piste ?
Modifié par lacsap49 (31 Mar 2006 - 16:12)
Essaie de remplacer document.body.scrollTop par document.documentElement.scrollTop et pareil pour Left pour voir ce que ça donne.
Alors la, Merci, Merci, Merci...

J'ai fouillé partout pour tenter de comprendre, Mais j'etais vraiment coincé.

Alors Merci QuentinC pour cette réponse efficace qui fonctionne aussi bien sous Firefox et IE en plus !

Jusqu'à présent j'ai toujours obtenu des réponses efficaces sur mon forum de référence, mais la, j'étais coincé.

Mon seul regret est de ne pas pouvoir renvoyer la balle aux gens qui me fournissent bénévolement toutes ces réponses.

Pascal
Y'a pas de quoi !
C'est un bug connu d'IE : document.body.scrollXXX est à remplacer par document.documentElement.scrollXXX lorsqu'on utilise un doctype valide.
Pour ce qui est de firefox, c'est du hasard chanceux.
Oui mais IE5 et IE6 en mode quirck continuent à reconnaitre document.body.scrollXXX
et pour passer partout je mets ça :

D=document;
gk=window.Event?1:0; // navigateurs Gecko,Opéra ou IE
de=!D.documentElement.clientWidth?D.body:
D.documentElement ;//détection IE5 et quirk IE6 ou IE6 standard
// et enfin :
   sy=gk?pageYOffset:de.scrollTop       //scroll vertical

Modifié par chmel (31 Mar 2006 - 16:05)
bon alors j'insiste j'ai le code suivant qui me fait bugger IE au point que ça recharge la page en boucle !

l'appel:

function animFondTop(delai,ht1,ht2,mg1,mg2) {

  ftSens = (ht1 > ht2)? "-" : "+"; // determine le sens increment ou decrement
  ftHt1=ht1; ftHt2=ht2; ftMg1=mg1; ftMg2=mg2;
  ftClear=setInterval("setFondTop()",delai);
}


et le code qui fait planter :
function setFondTop() {
  if (ftSens=="+") {
    ftHt1=ftHt1+6;
    ftMg1=ftMg1-6;
    if (ftHt1 >= ftHt2) { ftHt1=ftHt2; ftMg1=ftMg2; clearInterval(ftClear); }
  }
  else {
    ftHt1=ftHt1-6;
    ftMg1=ftMg1+6;
    if (ftHt1 <= ftHt2) { ftHt1=ftHt2; ftMg1=ftMg2; clearInterval(ftClear); }
  }

  with ( document.getElementById('top').style ) {
    height=ftHt1+"px";
    marginTop=Math.round(ftMg1/2)+"px";
    marginBottom=Math.round(ftMg1/2)+"px";
  }
}


si je laisse height ou marginTop ou marginBottom ça plante si je vire tout marche bien !
auriez-vous une piste, je dois faire quelque chose de travers !
Sujet clos
Aller à