Discussion :

[masiuxus]

Bonjour.

J'ai quelques soucis avec mon code jQuery ...

Au chargement de mon site, le fichier index.php se charge, dans lequel j'appelle entre autres 3 DIV :

* 1 DIV dans lequel il y a mon menu
* 1 DIV, appelé "principale", dans lequel apparaît toutes les pages appelées par le menu (dont la hauteur est donc variable)
* 1 DIV, que j'appelle "menubas", que je veux mettre toujours sous le DIV nommé "principale"

Quand on clique sur un item du menu, la fonction "biggest" est appelée, dont voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function () {	
function biggest(page)
{
   $('#principale').load(page+'.php');
   $('#principale').animate({width: "0px",height: "0px"},0);
   $('#principale').animate({width: w+"px",height: h+"px"},800);
   $('#menubas').css('top',$('#principale').height());
}	
});

L'idée étant de mettre automatiquement le DIV nommé "menubas" sous le DIV nommé "principale" à chaque ouverture de pages ...

Mais ce code ne fonctionne pas ... Et là, je ne vois pas pourquoi.
Est-ce que quelqu'un a une solution à mon problème ?

[danielhagnoul]

Bonsoir

Code :

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

1
2
3
4
5
6
7
8
/*
 * Toutes les transactions AJAX sont asynchrones, 
 * donc l'animation a lieu avant le chargement de la page.
*/
$('#principale').load(page+'.php', function(){
	 // le chargement est terminé place à l'animation
	 // positionnement #menubas
});

[masiuxus]

Merci pour cette réponse mais ça ne change rien du tout en fait ... Le div "menubas" est toujours collé en haut, sur le div "principale" ...

Mon code est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
 
var w = $(document).width() - 215;
var h = $(document).height() - 130;
 
$('#principale').load(page+'.php?', function() {
   $('#principale').animate({width: "0px",height: "0px"},0);
   $('#principale').animate({width: w+"px",height: h+"px"},800);
   $('#menubas').css('top',$('#principale').height());
});