#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    153
    Rep Power
    13

    Jquery css issue


    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

    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>
    The link below is the project I am trying to get it working on

    http://www.irhwebsites.co.uk/sites/e s s e x/packages.php

    Thanks in advance

    Ian
    Last edited by ianhaney; July 16th, 2013 at 01:00 PM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,123
    Rep Power
    119
    You need to use $(window).width() and not $(this).width(), because the way you got it set-up... $(this).width() is arbitrary, more over... it's undefined. Plus you had two <link> tags with the exact same ID attribute and that does not fly. So here is how you need to do it; if you want to add CSS3 Media Queries, you can do that too:
    Code:
    <link id="size-stylesheet" rel="stylesheet" type="text/css" href="./css/style.css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <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");*/
                    }
    }
    
    $("document").ready(function(){
        adjustStyle($(window).width());
        $(window).resize(function() {
            adjustStyle($(window).width());
        });
    });
    
    </script>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    153
    Rep Power
    13
    Hi web_loone08

    I pasted in your coding and worked perfect, just got the two css stylesheets now, the style.css and wide.css and works on all browsers and screen sizes

    Thank you so much

    Was a nightmare before, I had around 6 different css stylesheets, one for google chrome, one for FF, one for IE and then one for chrome for larger screen, one for ff for larger screen and one for IE on larger screen lol

    So glad I just got the two now, is so much easier to manage

    Thank you so much

IMN logo majestic logo threadwatch logo seochat tools logo