0

I have the following JQuery function:

<script>
    $(document).ready(function(){
        var current_width = $(window).width();
        if(current_width => 1920){
            $("#body").css({    
                -moz-transform: 'scale(1, 1)', 
                zoom: '1',  
                zoom: '100%' 
            });
        }
        else if(1366 < current_width < 1920){
            $("#body").css({    
                -moz-transform: 'scale(0.85, 0.85)',
                zoom: '0.85', 
                zoom: '85%', 
            });
        }
       else if(current_width <= 1366){
            $("#body").css({    
                -moz-transform: 'scale(0.7, 0.7)',
                zoom: '0.7', 
                zoom: '70%' 
            });
       }

    });
</script>

I use a Chrome window resize extension to test different screen sizes, but when using the window.width JQuery function, despite the browser being resized, it's still detecting my native 1920px width. Is there something wrong with my code or I do really need to test different screen sizes using another devices when using the window.width() function?

Thank you

5
  • For starters, your code isn't valid. Try testing it here and you'll see all of the syntax errors.
    – Mike Cluck
    Commented Jul 2, 2015 at 17:40
  • possible duplicate of Cross-browser window resize event - JavaScript / jQuery
    – user4639281
    Commented Jul 2, 2015 at 17:41
  • 3
    You may want to look into CSS stylesheets and @media queries. Commented Jul 2, 2015 at 17:41
  • For testing less than and greater than in JavaScript you have to write it in two steps using a logical AND && to join them small < x && x < big. The way you've done it will be evaluated as follows, small < x < big becomes bool < big which will usually be true if big > 1
    – Paul S.
    Commented Jul 2, 2015 at 17:47
  • Thank you for the suggestions! @TinyGiant, that thread does not quite meet my question, at least it did not really help me out. Else, I would have posted there.
    – Doge
    Commented Jul 2, 2015 at 18:00

1 Answer 1

1

Wrap your code in resize event handler. See the changes highlighted in the code below.

$(window).on('load resize rotate', function() {
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    var current_width = $(window).width();
    if (current_width >= 1920) {
        //            ^^

        $("#body").css({
            '-moz-transform': 'scale(1, 1)',
            // zoom: '1', Don't need
            zoom: '100%'
        });
    } else if (current_width > 1366 && current_width < 1920) {
        //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        $("#body").css({
            '-moz-transform': 'scale(0.85, 0.85)',
            // zoom: '0.85', // Not needed
            zoom: '85%',
        });
    } else if (current_width <= 1366) {
        $("#body").css({
            '-moz-transform': 'scale(0.7, 0.7)',
            // zoom: '0.7', // Not needed
            zoom: '70%'
        });
    }
});
2
  • 1
    -moz - transform cannot be used as a key without quoting it, as it will throw SyntaxError: Unexpected token -
    – Paul S.
    Commented Jul 2, 2015 at 17:51
  • Thank you for the syntax corrections! However, it's still not zooming out when loading the page on a 1366px wide device (or 1600px resized-browser)
    – Doge
    Commented Jul 2, 2015 at 17:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.