Highlight Row based on time

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 1094 Views - Last Post: 16 June 2016 - 12:37 PM

#1 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Highlight Row based on time

Posted 21 May 2016 - 11:17 AM

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.

This post has been edited by mio510: 21 May 2016 - 11:18 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Highlight Row based on time

#2 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,774
  • Joined: 12-December 12

Re: Highlight Row based on time

Posted 21 May 2016 - 11:59 AM

You can use getHours() to get the current hour (locally):

Date.prototype.getHours()

"The getHours() method returns the hour for the specified date, according to local time."

I am surprised you couldn't find this method.

Now you can make an attempt ;)

Note that elements no longer have an align attribute, use CSS to centre content.



I have moved this to the Javascript forum as HTML/CSS have nothing to do with time.

Here's a little further help:
var date = new Date(); // assumes the current date and time
var hour = date.getHours();

Was This Post Helpful? 0
  • +
  • -

#3 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 22 May 2016 - 06:22 AM

thanks for the reply

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.

<!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;

        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>


any help would be great, Changes in the code are in function jadwal_sholat().

codepen is codepen

thanks in advance

This post has been edited by mio510: 22 May 2016 - 06:32 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,774
  • Joined: 12-December 12

Re: Highlight Row based on time

Posted 22 May 2016 - 07:14 AM

Are there errors in your browser's console?
Is there anything overlapping your table? Use your browser's developer tools to inspect your page.

Note that the center tag does not exist in HTML5, use CSS to centre.

Also, what is different between the rows that are highlighted and those that aren't, other than that they are further down visually? Is the behaviour consistent? These are questions you need to ask yourself in order to discover the cause of the problem. For further debugging use console.log() to confirm that values are what you expect them to be.
Was This Post Helpful? 0
  • +
  • -

#5 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 22 May 2016 - 07:19 AM

tried everything seems i could not find anything. there has to be something wrong with the code
any idea and direction you could give m to look for. tried with the inspection tool noting was found that could cause this problem.
Was This Post Helpful? 0
  • +
  • -

#6 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 15 June 2016 - 09:24 AM

hi guys

need to know how to highlight the next prayer in a horizontal timetable

<html>
<head>

<meta name="keywords" http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">

<!--[if lte IE 8]>
<link href="css/style4ie.css" rel="stylesheet" type="text/css" />
<link href="css/bxslider_4ie.css" rel="stylesheet" />
<![endif]-->
<!--[if !lte IE 8]><!-->
<link href="https://www.googledrive.com/host/0B6erKxlMnhFDUmdnNzVfMVNtQWM?stylo.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRXV1eGFKOW5XcjQ?jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDd20tRkkwOVNDME0?jquery -1.6.4.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDWG1xcjlGRGdVUzA?jquery.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRVFpV0lRTG1pNG8?PrayTimes.js"></script> 

</head>
<body onload='prayerTimings(0);'>
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
	$(document).ready(function() {
 

	
	$('#my-address').keyup(function(e) {
	   if(e.keyCode == 13){
		 autoLocation();
		 check_again();
	   }
	 });

	$('#my-prayer').click(function() {
		 autoLocation();
		 check_again();
	 });

 	$('#my-address').focus(function() {
			$(this).val('');
			$(this).attr('placeholder','');
	});
	$('#my-address').blur(function() {
		if($(this).val()=="") {
			$(this).attr('placeholder',$('#input-support').val());
			$(this).val($('#input-support').val());			
		}
	});
	  
	});
})( jQuery );	

</script>

<script type="text/javascript">
  
function autoComplete(){
	// Create the autocomplete object, restricting the search
	// to geographical location types.
	autocomplete = new google.maps.places.Autocomplete(
	  /** @type {HTMLInputElement} */(document.getElementById('my-address')),
	  { types: ['geocode'] });
}

