Jquery derslerimize devam ediyoruz.Bu derste resize() methodunu anlatacağım.Resize browser penceresinde değişen boyutları yakalar.Örneğin zoom yaptığımızda yada pencereyi küçültüp,büyültüğümüzde resize bu anı yakalar.Bu yakalamaya göre bizde işlemler yapabiliriz.Genellikle responsive sitelerde uyum için kullanılır.Kullanımı oldukça basitir.
İndir : http://ustaderslik.com/dosya/Jquery%20Ders-37%20resize()%20Kullanımı.zip
$(window).resize(function(){
//işlemler
})
Bu şekilde değişimi yakalıyoruz.Window yerine document ve body de yazabiliriz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var w=$(window).width(),h=$(window).height();
$(".w").text(w)
$(".h").text(h)//ilk boyutlar
$(window).resize(function(){//boyut değişirse
var w=$(window).width(),h=$(window).height();
$(".w").text(w)
$(".h").text(h)//değiştikten sonraki boyutlar.
})
})
</script>
</head>
<body>
<div class="w"></div>
<div class="h"></div>
</body>
</html>
Yukarıdaki örnekte pencere boyutu her değiştiğinde yeni boyutlarını alıp ekrana bastım.Responsive sitelerinizde bu şekilde boyutları alıp sığdırma işlemi yapabiliriz.