Ajuster la marge d'un wrapper suivant taille de la fenêtre

**Lionel_aw** · 07/06/2010, 17h34

Bonjour,

j'ai parcouru le forum et aussi plein d'ouvrages sur JQuery et je ne trouve pas la solution à mon problème très simple :

J'ai une page web qui tient dans un div ( <div id="wrapper"> ), la taille de ce div est stable, environ 800 pixel de haut.
Je le centre horizontalement dans la page à l'aide du css ( margin-left:auto; et margin-right:auto

.

Pour le centrage vertical, je voudrais pouvoir mesurer la taille de la fenêtre ( le viewPort ?? ) et suivant le cas, ajuster la propriété css margin-top du div.

Par exemple si la fenêtre fait moins de 800px de haut , je détermine une marge très faible et si j'ai une fenêtre plus haute, je fais un calcul pour déterminer une marge pour centrer verticalement (ou à peu près) le div, du genre margin-top = (hauteurFenetre-hauteurDiv) / 2

j'arrive pas à décoller pour faire ce petit bout de code...

En plus je ne dois pas être le seul à rencontrer ce problème....

Merci à tous

Lionel

**Lionel_aw** · 07/06/2010, 18h25

J'ai progressé, j'ai écrit ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
               var $haut = $(window).height();
	       var $wrapH = $("#wrapper").outerHeight;
 
			if ($haut < $wrapH)
		{
		$("#wrapper").css("margin-top","10px");	
		}
		else
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

Ce code ne fonctionne pas, sauf si je remplace la déclaration dans le else comme ceci

Code :

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

1
2
3
4
5
		else
		{
		var $newMargin = ($haut - 800) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

en mettant 800 ( la hauteur à peu près du div) en dur ça marche, je ne comprend pas pourquoi il ne veut pas considérer $wrapH puisque cette valeur est correctement lue dans le test if ($haut < $wrapH) ... bizarre..

De plus, si je change la taille de la fenêtre comment réactiver le test pour réactualiser la marge??

Merci

**Lionel_aw** · 07/06/2010, 18h37

Je mérite une paire de tartes, lol, j'avais oublié de mettre () après outerHeight()

voici mon code final

Code :

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

1
2
3
4
5
6
7
8
9
 
        	var $haut = $(window).height();
	        var $wrapH = $("#wrapper").outerHeight();
 
			if ($haut > $wrapH)
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",$newMargin+"px");	
		}

j'ai mis la valeur basse de margin-top dans le style css de base et je ne l'ajuste que si la fenêtre est plus haute que mon DIV.
et là ça marche !!

Par contre il me reste un problème, comment détecter le redimensionnement de la fenêtre pour ajuster à nouveau cette marge ?

Merci

**Lionel_aw** · 07/06/2010, 19h10

Décidément je fais les questions et les réponses, j'ai fini par trouver ..
Si ça peut en intéresser parmi vous, voici mon code final pour la fonction init de Jquery

Code :

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
28
29
 
$(function()		{
 
 
/*------------------------------------*/
	var checkHeight = function()
	{
	$("#wrapper").css("margin-top","10px");	/* force la marge avant redim  */
 
	var $haut = $(window).height();
	var $wrapH = $("#wrapper").outerHeight();
 
			if ($haut > $wrapH)
		{
		var $newMargin = ($haut - $wrapH) / 2;
		$("#wrapper").css("margin-top",($haut - $wrapH) / 2 +"px");	
		} else {
		$("#wrapper").css("margin-top","10px");	
		}
	}		/* fin function checkHeight  */
 
/*----------------------------------*/	
 
	checkHeight();
	$(window).resize(checkHeight);
 
/* ici le reste de mon code JQuery  */
 
});

J'ai été obligé de forcer la marge à la première ligne de la fonction car ça marchait mal si on changeait
la taille de la fenêtre à partir du bouton de réduction de windows (en haut à droite de chaque fenêtre, bouton du milieu 'niveau inférieur').

Donc maintenant, et même sur un écran 1920x1200, mon site est centré dans la page, sans avoir à utiliser un tableau à une cellule pour mettre mon DIV, voir ici www.piano-concert24.fr

Bravo JQuery !!