Commits

Anonymous committed c06e0be

Added demo page

Comments (0)

Files changed (1)

-<!doctype html>
+
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html>
 <head>
+  <title>Automatic timezone detection using JavaScript</title>  
+  <style type="text/css">
+  body {
+    font-family: helvetica, arial, sans-serif;
+    background-color: #555;
+    color: #fff;
+    text-shadow:1px 1px 0px #000;
+    padding: 0px;
+    margin: 0px;
+  }
+  
+  div#content {
+    background-color: #333;
+    width: 100%;
+    border-top: 1px solid #fff;
+    border-bottom: 1px solid #fff;
+    -box-shadow: 5px 5px 3px #333;
+    -moz-box-shadow: 5px 5px 3px #333;
+    -webkit-box-shadow: 5px 5px 3px #333;
+  }
+  
+  div#content p {
+    padding: 3px 10px 3px 10px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 30px;
+    font-weight: normal;
+  }
+  
+  p.info {
+    width: 740px;
+    margin-top: -2px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 11px;
+    font-weight: normal;
+    text-align: right;
+    letter-spacing: 1px;
+  }
+  
+  p.instructions {
+    width: 620px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 16px;
+    text-align: left;
+    letter-spacing: 1px;
+    line-height: 23px;
+  }
+  
+  ul {
+    width: 620px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 16px;
+    letter-spacing: 1px;
+    line-height: 23px;
+  }
+  
+  h1 {
+    text-align: center;
+    margin-bottom: 0px;
+  }
+  
+  h3 {
+    width: 620px;
+    font-size: 22px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 25px;
+    margin-bottom: -5px;
+  }
+  
+  h3.omg {
+    color: #d77;
+  }
+  
+  a {
+    border-bottom:1px solid #A7A7A7;
+    color:#bdf;
+    line-height:20px;
+    white-space:nowrap;
+    text-decoration: none;
+  }
+  
+  a:hover {
+    border-color: #fff;
+  }
+  </style>
+  <link href="http://www.pageloom.com/tz/prettify.css" type="text/css" rel="stylesheet">
+  <script type="text/javascript" src='http://cdn.bitbucket.org/pellepim/jstimezonedetect/downloads/jstz.min.js'></script>
+  <script type="text/javascript" src='http://www.pageloom.com/tz/prettify.js'></script>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+  <script type="text/javascript">
+  $(document).ready(function () {
+        var tz = jstz.determine();
+        
+        response_text = 'No timezone found';
+        
+        if (typeof (tz) === 'undefined') {
+            response_text = 'No timezone found';
+        }
+        else {
+            response_text = tz.name(); 
+        }
+        
+        $('#tz_info').html(response_text);
+        
+        $('#code-example').html(">>> var timezone = jstz.determine();\n" +
+        ">>> timezone.name(); \n" + 
+        "\"" + tz.name() + "\"\n\n");
+        $('#tz_info').show();
+        prettyPrint();
+    });
+  </script>
 </head>
+
 <body>
-Just testing!
+
+<h1>Automatic Timezone Detection Using JavaScript</h1>
+<p class="info">MIT licensed, maintained as: <a href="https://bitbucket.org/pellepim/jstimezonedetect"/>jsTimezoneDetect</a></p>
+<div id="content">
+<p id="tz_info"></p>
+</div>
+<h3>How do I use jsTimezoneDetect?</h3>
+<p class="instructions">
+    This script gives you the zone info key representing your device's time zone setting.
+<p class="instructions">    
+    It is synchronous, fast and about 1.65 KB gzipped (4.9 KB uncompressed).  
+</p>
+<p class="instructions">    
+  <a href="https://bitbucket.org/pellepim/jstimezonedetect/downloads#download-38156">Download 
+  the latest minified version here</a>. Include it on a webpage. Then:
+</p>
+<pre id="code-example" class="prettyprint">
+  >>> var timezone = jstz.determine_timezone();
+  >>> timezone.name();
+  "Europe/Berlin"
+</pre>
+<h3>What do I do with the result?</h3>
+<p class="instructions">Use the time zone key to do datetime normalizations across time zones.</p>
+<p class="instructions">The key is compliant with the zoneinfo database, often called the "Olson database".
+    </p>
+<p class="instructions">Every programming language in the world worth the name supports the zoneinfo database, or has libraries that does.</p>
+<p class="instructions"><a href="http://en.wikipedia.org/wiki/Tz_database">More at Wikipedia!</a></p>
+
+<h3>How do I test this script?</h3>
+<p class="instructions">To test the detection script, simply change your system timezone, <strong>restart 
+    the browser</strong>, and open this page again. 
+    
+    Firefox and Internet Explorer do not seem to require restarting the browser.
+</p>    
+
+<h3 class="omg">I don't like the timezone this script gives me!</h3>
+<p class="instructions">If you are looking for historically and/or geographically precise 
+    timezones. <strong>jsTimezoneDetect is not for you</strong>.</p>
+<p class="instructions">This script does not do geolocation. It simply picks the most populated 
+    timezone among several identical ones (in modern time).</p>
+<p class="instructions">For example, it is hard to quickly distinguish between different timezones 
+    in central Europe. And often it is not needed, since they are all the same in modern time.</p>
+<p class="instructions">
+    This script will return Europe/Berlin regardless of where you live in the 
+    Central European timezone. Even though <strong>Europe/Amsterdam</strong> and 
+    <strong>Europe/Berlin</strong> are historically different, nowadays they are idential.</p>
+<p class="instructions">
+    <a href="https://bitbucket.org/pellepim/jstimezonedetect/wiki/Detection_List">Click here for 
+        the list of timezones this script is able to detect</a>.</p>
+<h3 class="omg">Bug?</h3>
+<p class="instructions">If this script fails to correctly determine your timezone, <a href="https://bitbucket.org/pellepim/jstimezonedetect/issues/new">please report it!</a></p>
+<p class="instructions">When you report an issue. Please tell me </p>
+<ul>
+    <li>what timezone your computer is set to,</li>
+    <li>what operating system you use, and</li>
+    <li>what browser you use.</li>
+</ul>
 </body>
 </html>