Aller au contenu

CSS dynamique avec Php


francoisch

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par francoisch
Lien vers le commentaire
Partager sur d’autres sites

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é par francoisch
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...