今回は、コーディングの強い味方、jQueryの便利な使い方を見ていきます。
jQueryの環境構築は思っているものとさせて頂きます。
resize
resizeはjQueryのメソッドです。
役目としては、ウィンドウのサイズが変わった時に、そのサイズを取得するというものです。
何のことだか、という感じですよね。
使い方は、
hello.html
<script>
jQuery("window").resize(function(){
//widthやheightの値を得る処理
var h = $('window').height();
var w = $('window').width();
//上記の変数を代入して、htmlコードやcssコードと連動させる
});
</script>
という感じです。
resize()の中身は関数です。
また、取得対象は常に「window」になります。
例えば、position:fixedのleftとtopを調整し、画面の真ん中にモーダルを配置したい時、transformなどを利用すると思いますが、jQueryのresizeでも簡単にできちゃいます。
モーダルのwidthとheightを取得して、windowのwidthとheightからそれらを引き、２で割るとちょうど真ん中に配置されます。
画面がリサイズされるのに連動して、常に真ん中の位置をモーダルがキープできるので便利です。
ぜひ、使ってみてくださいね。