Question

I want to check window’s width in user visit url and if browser resize then do it again.

Q1. If I only call the function setcolamt() in resize() it won’t do anything colmat‘s value same as before, I don’t know why? I have to pull all code again just like the comment then colmat will be change.

Q2. Why is alert() in resize() it will pop up 3 times?

Any suggestion will be appreciated.

jsfiddle

var colamt=0;
var winwid = $(window).width();
function setcolamt(){        
    if(winwid > 800){
        colamt = 8;
    }
    else{
        colamt = 4;
    }
};
setcolamt();
alert(colamt);

$(window).resize(function(){
    //var colamt=0;
    //var winwid = $(window).width();
    //function setcolamt(){        
        //if(winwid > 800){
        //    colamt = 8;
        //}
        //else{
        //    colamt = 4;
        //}
    //};
    setcolamt();
    alert(colamt);
});

​

Answer 1

The width does not update after the initial call, because the function setcolamt() does not modify the value of winwid.

var colamt=0;
var winwid = $(window).width();

function setcolamt(){        
    // Get the new winwid
    winwid = $(window).width();
    if(winwid > 800){
        colamt = 8;
    }
    else{
        colamt = 4;
    }
};

Unless you intend to use winwid outside setcolamt(), it is not necessary to declare it at the global scope. Instead you can just declare and use it in the function

function setcolamt(){        
    // declare winwid here with var, not outside.
    // and no need to call $(window).width() outside...
    var winwid = $(window).width();
    if(winwid > 800){
        colamt = 8;
    }
    else{
        colamt = 4;
    }
};

Here is the updated jsfiddle (using console.log() instead of annoying alert())