KLoning Spoon

unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.

If you do not need fancy looking hijri calendar widget, or you want to style the calendar text by yourself, or you are a webmaster or a web developer that want to build your own hijri calendar web applications, then the following code may be of use.

The script (modified from Robert van Gent’s page) calculates approximate hijri dates from current computer’s date. It is based on arithmetical calculation to match the current moon phase. The calculation is based on 30-year lunar cycle where length of the lunar months is defined aternatingly as 29 or 30 days. Every two or three year an extra day is added at the end of the year to keep up with the phase of the moon. This formula is also similar to “Kuwaiti Algorithm” used by Microsoft to define Hijri Calendar dates.

 function gmod(n,m){ return ((n%m)+m)%m; } function kuwaiticalendar(adjust){ var today = new Date(); if(adjust) { adjustmili = 1000*60*60*24*adjust; todaymili = today.getTime()+adjustmili; today = new Date(todaymili); } day = today.getDate(); month = today.getMonth(); year = today.getFullYear(); m = month+1; y = year; if(m<3) { y -= 1; m += 12; } a = Math.floor(y/100.); b = 2-a+Math.floor(a/4.); if(y<1583) b = 0; if(y==1582) { if(m>10) b = -10; if(m==10) { b = 0; if(day>4) b = -10; } } jd = Math.floor(365.25*(y+4716))+Math.floor(30.6001*(m+1))+day+b-1524; b = 0; if(jd>2299160){ a = Math.floor((jd-1867216.25)/36524.25); b = 1+a-Math.floor(a/4.); } bb = jd+b+1524; cc = Math.floor((bb-122.1)/365.25); dd = Math.floor(365.25*cc); ee = Math.floor((bb-dd)/30.6001); day =(bb-dd)-Math.floor(30.6001*ee); month = ee-1; if(ee>13) { cc += 1; month = ee-13; } year = cc-4716; if(adjust) { wd = gmod(jd+1-adjust,7)+1; } else { wd = gmod(jd+1,7)+1; } iyear = 10631./30.; epochastro = 1948084; epochcivil = 1948085; shift1 = 8.01/60.; z = jd-epochastro; cyc = Math.floor(z/10631.); z = z-10631*cyc; j = Math.floor((z-shift1)/iyear); iy = 30*cyc+j; z = z-Math.floor(j*iyear+shift1); im = Math.floor((z+28.5001)/29.5); if(im==13) im = 12; id = z-Math.floor(29.5001*im-29); var myRes = new Array(8); myRes[0] = day; //calculated day (CE) myRes[1] = month-1; //calculated month (CE) myRes[2] = year; //calculated year (CE) myRes[3] = jd-1; //julian day number myRes[4] = wd-1; //weekday number myRes[5] = id; //islamic date myRes[6] = im-1; //islamic month myRes[7] = iy; //islamic year return myRes; } function writeIslamicDate(adjustment) { var wdNames = new Array("Ahad","Ithnin","Thulatha","Arbaa","Khams","Jumuah","Sabt"); var iMonthNames = new Array("Muharram","Safar","Rabi'ul Awwal","Rabi'ul Akhir", "Jumadal Ula","Jumadal Akhira","Rajab","Sha'ban", "Ramadan","Shawwal","Dhul Qa'ada","Dhul Hijja"); var iDate = kuwaiticalendar(adjustment); var outputIslamicDate = wdNames[iDate[4]] + ", " + iDate[5] + " " + iMonthNames[iDate[6]] + " " + iDate[7] + " AH"; return outputIslamicDate; } 

Download Script

Here is the javascript code as .js file: hijricalendar-kuwaiti.js

Example outputs

Below is example output of the above script (the writeIslamicDate function) without date adjustment:

The code:

 document.write(writeIslamicDate()); 

Below is with date adjustment of 1 (advanced one day):

The code:

 document.write(writeIslamicDate(1)); 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  <head>

    <title>Clock</title>
   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="en-US" />
    <meta name="description" content="This is a live clock." />
    <meta name="keywords" content="live,clock" />

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var timerRunning = false;
var timezone = "Jakarta";  // what time zone are you in ?
var adjust = 0;

function timeCheck(tzone, diff) {
if (timerRunning) {
clearTimeout(updatetime);
timerRunning = false; }
gmtOffset=eval(diff+adjust);
timezone = tzone;
checkDateTime();
}

function checkDateTime () {
var today = new Date();
var year = today.getYear() + 1900;
var month = today.getMonth()+1;
var date = today.getDate();
var day = today.getDay();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();

var lastSat = date - (day+1);
while (lastSat < 32) lastSat+=7;
if (lastSat > 31) lastSat+=-7;
var firstSat = date - (day+1);
while (firstSat > 0) firstSat+=-7;
if (firstSat < 1) firstSat+=7;
if ((((month == 4) && (date >= firstSat)) || month > 4) &&
(month < 11 || ((month == 10) && day <= lastSat))) adjust += 60;
yourOffset = (new Date()).getTimezoneOffset();
yourOffset = yourOffset + adjust;

var xx = navigator.appName
var xy = navigator.appVersion;
xy = xy.substring(0,1);
if ((xy == 4) && (xx == "Netscape")) yourOffset = yourOffset+adjust;
if ((((month == 4) && (date > 20)) || month > 4) && (month < 11 || ((month == 10) &&
day < 30))) adjust -= 60;

ourDifference = eval(gmtOffset - yourOffset);
var half = eval(ourDifference % 60);
ourDifference = Math.round(ourDifference / 60);
hour = eval(hour - ourDifference);
var m = new Array("",
"Jan","Feb","Mar",
"Apr","May","Jun",
"Jul","Aug","Sept",
"Oct","Nov","Dec");
var leap = eval(year % 4);

if ((half == -30) || (half == 30)) minute += 30;
if (minute > 59) minute -= 60, hour++;
if (minute < 0) minute += 60, hour--;
if (hour > 23) hour -= 24, date += 1;
if (((month == 4) || (month == 6) ||
(month == 9) || (month == 11)) && (date==31)) date = 1, month ++;
if (((month == 2) && (date > 28)) && (leap != 0)) date = 1, month ++;
if ((month == 2) && (date > 29)) date = 1, month++;
if (hour < 0) hour += 24, date --;
if ((date == 32) && (month == 12)) month = m[1], date = 1, year++;
if (date == 32) date = 1, month++;
if ((date < 1) && (month == 1)) month= m[12], date = 31, year--;
if (date < 1) date = 31, month --;
if (((month == 4) || (month == 6) ||
(month== 9) || (month == 11)) && (date == 31)) date = 30;
if ((month == 2) && (date > 28)) date = 29;
if (((month == 2) && (date > 28)) && (leap != 0)) date=28;
for (i=1; i<13; i++) {
if (month == i) {
month = m[i]; break;
   }
}

var dateTime = hour;
dateTime = ((dateTime < 10) ? "0":"") + dateTime;
dateTime = "   " + dateTime;
dateTime += ((minute < 10) ? ":0" : ":") + minute;
dateTime += ((second < 10) ? ":0" : ":") + second;
dateTime += (hour >= 12) ? " PM, " : " AM, ";
dateTime += month + " " + date + ", " + year;

document.clock.zonetime.value = dateTime;
document.clock.zonename.value = timezone;
updatetime=setTimeout("checkDateTime()", 900);
timerRunning = true;
}
// End -->
</SCRIPT>

  </head>

  <body OnLoad="timeCheck(timezone, -420)">
   
    <center>
    <h2>World Clock</h2>
    <form name=clock>
    <input type=text name=zonetime size=31><br>
    <br>
    <b>Current Time Zone</b><br>
    <input type=text name=zonename size=21>
    <br>
    </form>
    </center>
  
  </body>

</html>

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.

Minimus: The OS X JavaScript and CSS Minifier is a GUI frontend for Yahoo’s YUI Compressor. Instead of using inconvenient and slow websites to compress your JavaScript and CSS, you can do it right on your Mac.

Minimus: The OS X JavaScript and CSS Minifier is a GUI frontend for Yahoo’s YUI Compressor. Instead of using inconvenient and slow websites to compress your JavaScript and CSS, you can do it right on your Mac.

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

For an example, see the README

Download

Change Log

Features

  • Works on HTML pages
  • Works even if code contains embedded links, line numbers, etc.
  • Simple API : include some JS&CSS and add an onload handler.
  • Lightweights : small download and does not block page from loading while running.
  • Customizable styles via CSS. See the themes gallery
  • Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • Extensible language handlers for other languages. You can specify the language.
  • Widely used with good cross-browser support. Powers code.google.com and stackoverflow.com

Easily add custom CSS and JavaScript code to individual Pages, Posts, Categories, and URLs.

Jo Javascript Framework: Cross Platform Demo