Geri Dön
Anasayfa
Jquery Responsive Metinler
Bu dersimizde ekran boyutu değiştiğin de bile metin boyutlarını sabit tutan responsiveText adlı bir plugini anlatacağım.Bu plugin sayesinde metinlerimizi sürekli aynı boyutta tutabiliriz.Yada belirlediğimiz minimum ve maximum değerler arasında da tutabiliriz.Pencere boyutuda değişse yada zoom yapılsada sürekli aynı kalır metinler.
İndir : http://ustaderslik.com/dosya/Responsive-Metin.zip
İncele : http://ustaderslik.com/ornek/Responsive-Metin/
Şimdi kullanımını görelim.Öncelikle jquery ile pluginimizi sayfaya dahil ediyoruz.Yukarıda örnekte mevcut dosyalar.Daha sonra alanı seçip plugini uyguluyoruz.
Uyguladığımız yere bazı parametreler verebiliyoruz.Bunlara bakalım.
data-compression : Bu fontun boyutunu temsil ediyor.78 değeri standart font boyutu olan 16 ya denk geliyor.78 değerini azaltıkça font büyüyor.Sadece bu parametreyi verirsek.Her boyutta aynı kalır font.
data-min: Normalde ekrana zoom yapıldığında font büyür.Bu büyüyen fontun ne kadar küçüleceğini burdan belirliyoruz.Örneğin 8px kadar küçülsün font.
data-max : Buda maximum değer için.
Genel örnek :
Görüntüsü :
Örnekte başlangıçta hepsi aynı boyutta.İlkine min ve max yok.İkincide min max var.Üçüncüde ise plugini uygulamadık.İlki hep aynı kaldı.Diğeri belirlediğimiz boyutta kaldı.Soununcu ise bayabi büyüdü.
İndir : http://ustaderslik.com/dosya/Responsive-Metin.zip
İncele : http://ustaderslik.com/ornek/Responsive-Metin/
Şimdi kullanımını görelim.Öncelikle jquery ile pluginimizi sayfaya dahil ediyoruz.Yukarıda örnekte mevcut dosyalar.Daha sonra alanı seçip plugini uyguluyoruz.
$('seçici').responsiveText();Uyguladığımız yere bazı parametreler verebiliyoruz.Bunlara bakalım.
data-compression : Bu fontun boyutunu temsil ediyor.78 değeri standart font boyutu olan 16 ya denk geliyor.78 değerini azaltıkça font büyüyor.Sadece bu parametreyi verirsek.Her boyutta aynı kalır font.
data-min: Normalde ekrana zoom yapıldığında font büyür.Bu büyüyen fontun ne kadar küçüleceğini burdan belirliyoruz.Örneğin 8px kadar küçülsün font.
data-max : Buda maximum değer için.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.responsiveText.js"></script>
<script type="text/javascript">
$(function(){
$('.alan1,.alan2').responsiveText();
})
</script>
</head>
<body>
<div class="alan1" data-compression="78">Deneme Yazısı</div>
<div class="alan2" data-compression="78" data-min="10" data-max="100">Deneme Yazısı</div>
<div class="alan3">Deneme Yazısı</div>
</body>
</html>
Görüntüsü :
Örnekte başlangıçta hepsi aynı boyutta.İlkine min ve max yok.İkincide min max var.Üçüncüde ise plugini uygulamadık.İlki hep aynı kaldı.Diğeri belirlediğimiz boyutta kaldı.Soununcu ise bayabi büyüdü.