1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jquery help

Discussion in 'jQuery' started by ianhaney, Jul 16, 2013.

  1. #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

    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
     
    Solved! View solution.
    ianhaney, Jul 16, 2013 IP
  2. #2
    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.
     
    HuggyStudios, Jul 17, 2013 IP
    thuytran likes this.
  3. ianhaney

    ianhaney Greenhorn

    Messages:
    72
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    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
     
    ianhaney, Jul 17, 2013 IP
  4. jimmyt200388

    jimmyt200388 Active Member

    Messages:
    189
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #4
    you can have if statements within CSS now to detect media size give it a google!
     
    jimmyt200388, Jul 24, 2013 IP