jQuery windows.resize change variable and reload function width condition

Question

I've this :

jQuery(document).ready(function($) {
    windows_width();
    menu_mobile();
    function windows_width() {
        var windows_width = $(window).width();
        console.log('windows width = ' + windows_width);
    }
    $(window).resize(function() {
        setTimeout (function () {
            windows_width();
            console.log('Windows resize');
        },1000);
    });
    function menu_mobile() {
        if (windows_width < 980) {
            // MyFunction
        } else {
            return false;
        }
    }
});

But my function "menu_mobile" doesn't reload with the new value to "windows_width" variable.

U.P · Answer 1 · 2019-10-22T12:18:43.830

0

It is not clear what you are trying to achieve here

Your menu_mobile() function is only called first time when the window is loaded. It is not called when window is resized. Moreover, you are checking value of an uninitialized variable in your if condition

if (windows_width < 980)

if you want the menu_mobile() function to execute on DOM Ready, try the following

jQuery(document).ready(function($) {
    windows_width();
    menu_mobile();
    function windows_width() {
        var windows_width = $(window).width();
        console.log('windows width = ' + windows_width);
        return windows_width;
    }
    $(window).resize(function() {
        setTimeout (function () {
            windows_width();
            menu_mobile();
            console.log('Windows resize');
        },1000);
    });
    function menu_mobile() {
        if (windows_width() < 980) {
            console.log("menu_mobile");
        } else {
            return false;
        }
    }

edited Oct 22 '19 at 12:18

answered Oct 22 '19 at 11:51

U.P

7,357
7
39
61

Thanks for your quick reply. But doen't work with if (windows_width() < 980) and return windows_width; when I windows resize. – David Oct 22 '19 at 12:13
see my answer again.. I have updated it. You have to call `menu_mobile()` inside resize function – U.P Oct 22 '19 at 12:19
And when I try to reload my menu_mobile() function on windows.resize function, all condition run between 6 or 10 times when I click to my element... – David Oct 22 '19 at 12:19
Hummmmm, I understand. It's my windows.resize function that run between 6 or 10 times. So, my function under this one run as many time. – David Oct 22 '19 at 12:25
Yes, that's the default behavior. See the solution here https://stackoverflow.com/questions/6658517/window-resize-in-jquery-firing-multiple-times – U.P Oct 22 '19 at 14:43
Yep, I've research and I fell to this post. But, the first solution doesn't work for me. Otherwise, the second solution (below) work, but now, the windows.resize running 2 times again. `var resizeTimeout; $(window).resize(function(){ clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ alert('your function to run on resize'); }, 500); });` – David Oct 22 '19 at 15:43

score 0 · Answer 2 · answered Oct 22 '19 at 12:36

When I try this :

jQuery(document).ready(function($) {
    windows_width();
    menu_mobile();
    function windows_width() {
        var windows_width = $(window).width();
        console.log('Windows width = ' + windows_width);
        return windows_width;
    }
    $(window).resize(function() {
        setTimeout (function () {
            windows_width();
            menu_mobile();
            console.log('Windows resizing');
        },1000);
    });
    function menu_mobile() {
        if (windows_width() < 980) {
            console.log("menu_mobile");
        } else {
            return false;
        }
    }
});

And when I load my site without resize windows, I've this one to console :

JQMIGRATE: Migrate is installed, version 1.4.1
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:20 Windows resizing
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:20 Windows resizing
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:20 Windows resizing
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:20 Windows resizing
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:13 Windows width = 873
general.js?ver=1.0:25 menu_mobile
general.js?ver=1.0:20 Windows resizing

Why my resize function run many times on load page or resize juste one ?

jQuery windows.resize change variable and reload function width condition

2 Answers2