Modernizr Media query doesn’t work when resize browser

javascript jquery media-queries modernizr

10,694

At the moment it runs once only (on page load), so of course it only changes when you refresh the page.

Solution: You need your code to run onload and when the browser/window resizes. :

e.g.

<script type="text/javascript">
    var mod = function(){
        if (Modernizr.mq('(max-width: 767px)')) {
            $("#secondary").addClass("small").css("margin", " 25px");
        } else {
            // Clear the settings etc
            $("#secondary").removeClass("small").css("margin", "");   // <<< whatever the other margin value should be goes here
        }
    }

    // Shortcut for $(document).ready()
    $(function() {
        // Call on every window resize
        $(window).resize(mod);
        // Call once on initial load
        mod();
    });
</script>

Option 2

A common alternative I now use is to simply trigger a window resize event at the end of the onload (e.g. after the handler is connected).

<script type="text/javascript">

    // Shortcut for $(document).ready()
    $(function() {
        // Call on every window resize
        $(window).resize(function(){
            if (Modernizr.mq('(max-width: 767px)')) {
                $("#secondary").addClass("small").css("margin", " 25px");
            } else {
                // Clear the settings etc
                $("#secondary").removeClass("small").css("margin", "");   // <<< whatever the other margin value should be goes here
            }
        }).resize();   // Cause an initial widow.resize to occur
    });
</script>

Simple JSFiddle example: http://jsfiddle.net/TrueBlueAussie/zv12z7wy/

10,694

Author by

user2365514

Updated on August 15, 2022

Comments

user2365514 over 1 year

I use a Modernizr media query in JavaScript to change an element margin and add a class "small". My Modernizr media query doesn't work when I resize my browser, but when I refresh the page then it works. I know I can solve this problem using the jQuery $( window ).resize() function, but I want to solve it using a media query. Can any one tell me how I can solve this problem?

<html class="no-js">
    <head>
        <title>Foundation 5</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="modernizr.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                if (Modernizr.mq('(max-width: 767px)')) {
                    $("#secondary").addClass("small");
                    $("#secondary").css("margin", " 25px");
                }
            });
        </script>
        <style type="text/css">
            #primary {
                width: 300px;
                height: 200px;
                background-color: black;
            }
            #secondary {
                margin: 0 auto;
                width: 250px;
                height: 150px;
                background-color: white;
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div id="primary">
            <div id="secondary">

            </div>
        </div>
    </body>
</html>