Détecter la largeur d'un div pour l'attribuer à un autre div
Résolu
typiac
Messages postés
92
Date d'inscription
Statut
Membre
Dernière intervention
-
typiac Messages postés 92 Date d'inscription Statut Membre Dernière intervention -
typiac Messages postés 92 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je bute sur un problème qui nécessite du javascript, enfin....je pense!
J'ai concrètement un container comprenant:
- 1 image
- 1 div "hover" faisant l'intégralité de la largeur de la page
- 1 div "légende"
Comme ceci:
Mon problème est que je voudrai que la div "legende" ait la même largeur que l'image mais comme la div "hover" fait 100%, je n'y parviens pas.
En cherchant un peu partout, je me suis rendu compte que javascript permet de détecter la largeur d'un div comme ceci:
Du coup, une fois récupéré, comment faire pour attribuer la valeur de width à ma div "legende"?
Je bute sur un problème qui nécessite du javascript, enfin....je pense!
J'ai concrètement un container comprenant:
- 1 image
- 1 div "hover" faisant l'intégralité de la largeur de la page
- 1 div "légende"
Comme ceci:
<div class='container' style="margin:auto;right:0;left:0;"> <img src="" /> <div id="hover" style='width:100%'></div> <div class=''legende"></div> </div>
Mon problème est que je voudrai que la div "legende" ait la même largeur que l'image mais comme la div "hover" fait 100%, je n'y parviens pas.
En cherchant un peu partout, je me suis rendu compte que javascript permet de détecter la largeur d'un div comme ceci:
<script type="text/javascript">
function TestHauteur(){
document.getElementById('header').style.width;
}
</script>
Du coup, une fois récupéré, comment faire pour attribuer la valeur de width à ma div "legende"?
A voir également:
- Détecter la largeur d'un div pour l'attribuer à un autre div
- Comment détecter un traceur sur téléphone - Accueil - Confidentialité
- Div c++ - Télécharger - Langages
- Attribuer une valeur à une cellule texte excel ✓ - Forum Excel
- Détecter clé usb - Guide
- Attribuer une sonnerie à un contact - Guide
6 réponses
Salut !
Faudrait que tu nous fasse un schéma rapide pour nous indiquer les emplacements, tailles, noms, etc... des divs en question. Ca se trouve pas besoin de js mais de css...
Sinon au niveau du js :
Faudrait que tu nous fasse un schéma rapide pour nous indiquer les emplacements, tailles, noms, etc... des divs en question. Ca se trouve pas besoin de js mais de css...
Sinon au niveau du js :
<script type="text/javascript">
var width_header = document.getElementById('header').style.width;
document.getElementById('legende').style.width = width_header + 'px';
</script>
Merci de ton retour! Voilà un schémas plus complet:
L'idée est de modifié la largeur de la div "legende" au chargement de la page en reprenant la largeur de l'image "current_picture"
Donc, si je reprends ton code:
ps: message rédigé de la main droite avec un bébé dans le bras gauche pour cause de femme partie aux soldes!!!
<div class='container' style="margin:auto;right:0;left:0;">
<!-- l'image s'adapte à la taille de l'écran -->
<img id="current_picture" src="" style="max-width:100%" />
<div id="hover" style='width:100%'></div>
<!-- la div a par défaut une largeur de 100% qui est héritée du container -->
<div class=''legende"></div>
</div>
L'idée est de modifié la largeur de la div "legende" au chargement de la page en reprenant la largeur de l'image "current_picture"
Donc, si je reprends ton code:
var width_header = document.getElementById("current_picture").style.width;
document.getElementById("legende").style.width = width_header + 'px';
ps: message rédigé de la main droite avec un bébé dans le bras gauche pour cause de femme partie aux soldes!!!
Si l'image a une largeur de 100% et que ta div 'legende' doit être de la même taille que l'image, ta div 'legende' doit faire 100% non ??
Et je ne sais pas si c'est normal, mais il y a deux single quotes à gauche de 'legende'.
Et je ne sais pas si c'est normal, mais il y a deux single quotes à gauche de 'legende'.
Désolé pour le single quote, j'ai fait l'erreur en recopiant le code.
Oui, si l'image fait 100% de large (image horizontale), par défaut la div "legende" fait 100% ce qui est bon.
Par contre, dans le cas d'une image verticale, elle ne prendra pas 100% de la largeur alors que la légende oui, ce que je veux corriger. :)
Oui, si l'image fait 100% de large (image horizontale), par défaut la div "legende" fait 100% ce qui est bon.
Par contre, dans le cas d'une image verticale, elle ne prendra pas 100% de la largeur alors que la légende oui, ce que je veux corriger. :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui, mais si j'avais pu résoudre le problème avec du css, je te garantis que je l'aurai fait!
Néanmoins, j'ai finalement réussi avec le script suivant:
Néanmoins, j'ai finalement réussi avec le script suivant:
var img = document.getElementById("ID_PHOTO");
var obj = document.getElementById("ID_LEGENDE");
obj.style.width = img.width + "px";
obj.style.margin = "auto";
Mais si l'image est plus petite que la hauteur et la largeur du navigateur, il va falloir centrer tout le truc ( img et legende ).
En tout cas, il y a moyen de faire ça proprement en css, avec une bonne réflexion sur papier pour définir les couches et une utilisation efficace des "position: relative" et "position: absolute;".
En tout cas, il y a moyen de faire ça proprement en css, avec une bonne réflexion sur papier pour définir les couches et une utilisation efficace des "position: relative" et "position: absolute;".
