Kategoriler

jQuery Namaz Vakti Eklentisi (Güncellendi)

11 yorum

jQuery Namaz Vakti Eklentisi (Güncellendi)

Bugün mert’in yaptığı bir işte böyle bir şey lazım oldu.. Benden rica etti, bende biraz uğraştım ama sonunda güzel bir şey yapmayı başardım.. Hazır yapmışken, bir eklenti haline getirip dağıtalım dedik 🙂 Peki bu eklenti ne işe yarıyor, ne yapıyor? Kısaca buna bir açıklık getireyim..

Bu eklenti ezan vakitlerinin ne zaman geleceğini söylüyor.. Örneğin bir sonraki ezan vaktine şu kadar saat dakika saniye kaldı gibi.. Ezan vakti geldiğinde ise ezan sesi oynatılıyor, ezan okuyor.. Tabi bu opsiyonel, isterseniz sadece yazı ile ezan okunuyor şeklinde yazdırabilirsiniz.. Yani ezan sesini açmak zorunda değilsiniz.. Görünüşte ise geçmiş ezan vakitleri farklı, son geçmiş ezan vakti farklı ve o an okunan ezan vakti farklı şekillerde görünüyor.. Bunlar için sınıflar belirledik.. Kısaca sınıflar şöyle..jQuery Namaz Vakti Eklentisi (Güncellendi)

Bugün mert’in yaptığı bir işte böyle bir şey lazım oldu.. Benden rica etti, bende biraz uğraştım ama sonunda güzel bir şey yapmayı başardım.. Hazır yapmışken, bir eklenti haline getirip dağıtalım dedik 🙂 Peki bu eklenti ne işe yarıyor, ne yapıyor? Kısaca buna bir açıklık getireyim..

Bu eklenti ezan vakitlerinin ne zaman geleceğini söylüyor.. Örneğin bir sonraki ezan vaktine şu kadar saat dakika saniye kaldı gibi.. Ezan vakti geldiğinde ise ezan sesi oynatılıyor, ezan okuyor.. Tabi bu opsiyonel, isterseniz sadece yazı ile ezan okunuyor şeklinde yazdırabilirsiniz.. Yani ezan sesini açmak zorunda değilsiniz.. Görünüşte ise geçmiş ezan vakitleri farklı, son geçmiş ezan vakti farklı ve o an okunan ezan vakti farklı şekillerde görünüyor.. Bunlar için sınıflar belirledik..

Kısaca sınıflar şöyle;
– geçmiş ezan vakitleri için belirlenen sınıf: gecti
– geçmemiş ezan vakitleri için belirlenen sınıf: gecmedi
– en son geçmiş ezan vakti için ekstra olarak belirlenen sınıf: songecen
– o anki ezan vakti için belirlenen sınıf: suan

