Discussion :

[jeanphi6]

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 ?

[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()

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

[Darkaurora]

ici

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

[Darkaurora]

Tu n'a qu'a récupérer la hauteur de la div une fois chargé non ?

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

[Bovino]

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

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.

[jeanphi6]

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

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

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

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

Coté JS :

Code :

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

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

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

[jeanphi6]

Oui surement.

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

Code :

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

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.

[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);

[Bovino]

Il est clair que ce n'est pas particulièrement nécessaire, mais ce n'est pas incorrect pour autant.

Code :

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

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.

[Bovino]

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

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

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

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

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