[REGLE] Script JS - Fichier CSS en fonction de la résolution

[123julien]

Bonjour à tous,

Je me permets de m'en remettre à vous pour une question de JS et CSS.
Pour un petit détail je me dois de modifier le fichier CSS pour les résolutions inférieures ou égales à 1024*768.

J'ai donc 2 fichiers CSS. Un pour les résolution supérieures à 1024*768 et un pour les inférieures ou égalers.

Pour se faire j'ai modifié mon fichier header.tpl de cette façon

{if isset($css_files)}
{literal}
[removed]
   var css = document.createElement('link');
   css.rel = 'stylesheet';
   css.type = 'text/css';
   if(document.documentElement.clientWidth < 1024){
       css.href='{$base_dir}themes/prestashop/css/global-petit.css';
       alert('mini');
   }
   else{
       css.href='{$base_dir}themes/prestashop/css/global.css';
       alert('normal');
   }
   document.head.appendChild(css);
[removed]
{/literal}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   <!--[if lte IE 6]>
   <link href="{$base_dir}themes/prestashop/css/ie-only.css" type="text/css" rel="stylesheet" media="screen" />
   {/foreach}
{/if}

Le JS fonctionne à merveille et mon message d'alerte me le prouve bien mais il est impossible de faire charger le bon fichier CSS. global.css se charge quoi qu'il arrive.

Auriez-vous une idée?

D'avance merci pour votre aide

J

[123julien]

Je viens juste de réaliser que le copier/coller avait modifié un peu mon bout de code.

Les tags "[removed]" sont bien sûr des
< script type = " text/javascript " >
et < / script >

D'avance merci à ceux qui auront une idée

J

[123julien]

Je me permets un petit UP.

Je suis preneur de tout début de piste d'idée :-).

D'avance merci

Ju

[123julien]

Petite évolution dans ma réflexion.

J'ai tenté de l'intégrer via un fichier JS externe mais le résultat est le même, pas de changement du fichier CSS chargé.

Je continue mes recherches et espère vous lire

D'avance merci

Ju

[123julien]

Le petit UP du week-end pour tenir la forme

Ju

[123julien]

Je suis désolé de revenir à la charge :$.

Quelqu'un aurait même juste une piste de réflexion?

D'avance merci

J

[Natsu]

Hello,
Voilà ce que je te propose

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
{literal}
< script type="text/javascript" >
   var chaine={/literal}"{$css_uri}"{literal};
   var reg=new RegExp("[/]+", "g");
   var tableau=chaine.split(reg);
   if (tableau[5] == "global.css")
   {
       var cssdir = "/"+tableau[1]+"/"+tableau[2]+"/"+tableau[3]+"/"+tableau[4]+"/";
       if(document.documentElement.clientWidth < 1024)
       {
           var mycss = "global-petit.css";
       }
       else
       {
           var mycss = tableau[5];
       }
       cssdir = cssdir+mycss;
       [removed]('<link href="'+cssdir+'" rel="stylesheet" type="text/css" media="{/literal}{$media}{literal}" />')
   }
   else
   {
       [removed]('<link href="{/literal}{$css_uri}{literal}" rel="stylesheet" type="text/css" media="{/literal}{$media}{literal}" />')
   }
< /script >
{/literal}    
   {/foreach}
{/if}

Attention j'ai un espace au balise script pour éviter que l'éditeur ne les supprimes

A+

[123julien]

Salut Natsu,

Merci beaucoup pour ton aide et ta tentative.
Malheureusement j'ai du mal à devenir les balises supprimées par l'editeur.

Es-ce que cela passerait en fichier txt ou qqch du genre?

D'avance merci quoi qu'il arrive

Julien

[Natsu]

Hello,

Je disais simplement que j'avais mis < script > avec des espaces pour éviter que l'éditeur ne les supprimes

http://www.u-web.org/doc.txt

[123julien]

Il y avait aussi deux removed en bas que j'ai changé par des document(point)write et paf ca fonctionne à merveille.

Merci beaucoup pour ton aide,

C'est un sujet Réglé

Ju

[Natsu]

Oups j'avais pas vu saleté d'éditeur ^^'

Pas de soucis

A+

[123julien]

Re à vous,

Natsu, désolé de réouvrir ce sujet mais un problème est survenu quand j'ai mis la boutique en ligne.
J'ai fait tous les tests en local et ca fonctionne sans aucun souci vraiment. En revanche du côté "online" il n'y a pas moyen de lui faire selectionner le bon fichier css. Il continue à ne répondre qu'au fichier "global.css".

Aurais-tu une idée d'où ca puisse venir?

D'avance merci

Ju