Bunun dışında birde parametreler var.. Onlar ise şöyle;
template => bir sonraki ezan vakti için süreyi belirlemenizi sağlar.. Kendi şablonunuzu çıkartabilirsiniz.
zamanGoster => sürenin hangi nesnede gösterileceği belirlenir
namazText => namaz okunurken ne yazacağı belirlenir.
ezanSesi => Eğer ezan sesini kapatmak istiyorsanız false değerini vereceksiniz.. İstemiyorsanız bunu tanımlamanıza gerek yok.
mp3 => oynatılacak mp3’ün adresi ( http://ia700406.us.archive.org/33/items/Ezanlar_210/AksamEzani.mp3 )

Standart HTML Yapısı

<div id="namaz">
    <div class="namaz">
        <div>
            <strong>imsak</strong>
            <span>03:29</span>
        </div>
        <div>
            <strong>güneş</strong>
            <span>05:25</span>
        </div>
        <div>
            <strong>öğle</strong>
            <span>13:08</span></span>
        </div>
        <div>
            <strong>ikindi</strong>
            <span>17:03</span>
        </div>
        <div>
            <strong>akşam</strong>
            <span>20:39</span>
        </div>
        <div>
            <strong>yatsı</strong>
            <span>22:25</span>
        </div>
    </div>
    
    <div class="namaz_vakti">
        <p></p>
    </div>
</div>

Burada sınıfı namaz olanın yapısı aynen böyle kalmalıdır.. Onun dışnıda namaz_vakti sınıflı div sizin tercihiniz, o parametrelerde belirtebildiğiniz bir nesne olduğu için istediğiniz yere istediğiniz şekilde koyabilirsiniz 🙂

Eklentiyi Kullanma

Eklenti dosyasını ve jquery kütüphanesini çağırdıktan sonra şöyle kullanıyorsunuz;

var ayarlar = {
    template: "Bir Sonraki Ezan Vaktine: {saat}:{dakika}:{saniye}",
    zamanGoster: '.namaz_vakti p',
    namazText: 'Şuan Ezan Okunuyor..',
    mp3: 'http://ia700406.us.archive.org/33/items/Ezanlar_210/AksamEzani.mp3'
};
$.namazVakti(ayarlar);

Gördüğünüz gibi, bu kadar basit 🙂

Eklentiyi İndir

İndireceğiniz arşiv dosyasında sıkıştırılmış ve sıkıştırılmamış versiyonları bulunmaktadır.
http://yadi.sk/d/b44MPCYu6GUiK

Demo

Not: Gece geç saatlerde yazdığım için hatalar olabilir, hata görürseniz bana bildirirseniz çok sevinirim.. Ve ek olarak, namaz sesini yüklemek için html5 audio özelliğini kullandım, bundan dolayı tarayıcı sorunları olabilir bilginiz olsun.

Güncelleme

28 Haziran 2013, 23:40 – Son namaz vaktine geldiğinde bir sonraki vakte kalan zamanı -‘li değer olarak hesaplatıyordu.. Bir mantık hatası yapmışım, bu hatayı giderdim.. İndiren arkadaşların yeniden indirmesini rica ederim.

Yorumlar (11)

Celalettin Yilmaz demiş ki;

http://geoip.flagfox.net/ Adresinden sorgulama ile yapabilirsin :) zamanında birisi bunun için class yazmıştı 1 ay önce kadar kapandı sanırım html kodlarını değiştirdiler bir incele istersen :)

Tayfun Erbilen demiş ki;

@Hasan Hüseyin, teşekkür ederim.. GeoLocation olayına ve Şehre Göre Namaz Vakitlerini çekebileceğim bir şeyler var mı diye bakacağım.. Ancak ne yazık ki dinayet'in iğrenç bir sitesi olduğundan, oradan pek mümkün olmayacak gibi.. Bakalım, hayırlısı (:

Hasan Hüseyin demiş ki;

Tayfun Merhaba,

Böyle güzel bir çalışma yapman gerçekten hoş. İslami proje hazırlayanlar için güzel bir eklenti olmuş. Bulunduğu şehri ip ile tespit etmesinide sağlayabilir misin ?

Eline sağlık hayırlı çalışmalar.

Tayfun Erbilen demiş ki;

@Kralizasyon, küçük bir araştırma ile şöyle bir şey buldum;
http://diyanet.herokuapp.com/
Buradan ülkeye ve şehre göre namaz vakitlerini güncel olarak alabilirsin json formatında, daha sonra html elemanları içerisine yerleştirip bu eklentiyle birlikte kullanabilirsin.

Kralizasyon demiş ki;

Güzel yalnız her gün ezan vakitleri bir dakika ileri gidip geliyor. Her gün elimizle güncellemek zorunda mıyız bunu!?

Tayfun Erbilen demiş ki;

@ismail bayram, evet ben eskişehir'e göre ayarladım.. Html elemanlarında namaz vakitlerini şehrinize göre değiştirip kullanabilirsiniz.

ismail bayram demiş ki;

Çok güzel olmuş eline sağlık. Eskişehir'e göre mi bu ?

Tayfun Erbilen demiş ki;

@Davut KARA, benim burada amacım bir sonraki namaz vaktini göstermekti.. Birde namaz vaktinde ezan okunmasını sağlamak :) Diğer işlemleri yapmak size kalmış.

Davut KARA demiş ki;

Tayfun abi vakitler illere göre değişiyorya saat farkından dolayı. Oraya bir il seçici ve koyarsan çok daha güzel olur şuan süper olmuş.

sefa demiş ki;

allah razı olsun

Özkan PALA demiş ki;

Güzel bir çalışma olmuş.

Yorum Gönder