Jump to content

[SOLVED] Javascript - Adapt CSS file depending on screen resolution


Recommended Posts

Hi everyone,

For one of the site I'm developing right now I need to know if it is possible to modify the CSS file called depending on the screen resolution of the visitor.

I have 2 different CSS file one for screen smaller or equal to 1024*768 and one for screen bigger than 1024*768.

I tried to implement it through a js script, it works well as I have the 'alert ' messages but I can't change the css file called.

{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}



Would you guys have any clue on this one?

Cheers

Link to comment
Share on other sites

Try putting the following in header.tpl:

<script type="text/javascript">
  if (screen.width < 1024)
     [removed]("<link rel='stylesheet' type='text/css' href='{$css_dir}global_petit.css' />");
  else
     [removed]("<link rel='stylesheet' type='text/css' href='{$css_dir}global.css' />");
</script>



Change [removed] to document [period] write

Link to comment
Share on other sites

Thanks again Razaro,

I tried it but it calls the global.css whatever the screen size is...

I asked the same question in the french forum and one guy came up with the following idea:

{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}



what do you think?

EDIT; In fact, it worked very well.
Thank you very much for your help and hints.

Cheers

J

Link to comment
Share on other sites

  • 2 years later...

Hey 123julian i have the same problem.

 

Can you help me here? Where exactly did you add this code? And what is the name of this page?

 

Like did you put in the paste root/js and somewhere inside there? Can you tell me the name of it, please?

 

Did you create a new js file or add in same page that already exist?

 

I need this help so much....thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...