You can use MPT jQuery plugin to display prayer times in your website. The plugin helps you to retrieve the prayer time data from the server and displays it in your own HTML element.
Shows the current prayer in Kubang Pasu. The event prayerChange is used to display the current prayer name and time.
Current Prayer in Kubang Pasu:
<div id="mpte">
<p>
<span>Current Prayer in Kubang Pasu: </span>
<span class="mpt-prayer"></span>
</p>
</div>
$('#mpte').mpt();
$('#mpte').bind('prayerChanged', function(e) {
var prayerNames = ["Subuh", "Syuruk", "Zohor", "Asar", "Maghrib", "Isyak"];
var time = e.currentPrayerTime.getHours() + ":" + e.currentPrayerTime.getMinutes();
$('#mpte .mpt-prayer').html(prayerNames[e.currentPrayer] + ' (' + time + ')');
});
$('#mpte').mpt('getData', 'kdh-1');
Shows the prayer table in Kubang Pasu. Use .time in the element the time is displayed with the parent containing the class .mpt-prayer-#. The class .active is applied to parent element of the current prayer.
| Subuh | 88:88 |
| Syuruk | 88:88 |
| Zohor | 88:88 |
| Asar | 88:88 |
| Maghrib | 88:88 |
| Isyak | 88:88 |
<table id="mptf">
<tr class="mpt-prayer-0">
<td class="name">Subuh</td>
<td class="time">88:88</td>
</tr>
<tr class="mpt-prayer-1">
<td class="name">Syuruk</td>
<td class="time">88:88</td>
</tr>
<tr class="mpt-prayer-2">
<td class="name">Zohor</td>
<td class="time">88:88</td>
</tr>
<tr class="mpt-prayer-3">
<td class="name">Asar</td>
<td class="time">88:88</td>
</tr>
<tr class="mpt-prayer-4">
<td class="name">Maghrib</td>
<td class="time">88:88</td>
</tr>
<tr class="mpt-prayer-5">
<td class="name">Isyak</td>
<td class="time">88:88</td>
</tr>
</table>
$('#mptf').mpt();
$('#mptf').mpt('getData', 'kdh-1');
Shows the horizontal prayer table in Kubang Pasu. Use .mpt-prayer-#-time and .mpt-prayer-#-name in the element the time and name is displayed. The class .active is applied to the element of the current prayer containing .mpt-prayer-#-time and .mpt-prayer-#-name.
| Subuh | Syuruk | Zohor | Asar | Maghrib | Isyak |
| 88:88 | 88:88 | 88:88 | 88:88 | 88:88 | 88:88 |
<table id="mptg">
<tr>
<td class="mpt-prayer-0-name">Subuh</td>
<td class="mpt-prayer-1-name">Syuruk</td>
<td class="mpt-prayer-2-name">Zohor</td>
<td class="mpt-prayer-3-name">Asar</td>
<td class="mpt-prayer-4-name">Maghrib</td>
<td class="mpt-prayer-5-name">Isyak</td>
</tr>
<tr>
<td class="mpt-prayer-0-time">88:88</td>
<td class="mpt-prayer-1-time">88:88</td>
<td class="mpt-prayer-2-time">88:88</td>
<td class="mpt-prayer-3-time">88:88</td>
<td class="mpt-prayer-4-time">88:88</td>
<td class="mpt-prayer-5-time">88:88</td>
</tr>
</table>
Options can be passed via JavaScript.
| Name | type | default | description |
|---|---|---|---|
| timeFormat | function | Returns the time in the format HH:MM. |
The method used to format the prayer times. Accepts a single argument timeFormat: function (d) {
var h = d.getHours();
var m = d.getMinutes();
return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);
} |
Retrieves the prayer times data from the server. Requires a location code code. The event prayerChanged will be triggered when the prayer times data is successfully downloaded.
$('#mpt').mpt('getData', 'kdh-01');
| Event | Description |
|---|---|
| prayerChanged | This event is fired when the prayer time has changed. To access the prayer index number, use event.currentPrayer or event.nextPrayer. To get the prayer time object use event.currentPrayerTime or event.nextPrayerTime |
$('#mpt').bind('prayerChanged', function(e) {
var prayerNames = ['Subuh', 'Syuruk', 'Zohor', 'Asar', 'Maghrib', 'Isyak'];
$('#mpt .mpt-prayer-name').html(prayerNames[e.nextPrayer]); // Next prayer
$('#mpt .mpt-prayer-time').html(e.nextPrayerTime); // Next prayer time
});