123julien Posted September 4, 2010 Share Posted September 4, 2010 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 More sharing options...
123julien Posted September 9, 2010 Author Share Posted September 9, 2010 If I may UP...Thanks for your help or even hintsCheersJ Link to comment Share on other sites More sharing options...
rocky Posted September 9, 2010 Share Posted September 9, 2010 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 More sharing options...
123julien Posted September 9, 2010 Author Share Posted September 9, 2010 Hi Rocky,Thanks a lot for your help.It seems to be a excellent alternative but I can't figure what I have to change the [removed] by.Could you help me? Or send it through email?Thanks anywaysJulien Link to comment Share on other sites More sharing options...
razaro Posted September 9, 2010 Share Posted September 9, 2010 Try this Link to comment Share on other sites More sharing options...
123julien Posted September 9, 2010 Author Share Posted September 9, 2010 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.CheersJ Link to comment Share on other sites More sharing options...
Bruna BSPCU Posted September 11, 2012 Share Posted September 11, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now