function autoLocation(){
	geocoder = new google.maps.Geocoder();
	var address = document.getElementById("my-address").value;
	document.getElementById("input-support").value=address;	
	
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			
		var latitude_manual = results[0].geometry.location.lat();
		var longitude_manual = results[0].geometry.location.lng();
		
		jQuery.noConflict();
		(function( $ ) {
		$.ajax(
		   {
			   url: ' ',
			   data: {'latitude': latitude_manual,'longitude':longitude_manual},
			   type: 'post',
			   success: function(output)
			   {
					//alert(output);
					var timeZone_manual = output;
					//alert(latitude_manual+' '+longitude_manual+' '+timeZone_manual);					
					document.getElementById('latitude').value = latitude_manual;
					document.getElementById('longitude').value = longitude_manual;
					document.getElementById('timezone').value = timeZone_manual;
					prayerTimings(0);
					update_month();	
					update_year();
			   }
			}
        );			
		})( jQuery );
	
			document.getElementById('timing_error').style.display = "none";
			document.getElementById('adjust_error_one').style.marginTop = "25px";
			document.getElementById('adjust_error_two').style.marginTop = "25px";	
	
		} 
		else {
			//alert("Geocode was not successful for the following reason: " + status);
			document.getElementById('timing_error').style.display = "block";
			document.getElementById('adjust_error_one').style.marginTop = "8px";
			document.getElementById('adjust_error_two').style.marginTop = "8px";	
		}
    });
}

