Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 3/5 yorum 0 yorum yazar Hakan Taşan tarih 19 Haziran 2015

Bu makalede jQuery kullanarak metin boyutunu değiştirmeyi öğreneceğiz. Genellikle haber sitelerinde yazıları büyültmek veya küçültmek için kullanılıyor. Aynı şekilde bu blogda da bir örneğini görebilirsiniz. Bunun nasıl yapıldığını herkesin anlaması için kodların olabildiğince basitleştirilmiş halini ve bir örneği sizinle paylaşıyorum. Bir uyarı olarak jQuery kütüphanesini eklemeyi unutmayınız yoksa kodlar çalışmaz.

jQuery Kodu

$(document).ready(function(){
    /* Metni orijinal haline getirmek için metnin önceden ayarlanmış 
font büyüklüğünü bir değişkene kaydediyoruz */
    var varsayilanFontBuyuklugu = $("#metin").css("font-size");

    /* class'ı "sifirla" olan HTML etiketine (buton, link vb.) tıklandığında 
metnin font büyüklüğünü orijinal haline getirir */
    $(".sifirla").click(function(){
        $("#metin").css({"font-size" : varsayilanFontBuyuklugu});
    });

    /* class'ı "buyult" olan HTML etiketine (buton, link vb.) tıklandığında metnin font büyüklüğünü 
her tıklamada 1.2 ile çarparak büyültür. Metnin font büyüklüğü 50'ye ulaştığında 
artık büyültme işlemini yapmaz. İsterseniz 1.2 değerini ve sınır değerini değiştirebilirsiniz. */
    $(".buyult").click(function(){
        var fontBuyukluguFloat = parseFloat($("#metin").css("font-size"));
        var yeniFontBuyuklugu = fontBuyukluguFloat * 1.2;

        if(yeniFontBuyuklugu < 50)
            $("#metin").css({"font-size" : yeniFontBuyuklugu});
    });

    /* class'ı "kucult" olan HTML etiketine (buton, link vb.) tıklandığında metnin font büyüklüğünü 
her tıklamada 0.8 ile çarparak küçültür. Metnin font büyüklüğü 5'in altına düştüğünde 
artık küçültme işlemini yapmaz. İsterseniz 0.8 değerini ve sınır değerini değiştirebilirsiniz. */
    $(".kucult").click(function(){
        var fontBuyukluguFloat = parseFloat($("#metin").css("font-size"));
        var yeniFontBuyuklugu = fontBuyukluguFloat * 0.8;

        if(yeniFontBuyuklugu > 5)
            $("#metin").css({"font-size" : yeniFontBuyuklugu});
        });
})

 

HTML Kodu

<button type="button" class="kucult">A-</button>
<button type="button" class="sifirla">Sıfırla</button>
<button type="button" class="buyult">A+</button>
<div id="metin">
    <p>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.</p>
    <p>1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.</p>
</div>

 

onizleme indir

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış