SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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...c-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/packages.php

    Thanks in advance

    Ian

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •