Javascript & XHTML Strict

Résolu
plasticism
Messages postés
2
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
27 août 2008
- 27 août 2008 à 01:42
plasticism
Messages postés
2
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
27 août 2008
- 27 août 2008 à 10:37
Bonjour,


je sèche depuis presque 2 jours sur ce script tout bête, adapté d'une source que j'ai pompé je-ne-sais-plus-où...

Il est sensé afficher une "bulle d'aide" (une div) qui suit la souris
quand elle survole un objet particulier (ici j'ai mis un lien).

Donc pour résumer : je survole, la div apparait et suit la souris, je quitte la zone, la div disparaît.


Rien de bien sorcier jusque là. Le problème c'était de savoir pourquoi
dans MA page, la div apparaît, mais au lieu de se positionner près du
curseur, elle reste à sa position originale. La console d'erreurs de
Firefox (seul navigateur testé pour le moment) m'affiche les erreurs qui seréfèrents aux lignes 36 et 37 de mon code :
Avertissement : Erreur d'analyse de la valeur pour la propriété « left ».  Déclaration abandonnée.


Avertissement : Erreur d'analyse de la valeur pour la propriété « top ».  Déclaration abandonnée.

J'ai isolé le code qui pose problème pour y voir plus clair :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr_FR" lang="fr_FR">

<head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>

<title>Help !</title>

<style type="text/css">

#infobulle {

    position: absolute;

    visibility: hidden;

    border: 1px solid #CCCCCC;

    padding: 10px;

    background-color: Yellow;

}

</style>

<script language="javascript" type="text/javascript">

document.onmousemove = get_mouse;

/**

 * Récupère les corrdonnées de la souris et les affecte à la bulle

 */

function get_mouse(e) {
    var x y 0;

    if(e.pageX || e.pageY) {

        x = e.pageX;

        y = e.pageY;

    }

    else{

        x = event.x;

        y = event.y;

    }

    var padding = 5;

    var bubble = document.getElementById("infobulle");

    bubble.style.left = x + padding;

    bubble.style.top = y + padding;

}

/**

 * Affiche la bulle

 */

function see_bubble(text) {

    var bubble = document.getElementById("infobulle");

    bubble.style.visibility = "visible";

    bubble.style.display = "block";

    bubbleLength = bubble.firstChild.length;

    bubble.firstChild.replaceData(0, bubbleLength, text);

}

/**

 * Cache la bulle

 */

function kill_bubble() {

    var bubble = document.getElementById("infobulle");

    bubble.style.visibility = "hidden";

    bubble.style.display = "none";

}

</script>

</head>

&nbsp;

    [# Un lien...]

</html>

Bon maintenant le rapport avec le titre de mon post (je suis sûr que tout le monde se posait la question) c'est ça : pourquoi quand j'enlève la première ligne (le doctype), tout fonctionne ??

Et surtout : comment je peux y remédier ? (sans me passer du XHTML Strict)

Je serais éternellement reconnaissant à la ou les personnes qui pourront m'aider. Parce que là, 2 jours pour trouver que l'erreur vient d'une ligne à la con, je suis pas loin de péter un câble...

4 réponses

PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
27 août 2008 à 09:15
Bonjour,
attendu que les unités pour
les attributs left, top etc... peuvent être des pt, mm, cm, em...ou px
il est nécéssaire de préciser l'unité que tu souhaites.
IExplorerIE par défaut semble affecter des px et FireFox ne sachant pas ne fait pas...
donc


bubble.style.left = x + padding




+"px"
;



bubble.style.top = y + padding




+"px"
;




;O)
3
nhervagault
Messages postés
6063
Date d'inscription
dimanche 13 avril 2003
Statut
Modérateur
Dernière intervention
15 juillet 2011
35
27 août 2008 à 09:37
Salut,

Ton test n'est pas correct aussi, pageX indefini

voila le correctif

function get_mouse(e) {    var x y 0;
    if(e) {
        x = e.pageX;
        y = e.pageY;   
    }
    else{
        x = event.x;
        y = event.y;
  }
  var padding = 5;
  var bubble = document.getElementById("infobulle");
   bubble.style.left = x + padding+ "px";
   bubble.style.top = y + padding+ "px";
}
3
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
27 août 2008 à 09:41
Effectivement je n'ai pas traité ce point, mais avec un DOCTYPE il faut tout prendre en compte...
voir

[tutoriaux/POSITION-SOURIS-DANS-PAGE_478.aspx POSITION DE LA SOURIS DANS LA PAGE
]



...





;O)
0
plasticism
Messages postés
2
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
27 août 2008

27 août 2008 à 10:37
Un immense merci à vous !
C'est vraiment l'erreur bête, cette fois je crois que je m'en souviendrais...
0