Déterminer hauteur/largeur d'une div en automatique (AJAX)

Version imprimable

09/02/2014, 20h00
jeanphi6

Déterminer hauteur/largeur d'une div en automatique (AJAX)

Bonjour,

je suis confronté à un problème. J'ai une div, vide, que je rempli avec un appel AJAX à une page. Le contenu est correctement inséré dans la div et une barre de scroll est automatiquement mise.

Sauf que je voudrai faire quelque chose de plus joli et customiser la barre de scroll.

J'ai essayé plusieurs plugin que l'on trouve sur le net, mais le fait de ne pas connaitre la hauteur de la div bloque le bon fonctionnement de ceux ci.

Comment peut-on déterminer, avec jquery, la hauteur (ou largeur) d'une div chargée par de l'AJAX ?
09/02/2014, 20h45
Darkaurora

Bien que je serais ravis de me casser la tête pour te donner une solution, je te conseil vivement de modifier la scroll bar avec des propriétés CSS.

De plus je pense qu'un simple "hauteur élément jquery" sur google te conduiras a height()
09/02/2014, 21h01
jeanphi6

Coté CSS j'avais regardé vite fait cet aprèm, et je ne pensais pas qu'IE accepterait une modification de scrollbar !

J'ai trouvé ce site : http://codemug.com/html/custom-scrollbars-using-css/ qui détaille la customisation de la scrollbar sous IE, Firefox et Chrome. donc ça m'a l'air pas mal, je testerai ça !

Coté javascript, je n'ai pas trouvé, que ce soit avec les height(), innerheight ou autre ...
09/02/2014, 21h12
Darkaurora

ici
10/02/2014, 17h51
jeanphi6

Coté CSS j'ai abandonné, sous firefox ça ne passe pas et sous IE les options sont moyennes.

Coté javascript, le height() ne passe pas car la div n'est pas chargée ! Et même en utilisant un ready, le height vaut 0 ...
10/02/2014, 18h34
Darkaurora

Tu n'a qu'a récupérer la hauteur de la div une fois chargé non ?
10/02/2014, 18h57
jeanphi6

euh ouais j'aimerais bien ...

mais je ne comprends pas pourquoi lors du ready mon élément n'est pas chargé (et dans mon test, je n'ai que du texte) !

Un ready sur un div permet bien d'exécuter un traitement après le chargement en mémoire de la div ?
11/02/2014, 09h21
Bovino

Non, un ready sur un div, ça n'existe pas ! :aie:

Puisque ton contenu est chargé via AJAX, c'est dans le callback de la requête qu'il faut récupérer les dimensions actualisées.
11/02/2014, 13h38
jeanphi6

Oui je viens de voir ça qu'un ready ne passait que sur le document ...

Citation:

Puisque ton contenu est chargé via AJAX, c'est dans le callback de la requête qu'il faut récupérer les dimensions actualisées.

Par contre je crois que je mélange tout. Coté HTML j'ai une simple div :

Code:

<div id="test"></div>

Coté JS :

Code:

$.get('_test.php', null).success(function(data) { $("#test").html($(data)); });

J'ai bien mis un callback, mes données sont bien affichées à l'écran. Par contre si je trace la hauteur de la div "test", j'ai 0. Je pense que le contenu est bien récupéré, mais pas chargé, d'où ma tentative de "ready" :) Ce soir j'essayerai avec un $(document).ready() en espérant que ça passe.
Si quelqu'un a une idée ou des conseils pour faire ça je suis preneur :)
11/02/2014, 13h43
Bovino

C'est que tu dois mal t'y prendre alors...
Mais comme tu ne montres pas comment tu procèdes pour récupérer les dimensions, ça va être compliqué de t'aider...
11/02/2014, 14h11
jeanphi6
Oui surement.

Je n'ai pas le code devant moi, mais c'est tout simple :
Code:

1 2 3 4 $.get('_test.php', null).success(function(data) { $("#test").html($(data)); alert($("#test").height()); });
=> renvoie 0.

je rajouterai ce soir le code exact avec des précisions suite à vos remarques.
11/02/2014, 15h36
Darkaurora

Gné ?!?

Tu "jQueryse" trop mon amis :)

$("#test").html($(data)); ne risque pas de mettre le contenu de ta variable data dans le conteneur #test...

essaye plutôt avec $("#test").html(data);
11/02/2014, 15h48
Bovino
Il est clair que ce n'est pas particulièrement nécessaire, mais ce n'est pas incorrect pour autant.
Code:

1 2 var txt = '<div>Lorem<br />ipsum</div><p>foobar !</p>'; console.log($(txt))
renvoie bien un objet jQuery que tu peux insérer dans le DOM.

Donc, pour confirmer qu'il devient difficile de te répondre, cet exemple fonctionne correctement :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>$.get()</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script>
                jQuery(function($){
                        var hauteur1 = $('#test').height();
                        $('#console').append('<div>Hauteur initiale : '+hauteur1+'px.</div>');
                        $('#go').on('click', function(){
                                $.get('getAjx.html').success(function(data) {
                                        $("#test").html($(data));
                                        var hauteur2 = $('#test').height();
                                        $('#console').append('<div>Hauteur initiale : '+hauteur2+'px.</div>');
                                });
                        });
                });
        </script>
</head>
<body>
	<h1>Utilisation de $.get()</h1>
	<div id="test"></div>
	<button id="go">Tester</button>
	<div id="console"></div>
</body>
</html>

getAjx.html

Code:

1
2
<div>Lorem<br />Ipsum</div>
<p>Hello World !</p>

12/02/2014, 09h05
jeanphi6

Hier soir j'ai mis en ligne une première version du site : (version contenant mon problème)

En voulant préparer une version "light" de mon site pour vous montrer ce que j'avais, il s'avère que le height fonctionnait. J'ai donc repris mon site en simplifiant les animations d'affichage de mes divs et j'ai réussi à avoir quelque chose qui fonctionne ! Donc mon problème n'est pas lié à l'ajax ! Pour la partie "actu" du site, le problème sera donc résolu, mais pour la partie "presse", contenant des images, j'ai toujours un problème. je fouillerai ça.

En construisant le site, j'ai voulu bien distinguer et séparer le JS :
- une var par "partie du site" (actu/presse/shop etc.). Chaque var contient une méthode show() et hide().
- une méthode getAjax dans un script ajax.js regroupant l'appel à une page et la méthode de traitement du résultat.

mais au vu de ce post, les animations semblent s'embrouiller les unes aux autres ...