Condition "IF" qui ne fonctionne pas

Condition "IF" qui ne fonctionne pas - PHP - Programmation

Marsh Posté le 20-05-2010 à 09:32:57    

Bonjour,
 
Voila j'ai encore un problème avec mon affichage. Je voudrais faire en sorte que la feuille de style change si la résolution d'écran est 800 ou supérieur à 800. Donc j'ai fait un petit bout de code en php. Je précise que j'ai testé la valeur de $w, elle contient toujours la bonne valeur. Seul problème, j'ai l'impression que la condition s'arrête après le if et qu'il ne comprend pas l'instruction. C'est à dire concrètement :
 
Là je fais echo $w juste avant le if, il m'affiche 1024, et il execute pourtant la première instruction. Si j'inverse, en mettant en premier if ($w>800) il m'affiche la bonne feuille de style mais quand je me met en 800 pour tester il execute toujours la première instruction.
 
<?php
         $w="<script>document.write(screen.width);</script>";
         $bloginfo = get_bloginfo('stylesheet_directory');
         $fav = $bloginfo.'/favicon.ico';  
 
if ($w<=800) {
    $val = $bloginfo.'/style2.css';
}
else if ($w>800) {
    $val = $bloginfo.'/style.css';
}
else
{
echo "Votre résolution d'écran est trop petite";
}
?>
        <link rel="stylesheet" href="<?php  echo $val; ?>" type="text/css" media="screen" />
 
 
J'espère avoir été claire, si quelqu'un pouvait m'aider ça serait très gentil  :D  
 
Merci d'avance  :)

Reply

Marsh Posté le 20-05-2010 à 09:32:57   

Reply

Marsh Posté le 20-05-2010 à 09:57:54    

Salut,
 
Bon déjà, le dernier else ne sert à rien, t'as les valeurs <= 800 dans le premier IF, les valeurs > 800 dans le second, je te rassure tu couvres l'ensemble des entiers naturels [:cosmoschtroumpf]
 
Sinon y aurait pas un bins genre ta variable $w contient un espace ou une connerie du genre ?
 
Tente un echo '-' . $w . '-', tu le verras de suite.

Reply

Marsh Posté le 20-05-2010 à 09:59:08    

        $w=document.write(screen.width);</script>";

 

le php est executé cote serveur, le javascript coté client
donc le php est toujorus executé avant le js, donc ta ligne revient a mettre uen chaine de caractère dans w, au lieu de la largeur de l'ecran


Message édité par flo850 le 20-05-2010 à 09:59:24
Reply

Marsh Posté le 20-05-2010 à 11:23:13    

Pour moi, tu dois avoir une page index.php toute bête qui envoi en paramètre POST à une autre page la résolution de ton utilisateur (en javascript). Ensuite PHP interprète derrière et fait les modifications éventuelles sur les CSS

Reply

Marsh Posté le 20-05-2010 à 11:27:23    

Elooodie a écrit :


Là je fais echo $w juste avant le if, il m'affiche 1024


 
Non. Ton navigateur t'affiche 1024. Php a affiché "<script>document.write(screen.width);</script>". Regarde le code source de ta page, pas le rendu, si tu veux comprendre ce qui se passe coté php.


---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 21-05-2010 à 09:34:29    

Tout d'abord merci pour vos réponses.
Le Php interprété avant le JS, je le savais, mais je ne me rendais pas vraiment compte que ça ne pouvais pas marcher étant donner que le NAVIGATEUR affichait la bonne valeur.
 

Citation :

 
antac a écrit :
 
Pour moi, tu dois avoir une page index.php toute bête qui envoi en paramètre POST à une autre page la résolution de ton utilisateur (en javascript). Ensuite PHP interprète derrière et fait les modifications éventuelles sur les CSS


 
Je comprend le principe mais je ne vois pas trop comment faire car j'utilise un CMS. Il faudrait que je crée une page index.php, celle sur laquelle arriverait le visiteur, qui contient un formulaire et qui envoie le résultat du JS avec la méthode post vers ma page suivante? Dans ce cas, comment faire pour que l'utilisateur ne voit pas cette page et soit redirigé directement vers la page d'accueil de mon site?

Reply

Marsh Posté le 21-05-2010 à 09:43:55    

Par exemple (premier lien Google) : http://www.commentcamarche.net/faq [...] -affichage

