InnerHtml OffsetWidth Width = 0

Version imprimable

14/04/2017, 16h35
inspecteur rick

InnerHtml OffsetWidth Width = 0
Bonjour

Je coince sur l'utilisation consécutive de offsetwidth après un innerhtml
Code:

1 2 element.innerHTML = codehtml;
Le code html est très simple :

Code:

<img alt="" src="../Images/image.png"/>

Mon "element" est un div qui doit prendre la taille de son contenu et qui joue le rôle d'une popup qui apparaît quand je click sur un lien.
J'ai mis width et height en auto dans le css.

Le problème vient de commande

Code:

element.offsetWidth

Qui me renvoie 0 au lieu de la width de mon image insérée...

Du coup à la première apparition de ma popup, j'ai mon div qui est tout petit et mon image qui dépasse. Au 2e click, c'est nikel, l'image est entièrement dans le div qui a pris les dimensions de mon image

Une idée ? Merci d'avance
14/04/2017, 17h02
Kennel sébastien

Bonjour inspecteur rick,

Tu fais bien les choses dans le bon ordre tu as inséré, puis tu as demandé la largeur du div ?

Que fait « offsetWidth » sur l'image ?
14/04/2017, 17h19
inspecteur rick
Bonjour, Kennel sébastien

Merci de t'intéresser à mon problème :)

Je m'en sers pour positionner mon popup sur l'écran. Pour être en dessus de l’élément que j'ai clické.
Code:

1 2 3 var popupheight = element.offsetHeight - 2 * 11; var additionalpadding = lineheight / 2 - 11; var popuptop = pos.y - popupheight - 2 * 11 - 2 * additionalpadding - popupholderpos.y;
14/04/2017, 20h33
melka one

jour

c'est peut etre du au fait qu'au moment de l'insertion de l'image sa taille ne soit pas connu car pas encore precharger essai avec getBoundingClientRect() et si c'est pareil recupere la taille de l'image et donne au div la taille de l'image mais avant tout il faut precharger l'image
14/04/2017, 21h26
inspecteur rick

Bonsoir, melka one

J'ai compris la théorie :)
Mais par "précharger" l'image, tu veux dire ? Comment on s'y prend ?

Merci

il faut utiliser new image et l'evenement onload
Code:

1 2 3 4 5 6 7 8 9 var une_image=new Image une_image.src = 'chemin.jpg'; une_image.onload=function(){ // le code a executé }

15/04/2017, 01h11
Beginner.

Je crois que c'est problème de "débordement", j'ai déjà eu ça, c'est galère je trouve...

La taille du conteneur qui peut être plus petite que celle de son contenu c'est un truc que je ne trouve pas logique, je trouve étrange qu'il faille gérer cela...
15/04/2017, 09h54
NoSmoking

Bonjour,

Citation:

Mais par "précharger" l'image, tu veux dire ? Comment on s'y prend ?

cela peut être simplement le fait que la « popup » appartient au document et que l'on affiche/masque celle-ci tout simplement.
En utilisant le positionnement adéquat tu n'aurais rien de plus à gérer.
17/04/2017, 18h26
inspecteur rick

Merci pour vos réponses. Je ne peux pas tester pour l'instant...

@melka one : Merci pour la réponse sur le pré chargement de l'image, je vais essayer.

@NoSmoking : je n'ai pas compris ta réponse

Citation:

En utilisant le positionnement adéquat tu n'aurais rien de plus à gérer.
18/04/2017, 11h10
NoSmoking

Il suffit de mettre ta popup en position:absolute ET l'élément référent, celui que tu survoles, en position:relative.
03/05/2017, 18h46
inspecteur rick

Désolé du délais de réponse, j'étais en déplacement.

@NoSmoking : J'ai essayé, la popup apparait à l'endroit où j'ai mis mon div de la popup mais elle ne se positionne pas en dessus du mot survolé...
03/05/2017, 19h01
danielhagnoul

Citation:

Envoyé par inspecteur rick

[...] Mon "element" est un div qui doit prendre la taille de son contenu et qui joue le rôle d'une popup qui apparaît quand je click sur un lien. J'ai mis width et height en auto dans le css. Le problème vient de commande element.offsetWidth Qui me renvoie 0 au lieu de la width de mon image insérée [...]

Il faut utiliser getComputedStyle, voir : https://developer.mozilla.org/fr/doc...tComputedStyle
05/05/2017, 17h18
inspecteur rick

@danielhagnoul : Je viens de tester avec la fonction "getComputedStyle"
Même problème, au 1er click j'ai 0px en width de ma popup. L'image apparait dans la popup, je re-click et la j'ai la bonne width sur ma popup.
05/05/2017, 18h12
danielhagnoul
Citation:
un div qui doit prendre la taille de son contenu et qui joue le rôle d'une popup qui apparaît quand je click sur un lien
au 1er click j'ai 0px en width de ma popup. L'image apparaît dans la popup, je reclick et la j'ai la bonne width sur ma popup.
Logique si c'est l'image (le contenu) qui fixe la taille de la division (le contenant). Il faut afficher la division (popup) après le chargement de l'image (load event, message n° 6 de @melka one).

Un petit exemple géré par le CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Image au survol</title>
<meta name="Author" content="NoSmoking">
<style>
span.infobulle {
  position: relative;
  background: #EFEFEF;
  cursor: pointer;
  displa: inline-block;
}
span.infobulle span {
  display: none;
  position: absolute;
}
span.infobulle img {
  display: block;
}
span.infobulle:hover span {
  display: inline-block;
  top: 0;
  left: 50%;
  border: 1px solid #880;
  transform: translate(-50%, -100%);
}
</style>
</head>
<body>
<h1>Image au survol</h1>
<p>Ceci est un texte qui comporte une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif" alt=""></span></span> apparaissant au survol.</p>
<p>Un autre texte comportant également une <span class="infobulle">image<span><img src="https://www.developpez.net/forums/avatars/285162-danielhagnoul.gif" alt=""></span></span> apparaissant au survol.</p>
</body>
</html>