Modernizr.mq doesnt work after window resize

Question

I want to run my code inside Modernizr.mq whatever after I resize my browser window. Here is my code:

jQuery(document).ready(function () {

    function callResize(){
        if (Modernizr.mq('only screen and (min-width: 800px)')==true) { 
            $(window).scroll( function() {
                var value = $(this).scrollTop();
                if ( value > 150 ){
                    $("#logo").fadeOut();
                    $(".header-container").addClass("small");
                    $(".stick-menu").css("bottom",24);
                    $(".signup").addClass("small");
                }else{
                    $("#logo").fadeIn();
                    $(".header-container").removeClass("small");
                    $(".stick-menu").css("bottom",35);
                    $(".signup").removeClass("small");
                }
            });
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'fade'
            });
        }
        if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'slide'
            });
        }
    }

    callResize();

    $(window).resize(function() {
        callResize();
    });
});

But the code above doesn't work. I need to reload my page to see the Modernizr.mq work. Any idea to slove it?

possible duplicate of [Can't seem to get jquery resize event to work on Modernizr media query function](http://stackoverflow.com/questions/16256674/cant-seem-to-get-jquery-resize-event-to-work-on-modernizr-media-query-function) — mikedidthis, Feb 27 '14 at 01:01
[This stripped-down version](http://cdpn.io/jCdmy) works for me, which suggests it might be what you’re doing within the `if { … }` (rather than the structure or Modernizr.mq) which isn’t working? — Stu Cox, Mar 01 '14 at 20:58
Try to call your code AFTER resize is done. Look here: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed — Martenti, Mar 15 '15 at 18:47

score 0 · Answer 1 · answered Feb 27 '14 at 00:29

Maybe try restructing everything like this, so that the callResize() function is outside docuement ready block.

Good luck!

$(function() {
    // callResize to execute after the document has loaded
    callResize();

    $(window).resize(function() {
        // callResize to execute after window resize
        callResize();
    });

});


function callResize(){
        if (Modernizr.mq('only screen and (min-width: 800px)')==true) { 
            $(window).scroll( function() {
                var value = $(this).scrollTop();
                if ( value > 150 ){
                    $("#logo").fadeOut();
                    $(".header-container").addClass("small");
                    $(".stick-menu").css("bottom",24);
                    $(".signup").addClass("small");
                }else{
                    $("#logo").fadeIn();
                    $(".header-container").removeClass("small");
                    $(".stick-menu").css("bottom",35);
                    $(".signup").removeClass("small");
                }
            });
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'fade'
            });
        }
        if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'slide'
            });
        }
    }

Unfortunately nothing happen after resize the window – Nizamil Putra Feb 27 '14 at 00:37 — Nizamil Putra, Feb 27 '14 at 00:37

Modernizr.mq doesnt work after window resize

1 Answers1