CSS dynamique avec Php

[francoisch]

Bonjour

Je veux modifier une CSS avec du Php pour passer les dimensions des images en fonction des dimensions de la fenêtre.

La CSS, en Php :

<?php
header("Content-type: text/css");
/* reprise en PHP des variables HTML */
$widthimage=$_GET['parm1'];
$heightimage=$_GET['parm2'];
/* ----------------------- déterminer la dimension des images */

echo <<<CSS
/* --- start of css --- */

#image1 {width: $widthimage; height: $heightimage;}

/* --- end of css --- */
CSS;
?>

Lappel à la CSS :

<script language="JavaScript" type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var widthimage = Math.floor(width/4);
var heightimage = Math.floor(widthimage/3*2);  
<link rel="stylesheet" href="style3.php?parm1=widthimage&parm2=heightimage"  media="screen">
</script>

dans le Head.

Ca ne fonctionne pas, mes images napparaissent pas, faute de dimensions vraisemblablement.

Question: le Link doit il être en dehors du JS?

Par avance merci de votre aide.

Francois

[xunil]

Essayer plutôt comme çà (dans la section head):

<?php

echo "<style type='text/css'>";

echo

"

contenu css

";

echo "</style>";

?>

[Portekoi]

Bonjour,

Les variables 'widthimage' et 'heightimage' sont en javascript non?

Si c'est le cas, tu ne peux les récuperer ainsi.

Il y a un moyen je pense, se serait de faire l'appel du CSS en javascript pour récupérer les valeurs... j'ai déjà vu ca quelque part...

Faut que je cherche dans les cartons

Portekoi

[francoisch]

bonjour

Oui, les variables sont du JS.

J'avais essayé un appel à la CSS (style3.php) avec:

<script type="text/javascript"> 
document.write('<script type="text/javascript" '
 + 'src="style3.php?parm1=' 
+ widthimage
+ '&parm2='
+ heightimage
+ '">' 
+ '</'+'script>'); 
</script>

mais ça n'avait pas l'air de fonctionner.

Francois

Modifié 10 Décembre 2007 par francoisch

[francoisch]

J'ai refait un essai avec, dans la feuille Php:

<script language="JavaScript" type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var widthimage = Math.floor(width/4);
var heightimage = Math.floor(widthimage/3*2);

document.write('<script type="text/javascript" '
 + 'src="style3.php?parm1=' 
+ widthimage 
+ '&parm2='
+ heightimage
+ '">' 
+ '</'+'script>');
</script>

et, dans style3.php:

<?php
header("Content-type: text/css");
/* reprise en PHP des variables HTML */
$widthimage=$_GET['parm1'];
$heightimage=$_GET['parm2'];
/* ----------------------- déterminer la dimension des images */

echo <<<CSS
/* --- start of css --- */

#image1 {width: $widthimage; height: $heightimage; background-color:#006600; }

/* --- end of css --- */
CSS;
?>

en spécifiant à dessein une couleur Background en vert; les emplacements des images ne sont pas colorés en vert de cette manière.

A l'inverse, ils le sont si je met la couleur dans la CSS principale.

Pourtant, l'appel de style3.php parait correct; y a t il une particularité avec le Php modifiant une CSS?

Merci par avance de votre aide.

Francois

--------------------------------------------------------------

J'ai essayé ça mais, apparement, se pose tjs le problème de passer les valeurs des deux variables JS à la CSS.

En effet, quand je rentre dans la CSS, je suis sorti du JS et les valeurs des variables sont devenues inconnues, je crois bien.

Francois

--------------------------------------------------

bonjour Xunil et merci de ta réponse.

Qqechose comme ça:

<?php
echo '<script language="JavaScript" type="text/javascript">';
echo 'var width = document.body.clientWidth;';
echo 'var height = document.body.clientHeight;';
echo 'var widthimage = Math.floor(width/4);';
echo 'var heightimage = Math.floor(widthimage/3*2);';
echo '</script>';

echo "<style type='text/css'>";
echo "#image1 {width: widthimage; height: heightimage;}";
echo "</style>";

?>

pour calculer en JS les deux valeurs dont j'ai besoin et ensuite les exprimer dans la CSS.

Je vais essayer de le faire fonctionner.

Francois

Modifié 10 Décembre 2007 par francoisch

[Leonick]

appelle directement ta css, en metant les valeurs "get" que tu veux et regarde si elle s'affiche correctement.

Juste la css pour commencer.