/*Daily Prayer Timing Code Starts*/

	prayTimes.setMethod('MWL');
	prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
	prayTimes.tune( {fajr: -90, sunrise: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
	var todayDate = new Date();

	function prayerTimings(offset){
	todayDate.setDate(todayDate.getDate() + offset);

	var latitude = $('latitude').value;
	var longitude = $('longitude').value;
	
	var times = prayTimes.getTimes(todayDate, [latitude, longitude]);
	var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
	
	var html = '<table id="dailyTimeTable">';
	html +=  '<tr class="qibla_map_bg_h"><td><span class="fajr2"></span><br />الفجر<br /> Fajr</td><td><span class="fajr2"></span><br />الشروق<br />Shoroeq</td><td><span class="fajr2"></span><br />الظهر<br />Dhuhr</td><td><span class="fajr2"></span><br />العصر<br />Asr</td><td><span class="fajr2"></span><br />المغرب<br />Maghrib</td><td><span class="fajr2"></span><br />العشاء<br />Isha</td></tr>';
	for(var i in list)	{
		html += '<td class="qibla_map_bg_tr">'+ times[list[i].toLowerCase()]+ '</td>';
	}
	html += '</tr></table>';
	document.getElementById('dailyTimeTable-Container').innerHTML = html;
	
	function $(id) {
		return document.getElementById(id);
	}
}
/*Daily Prayer Timing Code Ends*/

</script>

		<h5 class="timing_field_h5"><span id="change-mode">Daily</span> Prayer Timings</h5>
	
    <div style="margin-top: 25px;" class="left timing_field_box" id="adjust_error_one">
	          <input value="New York, NY, United States" autocomplete="off" id="my-address" placeholder="New York, NY, United States" onfocus="autoComplete()" class="timing_field" type="text">
	   <input name="input-support" id="input-support" value="New York, NY, United States" type="hidden">
</div>

	<div style="display:none;">
	<input value="40.7127837" id="latitude" size="2" onchange="update_month(); update_year();" type="text">
	<input value="-74.00594130000002" id="longitude" size="2" onchange="update_month(); update_year();" type="text">
	</div>

<div class="qibla_map_bg">
<div class="wrapper">
<div id="dailyTimeTable-Container"></div>

</div>
</div>

</body>
</html>


take a look at the jsfiddle https://jsfiddle.net/6wynybqk/ to see my code

so what i want is if for example the time is 18:55 the highlight should be on the next prayer which is Asr


thanks in advance

This post has been edited by mio510: 15 June 2016 - 09:24 AM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,774
  • Joined: 12-December 12

Re: Highlight Row based on time

Posted 15 June 2016 - 10:25 AM

Do not start a new topic for the same question, topics merged.

Three weeks have passed, what progress have you made? What is your specific issue and question?
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: Highlight Row based on time

Posted 15 June 2016 - 11:21 AM

That jsfiddle link has several error messages for me, it's not downloading any of your scripts from googledrive.com because they don't have the correct MIME type.
Was This Post Helpful? 0
  • +
  • -

#9 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 15 June 2016 - 02:11 PM

o so my problem im having with this timetable is that the search field where you type a place or address is not working. when searching for example Washington DC i see the google maps auto complete function but when clicking on a ny place the prayer time table will not auto update the times for that location.

it seems some function is broken but after 2 days searching i still haven't found the problem.

im talking about this table not the time table from the first post

https://jsfiddle.net/6wynybqk/

ArtificialSoldier

code is working properly for me when visiting the jsfiddle scripts are also working, beside the problem i just explained above

This post has been edited by mio510: 15 June 2016 - 02:18 PM

Was This Post Helpful? 0
  • +
  • -

#10 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: Highlight Row based on time

Posted 15 June 2016 - 03:11 PM

Opera and Chrome won't execute those scripts at all because of the MIME type. If I try it in Firefox I get a different list of errors. I can type in the box and select a location, but it doesn't do anything else. I think the problem is that you're linking to a bunch of files on your Google Drive account, but you have to be logged in to access those files. So it works for you, but no one else.
Was This Post Helpful? 0
  • +
  • -

#11 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 15 June 2016 - 03:28 PM

those files on my google drive are public so are the links in the html file. tried on different browsers with not logging in my google drive or any other services i did not get any problem table is loading, but like i said before the main problem i have now is selecting different locations does not update my prayer time table that's where i'm stuck right now.
so when you say selecting different locations or typing in any other location noting happens that's normal because that's the main problem i have right now , hopefully someone could help me out with this

This post has been edited by mio510: 15 June 2016 - 03:32 PM

Was This Post Helpful? 0
  • +
  • -

#12 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 15 June 2016 - 03:53 PM

try to go on the links i posted here below

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRXV1eGFKOW5XcjQ?jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDd20tRkkwOVNDME0?jquery -1.6.4.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDWG1xcjlGRGdVUzA?jquery.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRVFpV0lRTG1pNG8?PrayTimes.js"></script> 


jquery-1.7.2.js
jquery -1.6.4.js
jquery.js
PrayTimes.js

you should access those scripts without any problem
Was This Post Helpful? 0
  • +
  • -

#13 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 15 June 2016 - 04:01 PM

oke just figured out what the problem is why you can't acces the script you where right about you have to be logged in google account . but it doesn't matter which google account you just have to be logged in google to see the files.
i made the links open for everyone not just google users. please see if the problem has been solved. But time table will still not update it's time to the selected location when searching for a different location.
Was This Post Helpful? 0
  • +
  • -

#14 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1830
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: Highlight Row based on time

Posted 15 June 2016 - 04:10 PM

It looks like it's working correctly now. Previously Firebug was showing several redirections for that URL which ended on the login page for Google Drive, which resulted in a syntax error because it was showing the HTML login page instead of Javascript code.

I still see an error message in the console, although I can't tell what the problem is when the code is minified. You might be trying to load a CSS file as a Javascript file.

Is that 3 versions of jQuery you're trying to load? Those are all going to overwrite each other, you only need to load jQuery once. Loading it more than once removes the previous version.

Is this the code that is supposed to change the table?

$.ajax(
{
  url: ' ',
  data: {'latitude': latitude_manual,'longitude':longitude_manual},
  type: 'post',
  success: function(output)
  {
    //alert(output);
    var timeZone_manual = output;
    //alert(latitude_manual+' '+longitude_manual+' '+timeZone_manual);          
    document.getElementById('latitude').value = latitude_manual;
    document.getElementById('longitude').value = longitude_manual;
    document.getElementById('timezone').value = timeZone_manual;
    prayerTimings(0);
    update_month(); 
    update_year();
  }
});


I'm not sure what you're doing there, you're sending an ajax request where the URL is a space character, and in the success function you're calling prayerTimings and passing it 0, which is supposed to be the timezone offset. You're always passing 0 though. It doesn't look like that is even being executed though, because I don't see an ajax request go out (maybe the URL is the problem though). Can you verify that the autoLocation function is running? Or that the geocoder runs the callback?
Was This Post Helpful? 0
  • +
  • -

#15 mio510  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 02-January 16

Re: Highlight Row based on time

Posted 16 June 2016 - 09:18 AM

ok added the geocoder script, but for the url i really don't know what to put there.

new jsfiddle link

https://jsfiddle.net/3c384fkL/3/

<html>
<head>

<meta name="keywords" http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">

<!--[if lte IE 8]>
<link href="css/style4ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !lte IE 8]><!-->
<link href="https://www.googledrive.com/host/0B6erKxlMnhFDMmN6MGFhOTMxUFU?stylo.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRXV1eGFKOW5XcjQ?jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDd20tRkkwOVNDME0?jquery -1.6.4.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDWG1xcjlGRGdVUzA?jquery.js"></script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDRVFpV0lRTG1pNG8?PrayTimes.js"></script> 
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDVFB6NC14ZnY0eFk?geocoder.js"></script> 

</head>

<body onload="prayerTimings(0);highlight();">
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
	$(document).ready(function() {
 

	
	$('#my-address').keyup(function(e) {
	   if(e.keyCode == 13){
		 autoLocation();
		 check_again();
	   }
	 });

	$('#my-prayer').click(function() {
		 autoLocation();
		 check_again();
	 });

 	$('#my-address').focus(function() {
			$(this).val('');
			$(this).attr('placeholder','');
	});
	$('#my-address').blur(function() {
		if($(this).val()=="") {
			$(this).attr('placeholder',$('#input-support').val());
			$(this).val($('#input-support').val());			
		}
	});
	  
	});
})( jQuery );	

