box
幅とbtn
位置を変更しようとしていwindow width
ます。
Q1. スクロールバーのすぐ後ろの空白を削除するには? (もう100%にしていますが…)
Q2.2回クリックbtn
して青いものに戻した後、btn
位置は以前と同じではありません。修正方法は?(console.logを設定して、クリックbtn
window width
が異なるかどうかを確認します。なぜですか?)
jsFiddle
任意の提案をいただければ幸いです、ありがとう。
$(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();
});