Problème pour placer un DIV
pascal
-
brise de mer -
brise de mer -
Bonjour,
Je sens que je deviens fou :-) J'ai les neurones qui explosent !! Toute aide fortement appreciée !!
Je fais un copier/coller du source de ma page web ci-dessous. Sous IE7 cela marche sans probleme, mais sous FireFox 3 cela ne marche pas. Oublions IE7 et isolons le problème avec FF3.
L'idée est de positionner un DIV dynamiquement via Javascript en utilisant son ID. Le code ci-dessous est simple, juste pour démontrer le problème. La fonction positionLayer positionne un élement "ID" avec un décalage en X et Y par rapport à un point d'ancrage "target". Dans mon exemple, le texte "mon titre" devrait être placé avec un décalage de 200 en X et 200 en Y par rapport au texte "mon point d'ancrage". Si le Javascript ne marche pas, "mon titre" restera placé tout en haut à gauche en position 0,0.
Je ne sais pas si cela est la meilleure facon de faire mais ces dernieres années cela ne posait aucun problème sur mes sites. Sur une nouvelle version d'un de mes sites, je suis desormais contraint d'utiliser XHTML 1.0 strict. Le problème est simple à décrire. Avec la ligne:
<!DOCTYPE HTML PUBLIC...
en tête de ma page web, le DIV n'est pas du tout replacé, les fonctions Javascript ne marchent pas !?
Sans cette ligne en tête de page, tout marche bien !?
J'ai testé un grand nombre de choses, j'ai googlé pas mal de pages, mais je ne sais toujours pas pourquoi, ni comment résoudre le problème après deux jours de casse-tête. Encore une fois, toute aide serait fortement appréciée!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test</title>
</head>
<body onLoad="positionLayer('title', 200, 200, 'topleft');">
<P ID="topleft">Mon point d'ancrage</P>
<div ID="title" style="position: absolute; left: 0; top: 0; width: 200; height: 200;">
Mon titre
</div>
<script>
// ---------------------------------------------------------------------------
// Below are some general functions that are used by other functions defined
// farther below.
// ---------------------------------------------------------------------------
// retrieves an object (obj) using its ID (see the HTML code ID="...")
function retrieveObject (id) {
if ( document.getElementById ) {
var obj = document.getElementById(id);
} else {
var obj = eval("document.all[id]");
}
return obj;
}
// returns the X position of the top-left corner of an object (obj)
function getPageOffsetLeft(obj) {
var x;
x = obj.offsetLeft;
if (obj.offsetParent != null)
x += getPageOffsetLeft(obj.offsetParent);
return x;
}
// returns the Y position of the top-left corner of an object (obj)
function getPageOffsetTop(obj) {
var y;
y = obj.offsetTop;
if (obj.offsetParent != null)
y += getPageOffsetTop(obj.offsetParent);
return y;
}
// ---------------------------------------------------------------------------
// The following functions are used to position an object (using its ID) with
// respect to another object (target, which should also be an ID). The given
// object is placed at +x and +y with respect to the top-left corner of the
// target position.
// ---------------------------------------------------------------------------
function positionLayer(id, x, y, target) {
var obj = retrieveObject(id);
if ( target != '' ) {
var ref = retrieveObject(target);
var offsetX = getPageOffsetLeft(ref);
var offsetY = getPageOffsetTop(ref);
} else {
var offsetX = 0;
var offsetY = 0;
}
if (obj != null) {
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
obj.style.visibility = "visible";
}
}
</script>
</body>
</html>
Je sens que je deviens fou :-) J'ai les neurones qui explosent !! Toute aide fortement appreciée !!
Je fais un copier/coller du source de ma page web ci-dessous. Sous IE7 cela marche sans probleme, mais sous FireFox 3 cela ne marche pas. Oublions IE7 et isolons le problème avec FF3.
L'idée est de positionner un DIV dynamiquement via Javascript en utilisant son ID. Le code ci-dessous est simple, juste pour démontrer le problème. La fonction positionLayer positionne un élement "ID" avec un décalage en X et Y par rapport à un point d'ancrage "target". Dans mon exemple, le texte "mon titre" devrait être placé avec un décalage de 200 en X et 200 en Y par rapport au texte "mon point d'ancrage". Si le Javascript ne marche pas, "mon titre" restera placé tout en haut à gauche en position 0,0.
Je ne sais pas si cela est la meilleure facon de faire mais ces dernieres années cela ne posait aucun problème sur mes sites. Sur une nouvelle version d'un de mes sites, je suis desormais contraint d'utiliser XHTML 1.0 strict. Le problème est simple à décrire. Avec la ligne:
<!DOCTYPE HTML PUBLIC...
en tête de ma page web, le DIV n'est pas du tout replacé, les fonctions Javascript ne marchent pas !?
Sans cette ligne en tête de page, tout marche bien !?
J'ai testé un grand nombre de choses, j'ai googlé pas mal de pages, mais je ne sais toujours pas pourquoi, ni comment résoudre le problème après deux jours de casse-tête. Encore une fois, toute aide serait fortement appréciée!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My Test</title>
</head>
<body onLoad="positionLayer('title', 200, 200, 'topleft');">
<P ID="topleft">Mon point d'ancrage</P>
<div ID="title" style="position: absolute; left: 0; top: 0; width: 200; height: 200;">
Mon titre
</div>
<script>
// ---------------------------------------------------------------------------
// Below are some general functions that are used by other functions defined
// farther below.
// ---------------------------------------------------------------------------
// retrieves an object (obj) using its ID (see the HTML code ID="...")
function retrieveObject (id) {
if ( document.getElementById ) {
var obj = document.getElementById(id);
} else {
var obj = eval("document.all[id]");
}
return obj;
}
// returns the X position of the top-left corner of an object (obj)
function getPageOffsetLeft(obj) {
var x;
x = obj.offsetLeft;
if (obj.offsetParent != null)
x += getPageOffsetLeft(obj.offsetParent);
return x;
}
// returns the Y position of the top-left corner of an object (obj)
function getPageOffsetTop(obj) {
var y;
y = obj.offsetTop;
if (obj.offsetParent != null)
y += getPageOffsetTop(obj.offsetParent);
return y;
}
// ---------------------------------------------------------------------------
// The following functions are used to position an object (using its ID) with
// respect to another object (target, which should also be an ID). The given
// object is placed at +x and +y with respect to the top-left corner of the
// target position.
// ---------------------------------------------------------------------------
function positionLayer(id, x, y, target) {
var obj = retrieveObject(id);
if ( target != '' ) {
var ref = retrieveObject(target);
var offsetX = getPageOffsetLeft(ref);
var offsetY = getPageOffsetTop(ref);
} else {
var offsetX = 0;
var offsetY = 0;
}
if (obj != null) {
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
obj.style.visibility = "visible";
}
}
</script>
</body>
</html>
A voir également:
- Problème pour placer un DIV
- Placer des points sur une carte - Guide
- Div c++ - Télécharger - Langages
- Arnaud veut s'adresser directement à son ami marc dans un message sur un réseau social. quel symbole doit-il placer dans son message devant le nom d'utilisateur de marc ? - Forum Réseaux sociaux
- Symboles à la place des lettres - Forum Mail
- Peut on changer de place dans un concert - Forum Musique / Radio / Clip
7 réponses
PROBLÈME RÈSOLU !!
Je réponds à mon propre problème mais après 3 jours d'acharnement j'ai enfin le problème est sa solution.
Comme indiqué dans mon précédent message le problème était les deux lignes suivantes:
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
Le résultat de "offsetX + x" est un nombre, mais il semble, de toute évidence, qu'en XHTML 1.0 strict initialiser l'attribut "left" ou "top" (qui existent et sont tout à fait corrects) avec un nombre soit non seulement insuffisant mais incorrect puisque cela génère une erreur dans la console Javascript indiquant "parsing incorrect".
La solution est d'ajouter l'unité également. Cela semble être une nécéssité sous FireFox 3 qui suit peut-être le "strict" à la lettre alors que IE7 complète avec une unité par défaut. Ou alors c'est un bug sous FireFox 3.
La solution est donc de remplacer les deux lignes ci-dessus par:
obj.style.left = offsetX + x + 'px';
obj.style.top = offsetY + y + 'px';
Avec cela tout marche, aussi bien sous IE7 que sous FF3, aucun message d'erreur dans la console Javascript. Tout est propre et net.
Enfin !!!!!!! En souhaitant que cela puisse en aider d'autres!!
Je réponds à mon propre problème mais après 3 jours d'acharnement j'ai enfin le problème est sa solution.
Comme indiqué dans mon précédent message le problème était les deux lignes suivantes:
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
Le résultat de "offsetX + x" est un nombre, mais il semble, de toute évidence, qu'en XHTML 1.0 strict initialiser l'attribut "left" ou "top" (qui existent et sont tout à fait corrects) avec un nombre soit non seulement insuffisant mais incorrect puisque cela génère une erreur dans la console Javascript indiquant "parsing incorrect".
La solution est d'ajouter l'unité également. Cela semble être une nécéssité sous FireFox 3 qui suit peut-être le "strict" à la lettre alors que IE7 complète avec une unité par défaut. Ou alors c'est un bug sous FireFox 3.
La solution est donc de remplacer les deux lignes ci-dessus par:
obj.style.left = offsetX + x + 'px';
obj.style.top = offsetY + y + 'px';
Avec cela tout marche, aussi bien sous IE7 que sous FF3, aucun message d'erreur dans la console Javascript. Tout est propre et net.
Enfin !!!!!!! En souhaitant que cela puisse en aider d'autres!!
Marc
Merci !! Ca marche !
Bonjour JMG78,
Pas besoin de mettre de lien, enfin je pense (faudrait que je fournisse un login/pwd etc...). Le code que j'ai copié/collé dans mon message initial illustre parfaitement le problème et de manière simple. Vous pouvez le recopier dans un fichier HTML de votre choix pour expérimenter, tester, bidouiller directement et éventuellement comprendre le pourquoi du comment. Le copier/coller est l'intégral d'un petit fichier HTMl sous mon PC dans lequel j'ai pu reproduire avec le moins de code possible mon problème (cela simplifie la phase de troubleshooting). Comme je le disais, sans la ligne DOCTYPE, tout marche sous IE7 ou FF3. Avec cette ligne, cela marche toujours sous IE7 (je sais cela n'est pas forcément une référence en soi) mais cela ne marche plus sous FF3 !?!?
J'ai du mal à voir en quoi le DOCTYPE peut influencer le code Javascript. Au départ je me suis dit que éventuellement les attributs "left" et "top" du DIV n'était plus supporté avec un DOCTYPE XHTML 1.0 strict. Mais non.
Je me suis dit que sous FF3 ils avaient changé des fonctions comme getElementById ou du genre mais pour avoir fait des recherches sur Google, je n'ai rien trouvé. Qui plus est j'ai d'autres fonctions sur la page initiale qui utilisent aussi ma fonction retrieveObject et qui avec ou sans le ligne DOCTYPE marchent. Donc je ne sais vraiment plus ou regarder.
Je devrais pouvoir fournir accès à la page initiale, mais comme je l'ai dit, le simple code fourni dans mon message initial reproduit exactement le problème. Enlevez la ligne DOCTYPE est tout marche. Remettez la et cela ne marche plus.
Merci d'avance pour toute aide!! Sincèrement!
Pas besoin de mettre de lien, enfin je pense (faudrait que je fournisse un login/pwd etc...). Le code que j'ai copié/collé dans mon message initial illustre parfaitement le problème et de manière simple. Vous pouvez le recopier dans un fichier HTML de votre choix pour expérimenter, tester, bidouiller directement et éventuellement comprendre le pourquoi du comment. Le copier/coller est l'intégral d'un petit fichier HTMl sous mon PC dans lequel j'ai pu reproduire avec le moins de code possible mon problème (cela simplifie la phase de troubleshooting). Comme je le disais, sans la ligne DOCTYPE, tout marche sous IE7 ou FF3. Avec cette ligne, cela marche toujours sous IE7 (je sais cela n'est pas forcément une référence en soi) mais cela ne marche plus sous FF3 !?!?
J'ai du mal à voir en quoi le DOCTYPE peut influencer le code Javascript. Au départ je me suis dit que éventuellement les attributs "left" et "top" du DIV n'était plus supporté avec un DOCTYPE XHTML 1.0 strict. Mais non.
Je me suis dit que sous FF3 ils avaient changé des fonctions comme getElementById ou du genre mais pour avoir fait des recherches sur Google, je n'ai rien trouvé. Qui plus est j'ai d'autres fonctions sur la page initiale qui utilisent aussi ma fonction retrieveObject et qui avec ou sans le ligne DOCTYPE marchent. Donc je ne sais vraiment plus ou regarder.
Je devrais pouvoir fournir accès à la page initiale, mais comme je l'ai dit, le simple code fourni dans mon message initial reproduit exactement le problème. Enlevez la ligne DOCTYPE est tout marche. Remettez la et cela ne marche plus.
Merci d'avance pour toute aide!! Sincèrement!
Après quelques tests supplémentaires avec des "alert" placées avant les deux lignes:
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
et après, il semble que le problème soit plus spécialement relatif à obj.style.left et à obj.style.top. Pourquoi !? Je ne sais toujours pas. L'object "obj" est bel et bien défini (un element DIV), offsetX a une valeur non nulle, x aussi, offsetY et y également, la somme est correctement calculée, mais il semble que dans le cadre d'un DOCTYPE XHTML 1.0 strict, obj.style.left et obj.style.top ne soit pas les bonnes choses à initialiser sous FireFox 3 !?!?!?
Si je mets une "alert" apres ces deux lignes en demandant d'afficher obj.style.left et obj.style.top, j'obtiens "0pt" pour les deux (les 3 caractères "0pt" sont le contenu, ce n'est pas mon "alert" qui ajoute le "pt").
Qui plus est la console erreurs de Javascript me dit que width, height, left et top "declaration dropped" !?!?
Semblerait donc !? qu'un DIV en XHTML 1.0 strict ait d'autres noms pour ces attributs !?!?
obj.style.left = offsetX + x ;
obj.style.top = offsetY + y ;
et après, il semble que le problème soit plus spécialement relatif à obj.style.left et à obj.style.top. Pourquoi !? Je ne sais toujours pas. L'object "obj" est bel et bien défini (un element DIV), offsetX a une valeur non nulle, x aussi, offsetY et y également, la somme est correctement calculée, mais il semble que dans le cadre d'un DOCTYPE XHTML 1.0 strict, obj.style.left et obj.style.top ne soit pas les bonnes choses à initialiser sous FireFox 3 !?!?!?
Si je mets une "alert" apres ces deux lignes en demandant d'afficher obj.style.left et obj.style.top, j'obtiens "0pt" pour les deux (les 3 caractères "0pt" sont le contenu, ce n'est pas mon "alert" qui ajoute le "pt").
Qui plus est la console erreurs de Javascript me dit que width, height, left et top "declaration dropped" !?!?
Semblerait donc !? qu'un DIV en XHTML 1.0 strict ait d'autres noms pour ces attributs !?!?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
