1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 83
    Points : 47
    Points
    47

    Par défaut InnerHtml OffsetWidth Width = 0

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

  2. #2
    Membre habitué Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    septembre 2008
    Messages
    114
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : septembre 2008
    Messages : 114
    Points : 169
    Points
    169

    Par défaut

    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 ?
    Vous cherchez à apprendre les bases en langage « C » ou « Go » ? N'hésitez pas à me contacter par MP.
    Vous souhaitez créer des tutoriels ? N'hésitez pas à me contacter par MP.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 83
    Points : 47
    Points
    47

    Par défaut

    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;

  4. #4
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 365
    Points : 730
    Points
    730

    Par défaut

    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

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 83
    Points : 47
    Points
    47

    Par défaut

    Bonsoir, melka one

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

    Merci

  6. #6
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    365
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 365
    Points : 730
    Points
    730

    Par défaut

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

  7. #7
    Membre éclairé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    756
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 756
    Points : 853
    Points
    853

    Par défaut

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

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 399
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 399
    Points : 24 344
    Points
    24 344

    Par défaut

    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.

  9. #9
    Membre du Club
    Profil pro
    Inscrit en
    mai 2008
    Messages
    83
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2008
    Messages : 83
    Points : 47
    Points
    47

    Par défaut

    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.

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 399
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 399
    Points : 24 344
    Points
    24 344

    Par défaut

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

Discussions similaires

  1. Différence style.width / propriété DOM offsetWidth
    Par loukoum82 dans le forum JavaScript
    Réponses: 6
    Dernier message: 22/09/2009, 14h13
  2. [W3C] [Debutant] valid. code xhtml et attributs width et align
    Par Marc_3 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 08/04/2005, 07h36
  3. div et innerHTML : tout sur une ligne?
    Par LineLe dans le forum JavaScript
    Réponses: 6
    Dernier message: 04/04/2005, 11h15
  4. Problème innerHTML sur div !!!
    Par aburner dans le forum JavaScript
    Réponses: 5
    Dernier message: 27/01/2005, 09h23
  5. getelementbyid innerhtml sur Opera?
    Par cynthia dans le forum JavaScript
    Réponses: 2
    Dernier message: 31/12/2004, 10h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo