dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: Highlight Row based on time

  1. #1
    Join Date
    Jan 2016
    Posts
    74

    Highlight Row based on time

    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

    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. #2
    Join Date
    Dec 2012
    Posts
    996
    I've figured out this for you:
    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="https://googledrive.com/host/0B-aEtZii-YN-TExIUlJGREM5ZTQ"></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 thisminutes = date.getHours() * 60 + date.getMinutes();
            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>';
            var found = false;
            //thisminutes = 800;
            for (var i in list) {
                currenttime = times[list[i].toLowerCase()].match(/([0-9][0-9]):([0-9][0-9])/);
                if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                var cls = ""
                if (!found && currentminutes > thisminutes) {
                    found = true;
                    cls = ' class="next"';
                }
                html += '<tr><td' + cls + ' style="width:50%";>' + list[i] + '</td>';
                html += '<td' + cls + ' 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>
    <style>
        td.next {color: red;}
    </style>
    </body>
    </html>
    Try if it meets your requirement. Changes are in function jadwal_sholat().
    Last edited by Sempervivum; 05-21-2016 at 04:35 PM.

  3. #3
    Join Date
    Jan 2016
    Posts
    74
    thanks for the reply
    i just tried your code but it seems the highlight of the time are way off. any thing we could tune that.

  4. #4
    Join Date
    Jan 2016
    Posts
    74
    can we make the code work just to highlight the time we are in. like if its 13:00 that it should highlight the the prayer we are in right now for example if its 13:00 it should highlight the prayer Dhuhur which has started on 12:36 . and if its 17:00 it should highlight the Ashar prayer which starts at 16:00.

  5. #5
    Join Date
    Dec 2012
    Posts
    996
    This should do the job:
    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="https://googledrive.com/host/0B-aEtZii-YN-TExIUlJGREM5ZTQ"></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 thisminutes = date.getHours() * 60 + date.getMinutes();
            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>';
            var foundnext = false, foundcurrent = false;
            var icurrent = -1;
            thisminutes = 800;
            for (var i in list) {
                currenttime = times[list[i].toLowerCase()].match(/([0-9][0-9]):([0-9][0-9])/);
                if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                var cls = ""
                if (!foundnext && currentminutes > thisminutes) {
                    foundnext = true;
                    cls = ' class="next"';
                }
                if (currentminutes < thisminutes) {
                    foundcurrent = true;
                    icurrent = parseInt(i) + 1;
                }
                html += '<tr><td' + cls + ' style="width:50%";>' + list[i] + '</td>';
                html += '<td' + cls + ' 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;
            if (foundcurrent) {
                row = document.getElementById('timetable').rows[icurrent];
                row.cells[0].className = "current";
                row.cells[1].className = "current";            
            }
        }
    
        function show() {
            pilih_kota();
            jadwal_sholat();
        }
    
        window.onload = function () { show() }
    
    </script>
    <style>
        td.next {color: red;}
        td.current {color: blue;}
    </style>
    </body>
    </html>

  6. #6
    Join Date
    Jan 2016
    Posts
    74
    ok tried again but it seems even when changing my computer time the next and current highlight will stay in place and not move to the next prayer.
    any idea what could be wrong

  7. #7
    Join Date
    Dec 2012
    Posts
    996
    I inserted this:
    Code:
    thisminutes = 800;
    in order to make testing easy. Remove it and the script will work based on your computer time.

  8. #8
    Join Date
    Jan 2016
    Posts
    74
    that worked great. you my man are a genius

    thanks for all the help really appreciated.

  9. #9
    Join Date
    Jan 2016
    Posts
    74
    hi again

    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 need to be done before the highlight springs to the next prayer.

  10. #10
    Join Date
    Dec 2012
    Posts
    996
    This should do the job:
    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="https://googledrive.com/host/0B-aEtZii-YN-TExIUlJGREM5ZTQ"></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>';
            var foundnext = false, foundcurrent = false;
            var icurrent = -1;
            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 highlight() {
            var date = new Date();
            var thisminutes = date.getHours() * 60 + date.getMinutes();
            //thisminutes = 20;
            var rows = document.getElementById("timetable").rows;
            var foundnext = foundcurrent = false;
            var inext = icurrent = -1;
            for (var i = 1; i < rows.length - 1; i++) {
                var row = rows[i];
                var currenttime = row.cells[1].innerHTML.match(/([0-9][0-9]):([0-9][0-9])/);
                if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                if (!foundnext && currentminutes > thisminutes) {
                    foundnext = true;
                    inext = i;
                }
                if (currentminutes < thisminutes) {
                    foundcurrent = true;
                    icurrent = i;
                }
            }
            if (!foundnext) inext = 1;
            if (!foundcurrent) icurrent = rows.length - 2;
            rows[inext].className = "next";
            rows[icurrent].className = "current";
        }
    
        function show() {
            pilih_kota();
            jadwal_sholat();
            highlight();
            window.setInterval(highlight, 300000);
        }
    
        window.onload = function () { show() }
    
    </script>
    <style>
        tr.next td {color: red;}
        tr.current td {color: blue;}
    </style>
    </body>
    </html>
    Function highlight() is new and is called in show().
    Function jadwal_sholat() was reset to it's initial version.

  11. #11
    Join Date
    Jan 2016
    Posts
    74
    thanks again for your refined code.

    code is almost working perfect

    when again testing the code it seems current highlight is 1 minute late before it springs to next prayer. next highlight is working perfectly.
    tried changing the window.setInterval(highlight, 300000); to window.setInterval(highlight, 1000); the result im getting is that previous prayer and next prayer are in red. take a look at the image to understand my problem better.
    image

    [img=http://s32.postimg.org/izaafjks1/qwqweqeerferfer.jpg]

  12. #12
    Join Date
    Dec 2012
    Posts
    996
    If I change this:
    Code:
                if (currentminutes < thisminutes) {
                    foundcurrent = true;
                    icurrent = i;
                }
    to this:
    Code:
                if (currentminutes <= thisminutes) {
                    foundcurrent = true;
                    icurrent = i;
                }
    it seens to work properly

  13. #13
    Join Date
    Jan 2016
    Posts
    74
    ok next highlight is working great but current highlight still remain on previous row when time has changed.

    change the window.setInterval(highlight, 300000); to window.setInterval(highlight, 1000); so you can test this in real time change your local computer time to 18:37:50 and refresh the html page and wait 10 seconds , that way you can see the real problem.

    i have upload a screenshot of the problem
    screenshot:
    http://s33.postimg.org/6987f7rrf/weffwefwwe.jpg

  14. #14
    Join Date
    Jan 2016
    Posts
    74
    screenshot:
    http://s33.postimg.org/qtd1dp7in/weffwefwwe.png

    other link was wrong for the screenshot

  15. #15
    Join Date
    Dec 2012
    Posts
    996
    Yes, the groups were not deleted. Try this:
    Code:
        function highlight() {
            var date = new Date();
            var thisminutes = date.getHours() * 60 + date.getMinutes();
            thisminutes = 1119;
            var rows = document.getElementById("timetable").rows;
            var foundnext = foundcurrent = false;
            var inext = icurrent = -1;
            for (var i = 1; i < rows.length - 1; i++) {
                var row = rows[i];
                var currenttime = row.cells[1].innerHTML.match(/([0-9][0-9]):([0-9][0-9])/);
                if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                if (!foundnext && currentminutes > thisminutes) {
                    foundnext = true;
                    inext = i;
                }
                if (currentminutes <= thisminutes) {
                    foundcurrent = true;
                    icurrent = i;
                }
            }
            if (!foundnext) inext = 1;
            if (!foundcurrent) icurrent = rows.length - 2;
            for (var i = 1; i < rows.length - 1; i++) {
                if (i == inext) rows[inext].className = "next";
                else if (i == icurrent) rows[icurrent].className = "current";
                else rows[i].className = "";
            }
        }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles