Home » Javascript » Javascript window resize not firing onload

Javascript window resize not firing onload

Posted by: admin June 30, 2018 Leave a comment

Questions:

I’m working off a specific codepen which can be found here https://codepen.io/anon/pen/WXgvjR .. Its not mine.

Everything works perfect with it, except when i open the page on a mobile or change the browser width to be mobile size, its still displaying some items outside the browser window width ways, is there any way to detect a mobile or change in screen size and just display them going down?

The following is the resize code that is found in the codepen if that helps

$(window).resize(function(){
    var margin=40;
    var padding=15;
    var columns=0;
    var cWidth=300;
    var windowWidth = $(window).width();

    var overflow = false;
    while(!overflow){
        columns++;
        var WidthTheory = ((cWidth*columns)+((columns+1)*padding)+margin);
        if(WidthTheory > windowWidth)
            overflow = true;            
    }       
    if(columns > 1)
        columns--;

    var GridWidth = ((cWidth*columns)+((columns+1)*padding)+margin);

    if( GridWidth != $('#grid').width()){
        $('#grid').width(GridWidth);
    }
});

Any help would be greatly appreciated

Answers: