Highlight Row based on time

JavaScript
1

Hi guys

I have time table in html, and i need to know how to highlight the next event based on the time. Here is the code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body, td, th {font-family: verdana, sans-serif; font-size: 13px; color: #303030;}
        #timetable {border: 1px solid #aaa; border-collapse: collapse; width: 220px;}
        #timetable td, #timetable th {border: 1px solid #aaa; padding: 2px 4px;}
        #timetable th {color:#666; text-align: center; background: #FFF;padding:7px 0;}
    </style>
    
    <script type="text/javascript" src="PrayTimes.js"></script>
    
</head>

<body>
<p align="center">Jadwal Sholat Di Beberapa Kota</p>
<div align="center" style="margin:0;">
<form action="" method="post" name="form1" id="form1">
<select id="pilihan_kota" onChange="show()" style="width:220px; padding:3px 3px 3px 0px; color:#303030; font-family:verdana, sans-serif; font-size:13px;border:1px solid #aaa; border-bottom:none;">
        
<option value="1" selected>Abepura</option>
<option value="2">Ambarawa</option>
<option value="3">Ambon</option>

 
    </select>
</form>

</div>

<div align="center" id="table"></div>

<script type="text/javascript">
function pilih_kota() {    
    var pilihan_kota = document.getElementById('pilihan_kota');
    var kota = pilihan_kota.value;
    if (kota == 1) {
        geo = [-2.63000000, 140.58000000, 134.35];
        timezone = +9;
    }else if (kota == 2) {
        geo = [-7.25599000, 110.40658500, 520.42];
        timezone = +7;
    }else if (kota == 3) {
        geo = [-3.65607000,    128.16641900, 112.15];
        timezone = +9;

    }
}

function jadwal_sholat() {
    prayTimes.tune( {imsak: 2, subuh: 2, dhuhur: 2, ashar: 2, maghrib: 2, isya: 2} );
    
    var date = new Date(); // today
    var times = prayTimes.getTimes(date, geo, timezone);
    var list = ["Subuh", "Dhuhur", "Ashar", "Maghrib", "Isya"];
    var thisday=date.getDay();
    var thismonth=date.getMonth();
    var thisdate=date.getDate();
    var thisyear=date.getFullYear();
    var months = new Array("Januari", "Pebruari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember");
    var name_of_days = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum"+"'"+"at", "Sabtu");
    var day_name = name_of_days[thisday];
    var monthname = months[thismonth];
    var tanggal = day_name+", "+thisdate+" "+monthname+" "+thisyear;
    
    if (timezone == +7) {
        tz = "WIB";
    }else if (timezone == +8) {
        tz = "WITA";
    }else if (timezone == +9) {
        tz = "WIT";
    }else tz = "";

    var html = '<table id="timetable">';
    html += '<tr><th colspan="2">'+tanggal+'</th></tr>';
    for(var i in list)    {
        html += '<tr><td style="width:50%";>'+ list[i]+ '</td>';
        html += '<td align="center">'+ times[list[i].toLowerCase()]+"&nbsp;&nbsp;&nbsp;"+tz+ '</td></tr>';
    }
    html += '<tr><th colspan="2" style="margin:0;padding:0;font-weight:normal;text-align:left;"><ul style="list-style:none;margin:0;padding:5px 3px;"><li>Imsak&nbsp;:&nbsp;'+times.imsak+'&nbsp;'+tz+'</li><li>Subuh&nbsp;: 20&deg; ,&nbsp;Isya&nbsp;: 18&deg;</li><li>Waktu sudah ditambah 2 menit</center></li></ul></td></tr>';
    html += '</table>';
    document.getElementById('table').innerHTML = html;
}

function show() {
    pilih_kota();
    jadwal_sholat();
}

window.onload=function(){show()}

</script>

</body>
</html>

and this is the jsfiddle https://jsfiddle.net/n61k3m65/

So for example if the time is 15:00 it should highlight Ashar 16:00. which is the next prayer.

2

i tried this new code: but after testing the table with the highlight i did find one little problem it seems when the highlights are reaching the end of the table the highlight will be gone no current or next are visible they only appear if the time for prayers is somewhere in the middle of the table. could you please test that out and see if you are also getting this problem.

one more thing is it possible to get the highlight go to the next prayer in real time with this code a refresh of the page needs to be done before the highlight springs to the next prayer.

[code]

body, td, th {font-family: verdana, sans-serif; font-size: 13px; color: #303030;} #timetable {border: 1px solid #aaa; border-collapse: collapse; width: 220px;} #timetable td, #timetable th {border: 1px solid #aaa; padding: 2px 4px;} #timetable th {color:#666; text-align: center; background: #FFF;padding:7px 0;} 
<script type="text/javascript" src="https://googledrive.com/host/0B-aEtZii-YN-TExIUlJGREM5ZTQ"></script>

Jadwal Sholat Di Beberapa Kota

3

The codepen isn’t using the getTimes function, what is the data returned from that function?

You want to filter that list based on the current time.

var now = new Date();
var activeTime = times.filter(function(time) {
  return time.start < now && now < time.end;
})[0];
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.