</script>

<script type="text/javascript">
  
function autoComplete(){
	// Create the autocomplete object, restricting the search
	// to geographical location types.
	autocomplete = new google.maps.places.Autocomplete(
	  /** @type {HTMLInputElement} */(document.getElementById('my-address')),
	  { types: ['geocode'] });
}

function autoLocation(){
	geocoder = new google.maps.Geocoder();
	var address = document.getElementById("my-address").value;
	document.getElementById("input-support").value=address;	
	
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			
		var latitude_manual = results[0].geometry.location.lat();
		var longitude_manual = results[0].geometry.location.lng();
		
		jQuery.noConflict();
		(function( $ ) {
		$.ajax(
		   {
       	 url: '',
			   data: {'latitude': latitude_manual,'longitude':longitude_manual},
			   type: 'post',
			   success: function(output)
			   {
					//alert(output);
					var timeZone_manual = output;
					//alert(latitude_manual+' '+longitude_manual+' '+timeZone_manual);					
					document.getElementById('latitude').value = latitude_manual;
					document.getElementById('longitude').value = longitude_manual;
					document.getElementById('timezone').value = timeZone_manual;
					prayerTimings(0);
					update_month();	
					update_year();
			   }
			}
        );			
		})( jQuery );
	
			document.getElementById('timing_error').style.display = "none";
			document.getElementById('adjust_error_one').style.marginTop = "25px";
			document.getElementById('adjust_error_two').style.marginTop = "25px";	
	
		} 
		else {
			//alert("Geocode was not successful for the following reason: " + status);
			document.getElementById('timing_error').style.display = "block";
			document.getElementById('adjust_error_one').style.marginTop = "8px";
			document.getElementById('adjust_error_two').style.marginTop = "8px";	
		}
    });
}

