cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv


A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <!DOCTYPE html>
<html style="height: 100%;">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <script type="text/javascript" src="http://praytimes.org/code/v2/js/PrayTimes.js"></script>

  <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>


<script src='https://maps.googleapis.com/maps/api/js?v=3&libraries=places'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>


  <title> Monthly Prayer Timetable </title>
    body, tr, form {font-size: 12px; color: #404040; text-align: center; margin: 0; padding: 0}
    pre {font-family: courier, serif, size: 10pt; margin: 0px 8px;}
    input {font-size: 12px;}
    .sheader {background:#eef; border-bottom: 1px solid #ddd; padding: 7px;}
    .caption {font-size: 20px; color: #d95722; text-align: center; width: 10em;}
    .arrow {font-weight: bold; text-decoration: none; color: #3D3D3D; }
    .arrow:hover {text-decoration: underline;}
    .command {font-weight: bold; text-decoration: none; color: #AAAAAA; }
    .command:hover {text-decoration: underline;}
    .timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; margin: 0 auto;}
    .timetable td {border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC;}
    .head-row {color: black; background-color: #eef;}
    .today-row {background-color: #000; color: #fff}



(function($) {

  var debug = function(msgOrObject) {
    if (typeof(msgOrObject) === 'object') {
      msgOrObject = JSON.stringify(msgOrObject);

  function bindAutocomplete() {

    var acService = new google.maps.places.AutocompleteService(),
      placesService = new google.maps.places.PlacesService(document.createElement('div')),
        searchTypes = ['geocode'];

      source: function(req, resp) {

          input: req.term,
          types: searchTypes
        }, function(places, status) {
          console.log('places', places);
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            var _places = [];
            for (var i = 0; i < places.length; ++i) {
                id: places[i].place_id,
                value: places[i].description,
                label: places[i].description
      select: function(e, o) {
          placeId: o.item.id
        }, function(place, status) {
          console.log("details", place);
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            debug(o.item.value +
              '\n is located at \n ' +


  // ** INITIALIZE ** //
  $(function() {
    try {
    } catch (e) {
      debug({error: e});



        var key = 'AIzaSyB0Itj_hV1-tkIczLJ9kQiJNePyoaDfd4k';
        var x=document.getElementById("detected_location");

		function getLocation()
          if (navigator.geolocation)
          else{ x.innerHTML="Geolocation is not supported by this browser. Please enter your location below:";}
        function showPosition(position)
              var lati = position.coords.latitude; var longi = position.coords.longitude;
              x.innerHTML="Latitude: " + lati +
              "<br>Longitude: " + longi;

              // var loc = document.getElementById('location');
              // loc.value= lati + ',' + longi;
              document.getElementById('latitude').value = lati;
              document.getElementById('longitude').value = longi;
              ga('send', {
                'hitType': 'event',          // Required.
                'eventCategory': 'AJAX',   // Required.
                'eventAction': 'geolocation',      // Required.
                'eventLabel': 'Location Coords',
                'eventValue': lati+','+longi
          function getGoogleLoc(lati,longi,address){
              !!(address) ?address = jQuery('#location').val() : address = false; 
              var dataString = {
                  sensor: true,
                  latlng: lati+","+longi

              if(address) dataString['address'] = address;
              var req = jQuery.ajax({
                url: "https://maps.googleapis.com/maps/api/geocode/json",
                type: "GET",
                cache: false,
                data: dataString,
                dataType: "JSON"
                  if(data && data.results && data.results.length) var formattedLoc = data.results[0].formatted_address;
                  var updatedLati = data.results[0].geometry.location.lat;
                  var updatedLongi = data.results[0].geometry.location.lng;
                  ga('send', {
                    'hitType': 'event',          // Required.
                    'eventCategory': 'AJAX',   // Required.
                    'eventAction': 'Google Maps API',      // Required.
                    'eventLabel': 'Geocoder Location',
                    'eventValue': formattedLoc
          function getTimeZone(lati,longi){
            jQuery.getJSON('https://maps.googleapis.com/maps/api/timezone/json?location='+lati+','+longi+'&timestamp='+ +new Date()/1000, function(data){

              var dst = data.dstOffset/3600;
              var tz = data.rawOffset/3600;

              ga('send', {
                    'hitType': 'event',          // Required.
                    'eventCategory': 'AJAX',   // Required.
                    'eventAction': 'Google Maps API',      // Required.
                    'eventLabel': 'Timezone API',
                    'eventValue': tz




<input name="location" id="location" value="" onchange="getGoogleLoc(false,false,true)" type="text" placeholder="enter location..."/>

<div class="console"></div>

          <h3 class="formatted_loc">Amsterdam, Netherlands</h3>

<div class="sheader">
<form class="form" action="javascript:update();">
  Latitude: <input value="52.3702157" id="latitude" size="2" onchange="update();" type="text">&nbsp;
  Longitude: <input value="4.8951679" id="longitude" size="2" onchange="update();" type="text">&nbsp;
  Time Zone: <input value="1" id="timezone" size="2" onchange="update();" type="text">&nbsp;
  <select id="dst" size="1" style="font-size: 12px;" onchange="update()">
    <option value="auto">Auto</option>
    <option value="0" selected="selected">0</option>
    <option value="1">1</option>
  <select id="method" size="1" style="font-size: 12px;" onchange="update()">
    <option value="MWL" selected="selected">Muslim World League (MWL)</option>
    <option value="ISNA">Islamic Society of North America (ISNA)</option>
    <option value="Egypt">Egyptian General Authority of Survey</option>
    <option value="Makkah">Umm al-Qura University, Makkah</option>
    <option value="Karachi">University of Islamic Sciences, Karachi</option>
    <option value="Jafari">Shia Ithna-Ashari (Jafari)</option>
    <option value="Tehran">Institute of Geophysics, University of Tehran</option>

  <table align="center">
    <td><a href="javascript:displayMonth(-1)" class="arrow">&lt;&lt;</a></td>
    <td id="table-title" class="caption">November 2016</td>
    <td><a href="javascript:displayMonth(+1)" class="arrow">&gt;&gt;</a></td>

  <table id="timetable" class="timetable"></table>

  <div style="margin-top: 7px" align="center">
    Source: <a href="http://praytimes.org/" class="command">PrayTimes.org</a> |
    Time Format: <a id="time-format" href="javascript:switchFormat(1)" title="Change clock format" class="command">24-hour</a>



<script type="text/javascript">

  var currentDate = new Date();
  var timeFormat = 2;

  // display monthly timetable
  function displayMonth(offset) {
	    prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
	    prayTimes.tune( {imsak: 0, fajr: -90, sunrise: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
    var lat = $('latitude').value;
    var lng = $('longitude').value;
    var timeZone = $('timezone').value;
    var dst = $('dst').value;
    var method = $('method').value;

    currentDate.setMonth(currentDate.getMonth()+ 1* offset);
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    var title = monthFullName(month)+ ' '+ year;
    $('table-title').innerHTML = title;
    makeTable(year, month, lat, lng, timeZone, dst);

  // make monthly timetable
  function makeTable(year, month, lat, lng, timeZone, dst) {
    var items = {day: 'Day', fajr: 'Fajr', sunrise: 'Sunrise',
          dhuhr: 'Dhuhr', asr: 'Asr', // sunset: 'Sunset',
          maghrib: 'Maghrib', isha: 'Isha'};

    var tbody = document.createElement('tbody');
    tbody.appendChild(makeTableRow(items, items, 'head-row'));

    var date = new Date(year, month, 1);
    var endDate = new Date(year, month+ 1, 1);
    var format = timeFormat ? '12hNS' : '24h';

    while (date < endDate) {
      var times = prayTimes.getTimes(date, [lat, lng], timeZone, dst, format);
      times.day = date.getDate();
      var today = new Date();
      var isToday = (date.getMonth() == today.getMonth()) && (date.getDate() == today.getDate());
      var klass = isToday ? 'today-row' : '';
      tbody.appendChild(makeTableRow(times, items, klass));
      date.setDate(date.getDate()+ 1);  // next day

  // make a table row
  function makeTableRow(data, items, klass) {
    var row = document.createElement('tr');
    for (var i in items) {
      var cell = document.createElement('td');
      cell.innerHTML = data[i];
      cell.style.width = i=='day' ? '2.5em' : '3.7em';
    row.className = klass;
    return row;

  // remove all children of a node
  function removeAllChild(node) {
    if (node == undefined || node == null)

    while (node.firstChild)

  // switch time format
  function switchFormat(offset) {
    var formats = ['24-hour', '12-hour'];
    timeFormat = (timeFormat+ offset)% 2;
    $('time-format').innerHTML = formats[timeFormat];

  // update table
  function update() {

  // return month full name
  function monthFullName(month) {
    var monthName = new Array('January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December');
    return monthName[month];

  function $(id) {
    return document.getElementById(id);


Loading ..................