Reply

Marsh Posté le 21-05-2010 à 10:12:07    

Merci Fred999, je connaissais cet article sauf que ça m'aide pas beaucoup pour savoir où le placer, et en plus j'ai du mal à comprendre le code !
D'où sort le r dans $_GET ? et je ne sais pas à quoi correspond le $PHP_SELF dans la 5eme ligne... bref ça m'avance pas vraiment!  :??:

Citation :

<?
if(!isset($_GET['r']))
{
echo "<script language=\"JavaScript\">
<!--
document.location=\"$PHP_SELF?r=1&Largeur=\"+screen.width+\"&Hauteur=\"+screen.height;
//-->
</script>";
}
else {    

 

// Code à afficher en cas de détection de la résolution d'affichage
     if(isset($_GET['Largeur']) && isset($_GET['Hauteur'])) {
               // Résolution détectée
     }
     else {
               // Résolution non détectée
     }
}

 

?>

 



Message édité par Elooodie le 21-05-2010 à 10:12:24
Reply

Marsh Posté le 21-05-2010 à 22:16:07    

pour faire simple le javascript est exécuté coté client. ton $w est une variable PHP déclarée dans ton script coté serveur.
Dans ton script PHP, $w ne représente pas un entier de 1024. il représente une chaine (ou string si tu préfères) valant "<script>document.write(screen.width);</script>";


Message édité par the_bigboo le 25-05-2010 à 17:49:23
Reply

Marsh Posté le 21-05-2010 à 23:51:49    

et pourquoi se borner encore de nos jours à détecter la largeur de l'écran :'(
 
Tu as une raison bien précise à cela ?  
Sinon, si j'étais toi, je laisserai ça au javascript. Mais en faisant quelque chose de propre.


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-05-2010 à 23:51:49   

Reply

Marsh Posté le 25-05-2010 à 09:09:55    

Merci The_bigboo, j'ai compris ca y est, j'ai trouvé une solution qui fonctionne presque! lol
 
Gatsu35, oui j'ai une raison précise, la personne pour laquelle je suis chargée de faire ce site m'a demandé d'adapter le design si l'écran affiche du 800*600 ou supérieur. J'ai essayé en utilisant simplement des % dans la feuille de style mais ça ne me rend pas le résultat escompté, donc je ne vois pas comment faire autrement qu'avec la largeur de l'écran et une condition.  :sarcastic:

Reply

Marsh Posté le 25-05-2010 à 11:23:11    

ben faut faire un design fluide, c'est pas facile, mais c'est faisable, largement faisable. Je l'ai prouvé des centaines de fois


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-05-2010 à 16:46:49    

<?php
session_start();

 


if(isset($_GET['width']) && !isset($_SESSION['largeurdelecran'])) {
 $_SESSION['largeurdelecran']= $_GET['width'];
}

 

if(isset($_SESSION['largeurdelecran'])) {
 $w=$_SESSION['largeurdelecran'];
 $bloginfo = get_bloginfo('stylesheet_directory');
 $fav = $bloginfo.'/favicon.ico';  
 if ($w<=800) {
  $val = $bloginfo.'/style2.css';
 } else if ($w>800) {
  $val = $bloginfo.'/style.css';
 } else {
  $val = $bloginfo.'/style.css';
 }
?>
<link rel="stylesheet" href="<?php  echo $val; ?>" type="text/css" media="screen" />
<?php } elseif(!isset($_SESSION['largeurdelecran']) && !isset($_GET['width'])) { ?>
 <meta id="redirectionlargeur" http-equiv="Refresh" content="">
 <script language="Javascript">
  <!--
  var largeur = screen.width;
  document.getElementById('redirectionlargeur').content = "index.php?width="+largeur;
  //-->
 </script>
<?php } ?>

 

Tu le mets entre les balises HTML <head> et </head>. ;)

 

J'ai passé 15 minutes sur ce code et j'l'ai pas vérifié. :bounce:


Message édité par G31 le 25-05-2010 à 16:47:19
Reply

Marsh Posté le 25-05-2010 à 17:01:39    

c'est magnifiquement dégueulasse :)


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-05-2010 à 17:39:34    