/*Daily Prayer Timing Code Starts*/

	prayTimes.setMethod('MWL');
	prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
	prayTimes.tune( {fajr: -90, sunrise: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
	var todayDate = new Date();

	function prayerTimings(offset){
	todayDate.setDate(todayDate.getDate() + offset);

	var latitude = $('latitude').value;
	var longitude = $('longitude').value;
	
	var times = prayTimes.getTimes(todayDate, [latitude, longitude]);
	var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
	
	var html = '<table id="dailyTimeTable">';
	html +=  '<tr class="qibla_map_bg_h"><td><span class="fajr2"></span><br />الفجر<br /> Fajr</td><td><span class="fajr2"></span><br />الشروق<br />Shoroeq</td><td><span class="fajr2"></span><br />الظهر<br />Dhuhr</td><td><span class="fajr2"></span><br />العصر<br />Asr</td><td><span class="fajr2"></span><br />المغرب<br />Maghrib</td><td><span class="fajr2"></span><br />العشاء<br />Isha</td></tr>';
	for(var i in list)	{
		html += '<td class="qibla_map_bg_tr">'+ times[list[i].toLowerCase()]+ '</td>';
	}
	html += '</tr></table>';
	document.getElementById('dailyTimeTable-Container').innerHTML = html;
	
	function $(id) {
		return document.getElementById(id);
	}
}

            function highlight() {
                var date = new Date();
                var thisminutes = date.getHours() * 60 + date.getMinutes();
                //thisminutes = 1119;
                var tbl = document.getElementById("dailyTimeTable")
                var cells0 = tbl.rows[0].cells;
                var cells1 = tbl.rows[1].cells;
                var help = [];
                for (var i = 0; i < cells1.length; i++) {
                    var currenttime = cells1[i].innerHTML.match(/([0-9][0-9]):(/>[0-9][0-9])/);
                    if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                    entry = { currentminutes: currentminutes, currentidx: i };
                    help.push(entry);
                }
                help.sort(function(a, B)/> {return a.currentminutes - b.currentminutes;});
                var foundnext = foundcurrent = false;
                var inext = icurrent = -1;
                for (var i = 0; i < help.length; i++) {
                    currentminutes = help[i].currentminutes;
                    currentidx = help[i].currentidx;
                    if (!foundnext && currentminutes > thisminutes) {
                        foundnext = true;
                        inext = currentidx;
                    }
                    if (currentminutes <= thisminutes) {
                        foundcurrent = true;
                        icurrent = currentidx;
                    }
                }
                if (!foundnext) inext = help[0].currentidx;
                if (!foundcurrent) icurrent = help[help.length - 1].currentidx;
                for (var i = 0; i < cells1.length; i++) {
                    if (i == inext) {
                        cells0[i].className = "next";
                        cells1[i].className = "next";
                    } else if (i == icurrent) {
                        cells0[i].className = "current";
                        cells1[i].className = "current";
                    } else {
                        cells0[i].className = "";
                        cells1[i].className = "";
                    }
                }
            window.setTimeout(highlight, 0)
            }

   
/*Daily Prayer Timing Code Ends*/

</script>

		<h5 class="timing_field_h5"><span id="change-mode">Daily</span> Prayer Timings</h5>
	
    <div style="margin-top: 25px;" class="left timing_field_box" id="adjust_error_one">
	          <input value="New York, NY, United States" autocomplete="off" id="my-address" placeholder="New York, NY, United States" onfocus="autoComplete()" class="timing_field" type="text">
	   <input name="input-support" id="input-support" value="New York, NY, United States" type="hidden">
</div>

	<div style="display:none;">
	<input value="40.7127837" id="latitude" size="2" onchange="update_month(); update_year();" type="text">
	<input value="-74.00594130000002" id="longitude" size="2" onchange="update_month(); update_year();" type="text">
	</div>

<div class="qibla_map_bg">
<div class="wrapper">
<div id="dailyTimeTable-Container"></div>

</div>
</div>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2