jquery help

Hi

I am having some trouble with jquery and css

I have two stylesheets, one for 1024px wide screens and one for 1280px size screens

I have used the following coding to that I got from the following link to use the stylesheet relevant to the screen width

http://www.css-tricks.com/resolution-specific-stylesheets/

Works fine on the 1280px screen but on the 1024px screen size, it is using the 1280px css stylesheet

Any ideas please, not too sure where I am going wrong with it, the coding is below

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/style.css" />
 
<!--<link rel="stylesheet" type="text/css" href="./css/ie10.css" />-->
 
<!--<link rel="stylesheet" media="screen and (min-device-width: 1280px)" href="./css/mediacss.css" />-->
 
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/wide.css" />
 
<script>
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1024) {
        $("#size-stylesheet").attr("href", "./css/style.css");
    } else if ((width > 1100)) {
        $("#size-stylesheet").attr("href", "./css/wide.css");
    /*} else {
      $("#size-stylesheet").attr("href", "./css/style.css");*/
                }
}
 
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
</script>

Code (markup):

Thanks in advance

Ian

 

It's the logic you need to look at what you are actually telling the browser. If width is LESS then 1024 change the href attribute to ./css/style.css

You need to tell the browser if width is less then or equal to 1024. You can do this with this comparison operator <=

Code:

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/style.css" />
 
<!--<link rel="stylesheet" type="text/css" href="./css/ie10.css" />-->
 
<!--<link rel="stylesheet" media="screen and (min-device-width: 1280px)" href="./css/mediacss.css" />-->
 
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/wide.css" />
 
<script>
function adjustStyle(width) {
    width = parseInt(width);
    if (width <= 1024) {
        $("#size-stylesheet").attr("href", "./css/style.css");
    } else if ((width > 1100)) {
        $("#size-stylesheet").attr("href", "./css/wide.css");
    /*} else {
      $("#size-stylesheet").attr("href", "./css/style.css");*/
                }
}
 
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
</script>

Code (markup):

Not tested but should work.

 

Hi HuggyStudios

Thank you for the reply and the advice/coding etc

Really appreciate it, it worked perfect, thank you so much

Kind regards

Ian

 

you can have if statements within CSS now to detect media size give it a google!