11521 sujets

JavaScript, DOM et API Web HTML5

Récupérer largeur total d'une div

MAJ:

Je suis parti sur autre chose, mais j'ai besoin de récupérer la largeur d'une div. Mes explications sur un autre poste plus bas, merci.

––––––––––––––––––––––––––––––––––––––––––

Bonjour, Bonsoir,

J'ai tenté, avec différents codes récoltés sur le net de trouver mon bonheur, mais en vain.

Je suis entrain de faire un site wordpress avec une présentation des posts images de manière horizontale en utilisant le plugin "jQuery custom content scroller".

Dans les exemples, c'est assez simple, car évidement, on crée le code à sa guise. Or sur wordpress, je n'ai pas pu touché à certaines balises hérité de mon thème parent.

Apparemment le plugin génère la largeur de manière dynamique, selon le contenu et insère sur la balise de la class "mCSB_container". Pour ma part, j'ai bien cette valeur, mais il se trouve que après cette div, je me retrouve avec une balise "main" avec un id "main et une class "site-main" hérité de wordpress et je dois y mettre une valeur en px afin que la gallery s'affiche correctement.

J'ai donc trouvé un code javascript qui marche presque comme il faut:

[<script>
	$(function(){
		$('#main').width($('#main').parents("div").width());
	});
</script>


Mais le soucis, c'est que ce code ne reprend pas la valeur indiqué sur la div parente, mais la taille actuelle de la div parente. En l'occurrence, la valeur est de la maman est de 2277px, mais l'enfant indique 1341px, largeur actuelle de ma fenêtre.

<div id="mCSB_1_container" class="mCSB_container" style="position:relative; top:0, left:0px; width: 2277px;" dir="ltr">


Ce style est généré par le plugin.

<main id="main" class="site-main" role="main" style="width: 1341px;">


Ce code-ci, contient l'appel javascript indiqué plus haut et qui indique la largeur visible de la div indiqué plus haut, mais par rapport à la taille de la fenêtre et non pas à sa taille complète.

Est-ce que quelqu'un saurait comment récupérer la valeur indiqué avec ces infos ? Je vous avoue que je ne suis pas un AS du code à part CSS, HTML et un peu de PHP. Le javascript, je patauge un brin Smiley smile .

Je ne fournis pas de lien pour l'instant, car j'imagine que c'est compréhensible ainsi, mais si besoin, je vous transmets le site, par la suite.

D'avance merci pour votre temps.

David
Modifié par playgraphix (05 Feb 2016 - 14:28)
Salut,

playgraphix a écrit :
Je ne fournis pas de lien pour l'instant, car j'imagine que c'est compréhensible ainsi, mais si besoin, je vous transmets le site, par la suite.
Pas compréhensible pour ma part. Ca irait tellement plus vite avec un lien Smiley smile
Je voudrais juste trouver la solution, pour savoir, mais je vais de toute manière adopter, au final, une autre solution avec CSS. Smiley smile
Modifié par playgraphix (01 Feb 2016 - 16:46)
Perso je prendrais pas le problème de cette manière.
playgraphix a écrit :
Dans les exemples, c'est assez simple, car évidement, on crée le code à sa guise. Or sur wordpress, je n'ai pas pu touché à certaines balises hérité de mon thème parent.

Le problème il se situe plutôt à ce niveau, tu devrais chercher à adapter ton balisage plutôt que de bidouiller par dessus.

Sinon l'instruction que tu cherches si je te suis c'est :
$('#main').width($('#mCSB_1_container').css("width"));
.css() te permet de récupérer les styles inline.
Désolé, mais ça n'a pas l'air de marcher ce script.

Mais je suis d'accord avec toi, je ne vais plus bidouiller ce code et passer à une version plus simple, qui permettra d'éviter ce genre de problème d'affichage et être également plus propre.

Merci pour ton aide malgré tout.

Smiley biggrin
Alors j'y suis presque, mais il me faut toujours une fonction de récupération de la largeur réelle d'une div, en l'occurence, celle avec l'ID #main.

J'ai placé ce script:

	$(function(){
	    $('#main').css({'width' [decu]($('#main'). width()))+'px'});
	});


Il est sensé récupérer une valeur de largeur, mais au lieu de ça j'ai une largeur totalement incompréhensible, pour moi du moins.

Je voudrais qu'il récupérer la largeur de #main et qu'il l'insère dans le CSS sur cette même balise et au lieu d'avoir 3283px de largeur, j'ai, avec ce code, une largeur de 291px.

Est-ce que quelqu'un pourrait m'aider ?

L'adresse reste la même, à savoir:

http://tessagerster.ch/2016/

D'avance merci
Sujet clos
Aller à