Récupérer et ajuster taille

Version imprimable

Bonjour,

alors voila, j'ai un script qui est sence me centrer ma page web. Mais voila, copmme il y a toujours un chargement et un decalage de ma page, j'ai essayé de passer en paramètre de session une certaines valeur qui evitera ce decalage.

VOila mon script:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
window.onload = function ()
{
 
 
 
 
	var lmt = document.getElementById('centrage');
	var container = document.documentElement;
 
  if(lmt && container)
	{
	    var containerHeight;
	    if (container.innerWidth)
	    {
            containerHeight = container.innerHeight;		
		}
		else
		{
            containerHeight = container.clientHeight;
		}
	    var lmtHeight;
	    if (lmt.innerWidth)
	    {
            lmtHeight = lmt.innerHeight;
			lmtHeight = 600;
		}
		else
		{
            lmtHeight = lmt.offsetHeight;
			lmtHeight = 600;
		}
		var y = Math.ceil((containerHeight - lmtHeight) / 2);
		var y = Math.ceil((containerHeight - 700) / 2);
		if(y < 0)
		{
			y = 0;
		}
		lmt.style.position = "relative";
		lmt.style.top = y + "px";
 
   		$('a').attr("href", "?myheight="+ y);
	}

et dans ma page php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php session_start(); ?>
<?php include("header.php"); ?>
<script type="text/javascript" language="javascript" src="script/script.js"> </script>
 
<?php include("lightbox.php") ?>
<link rel="shortcut icon" type="image/x-icon" href="images/sittelles.png" />
<title>Hôtel, restaurant "Les Sitelles ***"</title>
<?php 
if(isset($_GET['myheight'])){
	$_SESSION['hauteur_page']=$_GET['myheight'];
	}
if(isset($_SESSION['hauteur_page'])){ ?>
<style type="text/css">
<!--
#centrage {
	top:<?php echo $_SESSION['hauteur_page']; ?>px;
}
-->
</style>
<?php } ?>

Dans mon url, on obtiens bien: ".php?myheight=132".

Le problème, c'est qu'il semble que cette valeur ne soit pas récupérer...

Si quelqu'un saurait m'aider...

Cordialement,

Ctesias

26/01/2012, 22h04
NoSmoking

Bonsoir,
si le centrage est horizontal alors en pur CSS cela est jouable, si il y a également un centrage vertical cela devient un peu plus délicat mais avec les marges négatives, entre autre c'est jouable.

La mise en position relative entraine des contrainte, que fais tu en cas de redimensionnement de la fenêtre du navigateur par le visiteur???

Citation:
Code:

1 2 lmt.style.position = "relative"; lmt.style.top = y + "px";
Citation:
Code:

1 2 3 #centrage { top:<?php echo $_SESSION['hauteur_page']; ?>px; }
Tu n'as pas l'impression qu'il manque une propriété pour ton élément centrage ? :aie:

Et au passage :
Code:

1 2 3 if(isset($_GET['myheight'])){ $_SESSION['hauteur_page']=$_GET['myheight']; }
Utiliser une entrée utilisateur (paramètre GET) sans vérifier son format, c'est pas top ;)
Code:

1 2 3 if(isset($_GET['myheight']) && is_numeric($_GET['myheight'])){ $_SESSION['hauteur_page']=$_GET['myheight']; }
est un minimum !

27/01/2012, 09h01
Ctesias

Salut a tous!

@bovino:

Quel propriété manque? sachant que le centrage horizontal est deja déclaré?

Code:

<div id="centrage" style="position:relative; margin-left:auto; margin-right:auto; width: 955px; box-shadow:4px 4px 2px #B3B3B3;">

Edit: Le fait de la verification du type marche bien et permet bien d'influencer sur la Style, mais impossible de changer de page, avec les differents liens :s

@NOsmoking:

ET bien je ne fais rien... c'est aussi ca le problème ^^
Parce que tu fais comment toi? ^^'

Merci de vos réponses en tout cas :).
27/01/2012, 12h24
dukej

