Forum CMS Made Simple FR
[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. (/thread-3344.html)


[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - jeebeezebee - 15/11/2014

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.11
#~ Url du site : zeemotor.de
#~ Hébergeur / Soft : evxonline
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.11
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.6
#~ MicroTiny: 1.2.7
#~ ModuleManager: 1.5.8
#~ News: 2.14.4
#~ Search: 1.7.11
#~ ThemeManager: 1.1.8
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 20000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.29
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 512M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 20M
#~ upload_max_filesize: 20M
#~ session_save_path: /var/lib/php/session (0770)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: fpm-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.5.37
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,

J'ai trouvé ce bout de code pour récupérer la largeur d'une fenêtre et je voudrais m'en servir pour créer une balise utilisateur qui me retourne la largeur de la fenêtre en pixels.

Code :
[== PHP ==]
<?php
if( !$_GET['width'] ) {  // si on n'a pas encore récupéré la résolution ?>
<script language="JavaScript">
<?PHP echo('window.location="'.$PHP_SELF.'?width="+screen.width+"&height="+screen.height;'); ?>
</script>
<?php }
/* le javascript recharge la page avec deux variables :
La largeur de l'écran : width
La hauteur de l'écran : height */

/* Si la première condition n'est pas vraie ( if( !$_GET['wid'] )
c'est que la variable width n'est pas vide,
donc qu'on a bien récupéré la résolution
et donc qu'on peut continuer ! */

$largeur = $_GET['width']; // on récupère "width" dans la variable PHP $largeur
$hauteur = $_GET['height']; // on récupère "height" dans la variable PHP $hauteur

switch ( $largeur ) {
case 800: ?>
<table width="780" height="85" border="0" cellpadding="0" cellspacing="0" align="center">
<?php
break;
case 1024: ?>
<table width="1000" height="85" border="0" cellpadding="0" cellspacing="0" align="center">
<?php
break; ?>
<?php } ?>

Je ne connais pas assez Smarty pour le faire...

Merci pour votre aide !

Jean-Benoit

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - jissey - 15/11/2014

Bonjour,
à moins que tu comptes réellement procéder comme ça (c'est l'âge de pierre), il faut aujourd'hui utiliser les media queries de CSS3.
Il y a une foultitude de tutos sur le sujet et il faut que tu t'investisses là-dedans, puisque ton job est la création de sites web!
Dans le même ordre d'idée, les balises <table> ne sont plus utilisées pour les mises en page, sauf pour afficher un tableau de résultats (c'est peut-être ton cas?).
Sinon, pour aller encore au plus simple, tu utilise les pourcentage : width="80%"

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - Jean le Chauve - 15/11/2014

Citation :Sinon, pour aller encore au plus simple, tu utilise les pourcentage : width="80%"
Le plus simple est souvent le mieux Cool

Comment vas-tu Jean-Benoît ? Ça faisait un bout de temps qu'on n'a pas eu le plaisir de te lire.

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - jeebeezebee - 16/11/2014

Oui, pas de nouvelles, bonnes nouvelles, tout va bien :-)

J'ai un site en 3 colonnes, 1, 2, 3 de gauche à droite. J'utilise "flex" en css3 pour les passer en 3 lignes dans l'ordre suivant : 2, 1, 3 pour les écrans de faible largeur.

Ca fonctionne parfaitement dans les navigateurs très récents, mais ça doit marcher sur des navigateurs plus anciens encore très utilisés, c'est pourquoi j'ai pensé mettre un {if} dans mon template pour distinguer les grands écrans des autres.

Je ne peux pas agir sur le css mais uniquement sur le template pour modifier l'ordre d'affichage sans passer par "flex".

En tous cas je suis heureux de voir que le forum cmsms est toujours aussi vivant avec les administrateurs les plus disponibles !

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - Jean le Chauve - 16/11/2014

D'abord, regarde ce topic : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries.
Et comme Jissey, je te déconseille l'usage des tables dans ce cas.
Ensuite, s'il n'y a que ces 2 cas dont tu souhaites t'occuper :
Code :
case 800: ?>
<table width="780" height="85" border="0" cellpadding="0" cellspacing="0" align="center">
<?php
break;
case 1024: ?>
<table width="1000" height="85" border="0" cellpadding="0" cellspacing="0" align="center">
<?php
Dans la head :
Code :
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Dans ton body à l'endroit adéquat :
Code :
<table id="container";height="85";border="0";cellpadding="0";cellspacing="0";align="center";>
et juste avant la fermeture de <body>
Code :
<script type="text/javascript">
w=screen.availWidth;
$(document).ready(function(){
   if (w>800) {
     tableX = document.getElementById('container');
     tableX.style.width = "1000";
   }
   else {
     tableX = document.getElementById('container');
     tableX.style.width = "780";
   }
});
</script>
Je n'ai pas testé, mais ça devrait fonctionner. Le script devrait ajouter le style width à la table id="container" dès que le DOM est chargé.
Attention si tu as une autre fonction qui appelerait $, tu devras utiliser un $noConflict() : voir cette page et, bien entendu, pas de double appel de librairie JQuery Wink

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - jeebeezebee - 17/11/2014

J'ai finalement résolu le problème en pur CSS3.

Comme "flex" est reconnu par tous les mobiles je l'utilise uniquement dans mon @media queries pour mobile (<= 786px) et j'utilise "display-inline" pour les tailles d'écran supérieures. Mes colonnes se transforment bien lignes à 100% de largeur et surtout je peux afficher la colonne du milieu en première ligne sur mobile.

Merci pour vos interventions qui ont "boosté" ma refexion !

[Résolu] Récupérer largeur fenêtre courante dans balise utilisateur. - Jean le Chauve - 17/11/2014

Tant mieux Smile
Passe une bonne soirée et à bientôt, j'espère.