Sujet Précédent Sujet Suivant

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

Réponse 1 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
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
Réponse 2 / 4
nhervagault Messages postés 6063 Date d'inscription dimanche 13 avril 2003 Statut Membre Dernière intervention 15 juillet 2011 37
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
Réponse 3 / 4
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
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
Réponse 4 / 4
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

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous