Question

I’m trying to make a Demo –

1. (landing) Check browser size > Change polygon size
2. Click button > Change polygon size (smaller)
3. Resize browser > Change polygon size
4. Resize browser > Check if already click button to smaller mode before > Change polygon size to smaller

I’m stuck in 4. I can’t figure how to pass the before status to after resize. It will calculate again.

Any suggestion will be appreciated.

Demo

$(function(){
var adivide=0;
var winwid = $(window).width();
function setadivide(){  
    winwid = $(window).width(); 
    if(winwid > 800){
        adivide = 8;
    }
    else{
        adivide = 4;
    }
    console.log(adivide);
};
setadivide();

var awidth;
function acal(){
    awidth = parseInt( winwid / adivide);
};
acal();
function setawidth(){
    $('.a').css({width: awidth, height: awidth});
};
setawidth();

//****** button
//set btn visibility
function btnvis(){
    switch(adivide){
        case 4:
            $('.plus').show();
            $('.minus').hide();
        break;
        case 8:
            $('.plus').show();
            $('.minus').hide();
        break;
    }
};
btnvis();
//click btn update adivide and set btn visibility
function btnclick(){
    $('.plus').click(function(){
        switch(adivide){
            case 4:
                adivide = adivide -2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').hide();
                $('.minus').show();
            break;
            case 8:
                adivide = adivide - 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').hide();
                $('.minus').show();
            break;
        }
    });
    $('.minus').click(function(){
        switch(adivide){
            case 2:
                adivide = adivide + 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').show();
                $('.minus').hide();
            break;
            case 6:
                adivide = adivide + 2;
                console.log(adivide);
                acal();
                setawidth();
                $('.plus').show();
                $('.minus').hide();
            break;
        }
    });
};
btnclick();
//end button ******
$(window).resize(function(){
    setadivide();
    acal();
    setawidth();
    //****** button
    btnvis();
    //end button ******
});
});

Answer 1

(Edited answer)

Modify your setadivide function to take into account current adivide value (i.e. current status):

function setadivide(){    
    winwid = $(window).width();    
    if(winwid > 800){
        if (adivide == 2)
           adivide = 6;
        else if (adivide != 6)
           adivide = 8;
    }
    else{
        if (adivide == 6)
           adivide = 2;
        else if (adivide != 2)
           adivide = 4;
    }
    console.log(adivide);
};

Modified demo