Bonjour à tous,

Utilisant les marges négatives pour centrer verticalement le contenu de mon site, je me trouve confronté à un problème assez ennuyeux lors d'un passage en petite résolution (800*600 et 1024*768) : Le haut du site était "mangé" par le navigateur.

Problème tout à fait normal.

Voici le code CSS de l'alignement vertical:

#container 
{
	/* Pour une présentation plus jolie, notre container comprendra 90%
	de la page, et le redimensionnement s'arrêtera à 1260px (pour les trop grosse résolutions)
	et 780px (pour un rétrécissement de la page) */
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;	
	max-width: 1260px;
	min-width: 780px;
	height: 620px;
	width: 90%;
	margin-top: -310px;
	margin-left: -45%;
	background: #FFF;
}

Je me suis donc tourné vers le JavaScript histoire de modifier ce code CSS:

if (screen.width < 1024 || screen.height < 800)
{
	document.container.style.height='600px';
	document.container.style.left='0%';
	document.container.style.margin='0 auto';
	document.container.style.position='relative';
	document.container.style.top='0%';
}

Le soucis, c'est que la console d'erreur me renvoit un beau :

Citation

document.container is undefined

Pourtant, si j'ai bien compris, "document" est notre fichier html, et container est définit plus loin dans le code HTML, d'où vient le problème ?

Merci d'avance

Déjà, si container est défini plus loin, ça marchera pas.

Il faut que l'élément existe pour que JavaScript puisse y accéder. Et vu que le JS est lu et exécuté "à la volée", il faut forcément que ton script soit situé après ton élément.

Le plus simple étant encore de mettre le script juste avant la balise de fermeture </body>



Enfin, on n'accède pas à un élément en balançant spontanément son id après document .

Il faut utiliser la méthode getElementById()

Oui merci, après une relecture du cours sur le JavaScript, et confirmation par ton message, je me suis rendu compte de mes deux erreurs

Voici le code javascript corrigé (pour la postérité):

<script type="text/javascript"><!--
if (window.innerWidth < 1024 || window.innerHeight < 800)
{
	document.getElementById('container').style.height='600px';
	document.getElementById('container').style.left='0%';
	document.getElementById('container').style.margin='0 auto';
	document.getElementById('container').style.position='relative';
	document.getElementById('container').style.top='0%';
}
//--></script>
</body>

Merci bien !

Dernière question tant qu'à faire: Mis à part le javascript, y a-t-il un autre moyen pour redimensionner dynamiquement la page ?
(dans l'hypothèse où un utilisateur désactive le js)

Autre soucis avec ce code (mais je ne sais pas si c'est possible de faire mieux), c'est que l'utilisateur doit rafraichir la page s'il redimensionne la page pour que les changements soient effectués, est-ce possible de perfectionner encore le schmilblik ?

Mets ta fonction dans un setInterval de 200ms

Merci bien, c'est encore mieux

Je n'ai pas d'erreur et ne peux plus tester pour le moment si ça marche, mais sauriez-vous me dire si ce code vous semble logique ? (Il devrait marcher normalement) :

function redefine_CSS()
{
	if  (typeof(window.innerWidth) == 'number')
	{	//All browsers except IE
		if (window.innerWidth < 1024 || window.innerHeight < 800)
			apply_new_CSS();
	}
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
	{	//IE 6+
		if (document.documentElement.clientWidth < 1024 || document.documentElement.clientHeight < 800)
			apply_new_CSS();
	}
	else if (document.body && (document.body.clientWidth || document.body.clientHeight))
	{	//IE 4
		if (document.body.clientWidth < 1024 || document.body.clientWidth < 800)
			apply_new_CSS();
	}
	else
		apply_old_CSS();
}

setTimeout(redefine_CSS, 200);

Ce code est censé récupérer la taille de la fenêtre du navigateur, puis vérifier si la largeur ou la hauteur sont respectivement inférieur à 1024 et 800 pixels et ce sur tout les navigateurs.
Si la condition est remplie, on applique un CSS qui va s'adapter à la taille de la fenêtre, sinon, on remet le CSS généré de base.

La fonction est appelée toute les 200 milliseconde, ainsi, on peut voir la modification du CSS en temps réel (ou presque :D).

Pourquoi as-tu un setTimeout ???

La fatigue

J'étais tombé sur cette page, et j'ai confondu (lors de l'écriture), les deux fonctions :p, mea culpa

Code corrigé :

function redefine_CSS()
{
	if  (typeof(window.innerWidth) == 'number')
	{	//All browsers except IE
		if (window.innerWidth < 1024 || window.innerHeight < 800)
			apply_new_CSS();
	}
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
	{	//IE 6+
		if (document.documentElement.clientWidth < 1024 || document.documentElement.clientHeight < 800)
			apply_new_CSS();
	}
	else if (document.body && (document.body.clientWidth || document.body.clientHeight))
	{	//IE 4
		if (document.body.clientWidth < 1024 || document.body.clientWidth < 800)
			apply_new_CSS();
	}
	else
		apply_old_CSS();
}

setInterval(redefine_CSS, 200);

Logiquement, ça m'a l'air bon, techniquement, je pourrais pas te répondre à 100%, j'ai arrêté de me soucier de IE dans ma vie