Question

I’m trying to make box width and btn position, change depend on window width.
Q1. How to remove white space right behind the scroll bar? (I already set 100%..)

Q2. After I click btn 2 times back to blue one, btn position not same as before. How to fix it? (I set console.log to check if I click btn window width will be different, why?)

jsFiddle
Any suggestion will be appreciated, Thanks.

$(function(){
    //set column amount
    var colamt=0;
    var winwid = $(window).width();
    function setcolamt(){
        winwid = $(window).width();    
        console.log(winwid);
        if(winwid > 300){
            if(colamt !== 8){
                colamt = 6;
            }
        }
        console.log(colamt);
    };
    setcolamt();
    //set column width
    var colwid;
    function setcolwid(){
        //set column width
        colwid = 100 / colamt + "%";
        console.log(colwid);
    };
    setcolwid();
    //set img width
    function setimgwid(){
        $('.box').css({width: colwid});
    };
    setimgwid();
    // ****** button
    //set button postion
    var boxwid;
    function setbtnpos(){
        boxwid = $('.box').width();
        console.log(boxwid);
        $('.colamtminus').css({top: boxwid * 2});
        $('.colamtplus').css({top: boxwid * 2});    
    };
    setbtnpos();
    //set button visibility when landing
    function visbtnchangecolamt(){
        if(winwid > 300){
            if(colamt == 8){
                $('.colamtplus').show();
                $('.colamtminus').hide();
            }
            else{
                $('.colamtplus').hide();
                $('.colamtminus').show();
            }
        }
    };
    visbtnchangecolamt();
    //click button update colamt and set button visibility
    function setbtnchangecolamt(){
        winwid = $(window).width();    
        $('.colamtplus').click(function(){
            if(winwid > 300){
                colamt = 6;
            }
            setcolamt();
            setcolwid();
            setimgwid();
            setbtnpos();
            visbtnchangecolamt();
            $('.colamtplus').hide();
            $('.colamtminus').show();
        });
        $('.colamtminus').click(function(){
            winwid = $(window).width();    
            if(winwid > 300){
                colamt = 8;
            }
            setcolamt();
            setcolwid();
            setimgwid();
            setbtnpos();
            visbtnchangecolamt();
            $('.colamtplus').show();
            $('.colamtminus').hide();
        });
    };
    setbtnchangecolamt();
});​

Answer 1

do not load setcolamt() in setbtnchangecolamt();