Pinaise pourquoi les alinéas sont transformés en espaces ? :(

Reply

Marsh Posté le 25-05-2010 à 17:46:18    

Elooodie a écrit :

j'ai une raison précise, la personne pour laquelle je suis chargée de faire ce site m'a demandé d'adapter le design si l'écran affiche du 800*600 ou supérieur. J'ai essayé en utilisant simplement des % dans la feuille de style mais ça ne me rend pas le résultat escompté, donc je ne vois pas comment faire autrement qu'avec la largeur de l'écran et une condition.  :sarcastic:


Il faut voir le problème sous un autre angle :

 

Beaucoup d'applications web fonctionnent sur le principe d'une colonne centrale de moins de 800px, positionnée en margin auto dans un div principal.
Ca centre automatiquement, et pas besoin de jongler avec les feuilles de style pour adapter a une résolution ou à une autre. Et ta condition est remplie. Pas de JS, juste du CSS cousu main ! :D

 

D'autre part, le minimum est depuis un moment le 1024... Le 800*600 c'est archaïque !

gatsu35 a écrit :

c'est magnifiquement dégueulasse :)


Je plussoie !

Message cité 1 fois
Message édité par the_bigboo le 25-05-2010 à 17:46:50
Reply

Marsh Posté le 27-05-2010 à 09:50:27    

the_bigboo a écrit :


 
D'autre part, le minimum est depuis un moment le 1024... Le 800*600 c'est archaïque !


 
Là, on est d'accord, sauf qu'on m'a demandé de le faire quand même, j'ai pas vraiment mon mot à dire je ne suis qu'une pauvre stagiaire. Lol
 
Enfin bon, l'histoire des pourcentage j'ai essayé mais ça ne fonctionne pas, en fait, c'est pas une question d'avoir la colonne centrale centrée, c'est de grossir tout ce qui est bannière, pied de page, image du div, etc. J'ai essayé avec des pourcentages hein, ça me paraissait bien plus simple et surtout plus propre que ce que je fais là, mais j'ai pas réussi.  
 
En ce qui concerne le code donné un peu plus haut, j'ai un peu de mal à suivre. J'ai tenté un truc du genre:

Citation :


<?php
 session_start();
 $_SESSION['resolution'] = $_POST['resolution'];
?>
[...]
<?php
         $bloginfo = get_bloginfo('stylesheet_directory');
         $fav = $bloginfo.'/favicon.ico';  
   if ($_SESSION['resolution']<='800') {
   $val = $bloginfo.'/style2.css';
   }
   else {
   $val = $bloginfo.'/style.css';
   }
?>


Beh là, toujours pareil, première page ça fonctionne les autres non. J'ai mis ce code dans le header puisque c'est le même qui est chargé sur toutes les pages... visiblement il manque encore quelque chose! La prog et moi ça fait 2!  :D

Reply

Marsh Posté le 27-05-2010 à 10:27:18    

Elooodie a écrit :


 
Là, on est d'accord, sauf qu'on m'a demandé de le faire quand même, j'ai pas vraiment mon mot à dire je ne suis qu'une pauvre stagiaire. Lol
 
Enfin bon, l'histoire des pourcentage j'ai essayé mais ça ne fonctionne pas, en fait, c'est pas une question d'avoir la colonne centrale centrée, c'est de grossir tout ce qui est bannière, pied de page, image du div, etc. J'ai essayé avec des pourcentages hein, ça me paraissait bien plus simple et surtout plus propre que ce que je fais là, mais j'ai pas réussi.  
 
En ce qui concerne le code donné un peu plus haut, j'ai un peu de mal à suivre. J'ai tenté un truc du genre:

Citation :


<?php
 session_start();
 $_SESSION['resolution'] = $_POST['resolution'];
?>
[...]
<?php
         $bloginfo = get_bloginfo('stylesheet_directory');
         $fav = $bloginfo.'/favicon.ico';  
   if ($_SESSION['resolution']<='800') {
   $val = $bloginfo.'/style2.css';
   }
   else {
   $val = $bloginfo.'/style.css';
   }
?>


Beh là, toujours pareil, première page ça fonctionne les autres non. J'ai mis ce code dans le header puisque c'est le même qui est chargé sur toutes les pages... visiblement il manque encore quelque chose! La prog et moi ça fait 2!  :D


 
file moi ton HTML et ta CSS et je te prouve par A+B qu'avec une seule feuille de style et un brin du code propre je te fais un site qui passe partout toutes résolutions. Je l'ai fait un stock de fois


---------------
Blablaté par Harko
Reply

Marsh Posté le 27-05-2010 à 10:30:11    

Évidemment que ca ne marche pas... !
Dans le code que tu donnes tu pars du principes que tu auras toujours ta résolution car tu fais toujours :

Code :
  1. $_SESSION['resolution'] = $_POST['resolution'];


Tu ne dois enregistrer ta résolution que si on te la transmet, et tu dois donc faire :

Code :
  1. if (array_key_exists("resolution",$_POST)){
  2.      $_SESSION['resolution'] = $_POST['resolution'];
  3. }


Reply

Marsh Posté le 27-05-2010 à 10:33:57    

gatsu35 a écrit :


file moi ton HTML et ta CSS et je te prouve par A+B qu'avec une seule feuille de style et un brin du code propre je te fais un site qui passe partout toutes résolutions. Je l'ai fait un stock de fois


 
Je n'ai pas dit que ce n'était pas possible relis ce que j'ai écrit, j'ai dit que je n'avais pas réussi! Nuance!
 
@the_bigboo: je crois que j'ai compris je vais essayer, merci  :)
 
EDIT: Ca fonctionne parfaitement, merci!


Message édité par Elooodie le 27-05-2010 à 10:37:11
Reply

Marsh Posté le 27-05-2010 à 10:53:28    

oui mais au lieu de passer par une méthode merdique qui consiste à détecter la largeur de l'écran, il vaut mieux passer par une méthode universelle. Car après bonjour la maintenant.
C'est comme les boulets qui font une feuille de style pour firefox, et comme le site est tout fucké sous IE, ils refont une feuille de style entière pour IE. après double de la maintenance.

 

et je t'ai dit 40x que je peux t'aider à rentre ta feuille de style universelle bordel


Message édité par gatsu35 le 27-05-2010 à 10:53:54

---------------
Blablaté par Harko
Reply

Marsh Posté le 27-05-2010 à 11:08:50    

Ouais mais vu comme elle en parle, c'est vraiment un truc IMPOSE par son chef, et donc elle a rien à dire... si elle se pointe en disant qu'elle a procédé par une autre méthode, ça risque de pas l'faire :/

Reply

Marsh Posté le 27-05-2010 à 11:53:20    

oui mais ce truc imposé, je dis depuis le départ qu'on peut faire une CSS qui marche par défaut en 800x600 et s'adapte à la largeur de l'écran vers un maximum, et ceci on peut le faire super facilement.
Et l'intégration de la CSS je l'aurais plutot faire en JS en mettant une classe sur le documentElement et en typant par dessus. Faire ça avec un mélange PHP/JS et des redirections c'est dégueulasse.

 

Mais si vous voulez une solution propre et simple sans devoir tout refaire, voila comment j'aurai fait :

 

on a notre CSS par défaut

Code :
  1. #page {width:960px;background:#fff; etc...}
  2. #autrediv {width:300px;font-size:1.2em; etc...}
 

Maintenant c'est joli, mais on veut du 800x600, ben au lieu de faire une autre CSS, on écrases les width par une nouvelle règle
en utilisant une classe pour surcharger.

 
Code :
  1. .page800 #page {width:760px;}
  2. .page800 #autrediv {width:200px;}


 

 

Et pour éviter d'en avoir partout, tu mets ces règles juste en dessous de chaque règle originelle.

 
Code :
  1. #page {width:960px;background:#fff; etc...}
  2. .page800 #page {width:760px;}
  3. #autrediv {width:300px;font-size:1.2em; etc...}
  4. .page800 #autrediv {width:200px;}
 

Mais comment ajouter cette classe "page800"
Tout simplement par javascript en l'ajoutant sur le parent (je fais ça pour une class hasJS qui me permet de cacher des éléments quand l'utilisateur à le JS activé)

 

Dans ton fichier JS principal, tu rajoutes cette ligne au début :

Code :
  1. if(screen.width<=800)
  2. document.documentElement.className+=" page800";
 

et hop tu passes ta page en 800 fingers in the nose \o/

 

pas besoin de bricolages à la con, donc vous m'arrêtez vos solutions moches et vous prenez celle-ci :o

 


Message édité par gatsu35 le 27-05-2010 à 11:55:54

---------------
Blablaté par Harko
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed