This time I will share jQuery Plugin and tutorial about Islamic Prayer Time Plugin For jQuery, hope it will help you in programming stack.
A tiny jQuery plugin that gets accurate prayer times from api.aladhan.com and displays them to users based on their location.
Useful for those Muslims who live in non-Islamic countries and cannot hear adhan (or azan) – the call to prayer – 5 times a day.
Features:
- Supports both English and Arabic.
- Stores data in local storage to prevent too many requests.
- 14 prayer times calculation methods.
- 2 Asr calculation methods.
- 24-hour or 12-hour formats.
- Custom output HTML.
How to use it:
1.Include the minified version of the jQuery Prayer Times plugin after jQuery.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/jquery.prayer.times.min.js" ></ script > |
2. Initialize the plugin on the container element in which you want to display the Prayer Times.
1 |
< div class = "prayer-times-container" ></ div > |
2 |
$( '.prayer-times-container' ).prayerTimes(); |
3. Change the language to ‘Arabic’. Default: English.
1 |
$( '.prayer-times-container' ).prayerTimes({ |
4. Determine the prayer times calculation method. Default: 4.
- 1: University of Islamic Sciences, Karachi
- 2: Islamic Society of North America (ISNA)
- 3: Muslim World League
- 4: Umm Al-Qura University, Makkah
- 5: Egyptian General Authority of Survey
- 7: Institute of Geophysics, University of Tehran
- 8: Gulf Region
- 9: Kuwait
- 10: Qatar
- 11: Majlis Ugama Islam Singapura, Singapore
- 12: Union Organization islamic de France
- 13: Diyanet İşleri Başkanlığı, Turkey
- 14: Spiritual Administration of Muslims of Russia
1 |
$( '.prayer-times-container' ).prayerTimes({ |
5. Determine the Asr calculation method. Default: 0.
1 |
$( '.prayer-times-container' ).prayerTimes({ |
6. Specify the city/country name. Default: null (auto detection).
1 |
$( '.prayer-times-container' ).prayerTimes({ |
7. Determine whether to show the imsak, sunrise, sunset, and midnight times. Default: true.
1 |
$( '.prayer-times-container' ).prayerTimes({ |
8. Switch between 24-hour and 12-hour formats. Default: true.
1 |
$( '.prayer-times-container' ).prayerTimes({ |
9. Customize the output HTML: ‘table'(default) or ‘ul’.
1 |
$( '.prayer-times-container' ).prayerTimes({ |