Ce n'est certainement pas en PHP que tu dois gérer ton bricolage de centrage
ça doit être fait en 100% JS, et tu dois gérer une méthode qui tourne sur un setInterval pour gérer ça
28/01/2012, 11h06
NoSmoking

Citation:

Envoyé par Ctesias

@NOsmoking:
ET bien je ne fais rien... c'est aussi ca le problème ^^
Parce que tu fais comment toi? ^^'

je ne fais pas :mouarf:

sinon il y a la technique des marges négatives pour le centrage verticale, mais c'est du CSS.
30/01/2012, 08h45
Ctesias

SAlut et désolé pour le temps de réponse!

@dukej: Mais je ne fais pas que ca en php, j'ai un javascript... LE problème, c'est qu'il ne retourne pas la valeur correctement.
30/01/2012, 16h01
Ctesias

J'aimerais bien récupérer une valeur contenu dans une variable javascript. SI cela est possible bien sur? Pour en faite, la remettre dans une variable de Session Php... J'ai beau chercher sur le net, je ne trouve que peu de sujet, et mal expliqué sur la récupération de variable de javascript...

Cordialement,

Ctesias

essaies ce qui suit sur base des marges négatives

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Centrage Elément]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body{
  width : 100%;
  height : 100%;
  margin : 0;
  padding : 0;
  font-family : verdana;
  font-size : 1.0em;
}
#element{
  width : 500px;
  border : 1px solid #c0c0c0;
  padding : 1em;
  background-color : #eef;
}
</style>
</head>
<body>
<div id="element">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script type="text/javascript">
var oElem = document.getElementById( 'element');
if( oElem){
  var oStyle = oElem.style;
  var haut   = oElem.offsetHeight;
  var larg   = oElem.offsetWidth;
  oStyle.position = 'absolute';
  // centrage vertical
  oStyle.top = '50%';
  oStyle.marginTop   = -(haut>>1) +'px';
  // centrage horizontal
  oStyle.left = '50%';
  oStyle.marginLeft  = -(larg>>1) +'px';
}
</script>
</body>
</html>

31/01/2012, 09h57
Ctesias

Bonjour,

Je viens d'essayer ta solution. Elle marche, a condition que la page tienne sur l'ecran. Si elle est trop grand et que la scrollbar apparait, elle est coupé sur le haut car trop remonté. :x

Merci a tous ceux qui me répondent.

Ctesias

Hop hop op!

Up and Down!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var id_div = 'centrage2';
var hauteur = document.getElementById(id_div).offsetHeight;
 
document.getElementById('centrage2').style.position = "relative";
hauteur_window = ( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight);
if(hauteur > hauteur_window)
{
	document.getElementById('centrage2').style.top= "0 px";
}
else
{
document.getElementById('centrage2').style.top = ((( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight)-hauteur)/2)+"px";
}

un peu d'optimisation ne nuit pas au code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var id_div = 'centrage2'; var oDiv = document.getElementById( id_div); var hauteur = oDiv.offsetHeight; var hauteur_window = ( window.innerHeight ? window.innerHeight : document.body.clientHeight || document.documentElement.clientHeight); oDiv.style.position = "relative"; if(hauteur > hauteur_window){ oDiv.style.top = "0 px"; } else{ oDiv.style.top = (( hauteur_window -hauteur)/2)+"px"; }
peut mieux faire mais bon...

Juste une petite remarque, pourquoi dérouter l'internaute avec un coup le centrage et un coup le non centrage si la taille est supérieure à la fenêtre, ce n'est pas top pour peut qu'il y ait un menu.
Dans le cas d'un centrage exclusivement horizontal cela se traite en CSS, mais bon ce n'est qu'une remarque.

01/02/2012, 09h15
Ctesias

Salut!

Tout d'abord, merci de ta réponse. Le centrage horizontal se traite déjà par css. Le problème, c'est qu'il y a des pas qui peuvent tout simplement tenir sur une fenetre, donc je les centre verticalement pour que cela soit plus esthétique.