Jquery css issue

JavaScript
1

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

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>

The link below is the project I am trying to get it working on

www.irhwebsites.co.uk/sites/essexponyparties/packages.php

Thanks in advance

Ian

2

Using jQuery as a responsive design technique is a really bad idea performance wise, if you’re browser support stops at IE9 then all you need is one stylesheet and some media queries to manage the content flow otherwise I would highly recommend you look into something like respond.js which is designed for browsers that don’t natively CSS3 media queries.