Discussion :

[inspecteur rick]

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
element.innerHTML = codehtml;

Le code html est très simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

[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

[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

[melka one]

il faut utiliser new image et l'evenement onload

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é
 
}

[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...

[NoSmoking]

Bonjour,

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.

[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

En utilisant le positionnement adéquat tu n'aurais rien de plus à gérer.

[NoSmoking]

Il suffit de mettre ta popup en position:absolute ET l'élément référent, celui que tu survoles, en position:relative.

[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é...

[danielhagnoul]

[...] 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

[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.

[danielhagnoul]

• 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).

[NoSmoking]

Un petit exemple géré par le CSS

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>