Skip to content
Browse files

Quick tutorial on building an advent calendar

  • Loading branch information...
0 parents commit 31d74868957d345c3c9d28dab6c0ee04dd49254e @codepo8 committed Nov 29, 2011
Showing with 701 additions and 0 deletions.
  1. +75 −0 ajax.php
  2. +59 −0 dummyapi.php
  3. +66 −0 finalbuild/api.php
  4. +53 −0 finalbuild/calendar.js
  5. +20 −0 finalbuild/index.php
  6. +43 −0 finalbuild/styles.css
  7. +118 −0 moving.php
  8. +52 −0 random.php
  9. +64 −0 realapi.php
  10. +118 −0 realcontent.php
  11. +17 −0 simpleapi-closing.php
  12. +16 −0 simpleapi.php
75 ajax.php
@@ -0,0 +1,75 @@
+<?php include('simpleapi.php');?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Ajaxified calendar</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<style>
+ * {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+ }
+ footer, section, header {
+ display: block;
+ }
+ section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+ }
+ li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+ }
+</style>
+</head>
+<body>
+ <article>
+ <?php if($day) {echo $data;} ?>
+ </article>
+ <section>
+<ol><li style="left:104px;top:452px"><a href="dummyapi.php?day=1">1</a></li><li style="left:344px;top:226px"><a href="dummyapi.php?day=2">2</a></li><li style="left:631px;top:257px"><a href="dummyapi.php?day=3">3</a></li><li style="left:636px;top:28px"><a href="dummyapi.php?day=4">4</a></li><li style="left:519px;top:483px"><a href="dummyapi.php?day=5">5</a></li><li style="left:17px;top:399px"><a href="dummyapi.php?day=6">6</a></li><li style="left:489px;top:101px"><a href="dummyapi.php?day=7">7</a></li><li style="left:190px;top:368px"><a href="dummyapi.php?day=8">8</a></li><li style="left:382px;top:640px"><a href="dummyapi.php?day=9">9</a></li><li style="left:587px;top:570px"><a href="dummyapi.php?day=10">10</a></li><li style="left:534px;top:591px"><a href="dummyapi.php?day=11">11</a></li><li style="left:216px;top:488px"><a href="dummyapi.php?day=12">12</a></li><li style="left:18px;top:634px"><a href="dummyapi.php?day=13">13</a></li><li style="left:68px;top:60px"><a href="dummyapi.php?day=14">14</a></li><li style="left:404px;top:581px"><a href="dummyapi.php?day=15">15</a></li><li style="left:403px;top:498px"><a href="dummyapi.php?day=16">16</a></li><li style="left:353px;top:66px"><a href="dummyapi.php?day=17">17</a></li><li style="left:43px;top:303px"><a href="dummyapi.php?day=18">18</a></li><li style="left:314px;top:669px"><a href="dummyapi.php?day=19">19</a></li><li style="left:321px;top:152px"><a href="dummyapi.php?day=20">20</a></li><li style="left:472px;top:329px"><a href="dummyapi.php?day=21">21</a></li><li style="left:541px;top:280px"><a href="dummyapi.php?day=22">22</a></li><li style="left:420px;top:51px"><a href="dummyapi.php?day=23">23</a></li><li style="left:639px;top:122px"><a href="dummyapi.php?day=24">24</a></li></ol>
+
+ </section>
+<script>
+
+ var list = document.querySelector('ol'),
+ output = document.querySelector('article');
+
+ list.addEventListener('click', function(ev) {
+ var t = ev.target;
+ if (t.tagName ==='A') {
+ load(+t.innerHTML);
+ }
+ ev.preventDefault();
+ }, false);
+
+ function load(day) {
+ var httpstats = /200|304/;
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function() {
+ if (request.readyState == 4) {
+ if (request.status && httpstats.test(request.status)) {
+ output.innerHTML = request.responseText;
+ } else {
+ document.location = 'index.php?day=' + day;
+ }
+ }
+ };
+ request.open('get', 'simpleapi.php?ajax=1&day='+day, true);
+ request.setRequestHeader('If-Modified-Since',
+ 'Wed, 05 Apr 2006 00:00:00 GMT');
+ request.send(null);
+ }
+
+</script>
+</body>
+</html>
+
59 dummyapi.php
@@ -0,0 +1,59 @@
+<?php
+ $data = '';
+ $day = 0;
+ $day = +$_GET['day'];
+ // if (+date('m') < 12 || $day > +date('d')) {
+ // $day = 0;
+ // }
+ if ($day > 24) { $day = 24; }
+
+ if ($day) {
+ $data .= '<h1><a href="#">Title '.$day.'</a></h1>'.
+ '<p>Description</p>'.
+ '<p>See it in action <a href="#">here</a></p>';
+ }
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Adding dummy API</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<style>
+ * {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+ }
+ footer, section, header {
+ display: block;
+ }
+ section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+ }
+ li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+ }
+</style>
+</head>
+<body>
+ <article>
+ <?php if($day) {echo $data;} ?>
+ </article>
+ <section>
+ <li style="left:104px;top:452px"><a href="dummyapi.php?day=1">1</a></li><li style="left:344px;top:226px"><a href="dummyapi.php?day=2">2</a></li><li style="left:631px;top:257px"><a href="dummyapi.php?day=3">3</a></li><li style="left:636px;top:28px"><a href="dummyapi.php?day=4">4</a></li><li style="left:519px;top:483px"><a href="dummyapi.php?day=5">5</a></li><li style="left:17px;top:399px"><a href="dummyapi.php?day=6">6</a></li><li style="left:489px;top:101px"><a href="dummyapi.php?day=7">7</a></li><li style="left:190px;top:368px"><a href="dummyapi.php?day=8">8</a></li><li style="left:382px;top:640px"><a href="dummyapi.php?day=9">9</a></li><li style="left:587px;top:570px"><a href="dummyapi.php?day=10">10</a></li><li style="left:534px;top:591px"><a href="dummyapi.php?day=11">11</a></li><li style="left:216px;top:488px"><a href="dummyapi.php?day=12">12</a></li><li style="left:18px;top:634px"><a href="dummyapi.php?day=13">13</a></li><li style="left:68px;top:60px"><a href="dummyapi.php?day=14">14</a></li><li style="left:404px;top:581px"><a href="dummyapi.php?day=15">15</a></li><li style="left:403px;top:498px"><a href="dummyapi.php?day=16">16</a></li><li style="left:353px;top:66px"><a href="dummyapi.php?day=17">17</a></li><li style="left:43px;top:303px"><a href="dummyapi.php?day=18">18</a></li><li style="left:314px;top:669px"><a href="dummyapi.php?day=19">19</a></li><li style="left:321px;top:152px"><a href="dummyapi.php?day=20">20</a></li><li style="left:472px;top:329px"><a href="dummyapi.php?day=21">21</a></li><li style="left:541px;top:280px"><a href="dummyapi.php?day=22">22</a></li><li style="left:420px;top:51px"><a href="dummyapi.php?day=23">23</a></li><li style="left:639px;top:122px"><a href="dummyapi.php?day=24">24</a></li>
+
+ </section>
+<script>
+</script>
+</body>
+</html>
+
66 finalbuild/api.php
@@ -0,0 +1,66 @@
+<?php
+$now = '';
+$day = 0;
+$data = '';
+
+if (isset($_GET['day'])) {
+
+ $day = +($_GET['day']);
+
+ if ($day > 24) { $day = 24; }
+
+ /* uncomment when it is December */
+
+ // if (+date('m') < 12 || $day > +date('d')) {
+ // $day = 0;
+ // }
+
+ $url = 'https://docs.google.com/spreadsheet/pub?'.
+ 'key=0AhphLklK1Ve4dEp5X2tBNHFPM0hQSHpZQnBjYl9NLUE&output=csv';
+ $ch = curl_init();
+ curl_setopt($ch, CURLOPT_URL, $url);
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+ $output = curl_exec($ch);
+ curl_close($ch);
+
+ $csvdata = csv_to_array($output);
+
+ $now = $csvdata[($day-1)];
+
+ if ($now) {
+ $data .= '<h1><a href="'.$now[0].'">'.$now[1].'</a></h1>'.
+ '<p>'.$now[2].'</p>';
+ if ($now[3] !== '') {
+ $data .= '<p>You can also <a href="'.$now[3].
+ '">see it in action here</a>.</p>';
+ }
+ } else {
+ $data .= '<h1><a href="http://developer.mozilla.com">Not yet!</a></h1>'.
+ '<p>You have to wait, like all the others.</p>';
+ }
+}
+
+$data .= '<a id="close" href="index.php">x</a>';
+
+if (isset($_GET['ajax'])) { echo $data; }
+
+function csv_to_array($input, $delimiter=',') {
+ $header = null;
+ $data = array();
+ $csvData = str_getcsv($input, "\n");
+ foreach($csvData as $csvLine) {
+ if (is_null($header)) {
+ $header = explode($delimiter, $csvLine);
+ } else {
+ $items = explode($delimiter, $csvLine);
+ for($n = 0, $m = count($header); $n < $m; $n++){
+ $prepareData[$n] = $items[$n];
+ }
+ $data[] = $prepareData;
+ }
+ }
+ return $data;
+}
+?>
53 finalbuild/calendar.js
@@ -0,0 +1,53 @@
+(function(){
+var list = document.querySelector('ol'),
+ output = document.querySelector('article');
+
+list.addEventListener('click', function(ev) {
+ var t = ev.target;
+ if (t.tagName ==='A') {
+ var y = ev.clientY + document.body.scrollTop +
+ document.documentElement.scrollTop;
+ load(+t.innerHTML, y);
+ }
+ ev.preventDefault();
+}, false);
+
+
+output.addEventListener('click',function(ev){
+ var t = ev.target;
+ if(t.tagName === 'A' && t.id === 'close') {
+ output.style.top = '-400px';
+ output.className = '';
+ ev.preventDefault();
+ }
+},false);
+
+document.addEventListener( 'keydown', function(key) {
+ if ( key.keyCode === 27 ) {
+ if( output.className === 'show' ) {
+ output.style.top = '-400px';
+ output.className = '';
+ }
+ }
+ }, false );
+
+function load(day,y) {
+ var httpstats = /200|304/;
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function() {
+ if (request.readyState == 4) {
+ if (request.status && httpstats.test(request.status)) {
+ output.innerHTML = request.responseText;
+ output.className = 'show';
+ output.style.top = y + 'px';
+ } else {
+ document.location = 'index.php?day=' + day;
+ }
+ }
+ };
+ request.open('get', 'api.php?ajax=1&day='+day, true);
+ request.setRequestHeader('If-Modified-Since',
+ 'Wed, 05 Apr 2006 00:00:00 GMT');
+ request.send(null);
+}
+}());
20 finalbuild/index.php
@@ -0,0 +1,20 @@
+<?php include('api.php');?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Pulling real content</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+<body>
+ <article <?php if($day) {echo ' class="show"';} ?>>
+ <?php if($day) {echo $data;} ?>
+ </article>
+ <section>
+<ol><li style="left:104px;top:452px"><a href="dummyapi.php?day=1">1</a></li><li style="left:344px;top:226px"><a href="dummyapi.php?day=2">2</a></li><li style="left:631px;top:257px"><a href="dummyapi.php?day=3">3</a></li><li style="left:636px;top:28px"><a href="dummyapi.php?day=4">4</a></li><li style="left:519px;top:483px"><a href="dummyapi.php?day=5">5</a></li><li style="left:17px;top:399px"><a href="dummyapi.php?day=6">6</a></li><li style="left:489px;top:101px"><a href="dummyapi.php?day=7">7</a></li><li style="left:190px;top:368px"><a href="dummyapi.php?day=8">8</a></li><li style="left:382px;top:640px"><a href="dummyapi.php?day=9">9</a></li><li style="left:587px;top:570px"><a href="dummyapi.php?day=10">10</a></li><li style="left:534px;top:591px"><a href="dummyapi.php?day=11">11</a></li><li style="left:216px;top:488px"><a href="dummyapi.php?day=12">12</a></li><li style="left:18px;top:634px"><a href="dummyapi.php?day=13">13</a></li><li style="left:68px;top:60px"><a href="dummyapi.php?day=14">14</a></li><li style="left:404px;top:581px"><a href="dummyapi.php?day=15">15</a></li><li style="left:403px;top:498px"><a href="dummyapi.php?day=16">16</a></li><li style="left:353px;top:66px"><a href="dummyapi.php?day=17">17</a></li><li style="left:43px;top:303px"><a href="dummyapi.php?day=18">18</a></li><li style="left:314px;top:669px"><a href="dummyapi.php?day=19">19</a></li><li style="left:321px;top:152px"><a href="dummyapi.php?day=20">20</a></li><li style="left:472px;top:329px"><a href="dummyapi.php?day=21">21</a></li><li style="left:541px;top:280px"><a href="dummyapi.php?day=22">22</a></li><li style="left:420px;top:51px"><a href="dummyapi.php?day=23">23</a></li><li style="left:639px;top:122px"><a href="dummyapi.php?day=24">24</a></li></ol>
+
+ </section>
+<script src="calendar.js"></script>
+</body>
+</html>
43 finalbuild/styles.css
@@ -0,0 +1,43 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+}
+footer, section, header {
+ display: block;
+}
+article {
+ z-index: 10;
+ position: absolute;
+ top: -400px;
+ width: 700px;
+ background: #d3caff;
+ -moz-transition: top 1s;
+ -webkit-transition: top 1s;
+ -ms-transition: top 1s;
+ -o-transition: top 1s;
+ transition: top 1s;
+}
+article.show {
+ top: 200px;
+}
+
+section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+}
+li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+}
+li a {
+ display: block;
+ width: 40px;
+ height: 40px;
+}
118 moving.php
@@ -0,0 +1,118 @@
+<?php include('simpleapi-closing.php');?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Moving results calendar</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<style>
+ * {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+ }
+ footer, section, header {
+ display: block;
+ }
+ article {
+ z-index: 10;
+ position: absolute;
+ top: -400px;
+ width: 700px;
+ background: #d3caff;
+ -moz-transition: top 1s;
+ -webkit-transition: top 1s;
+ -ms-transition: top 1s;
+ -o-transition: top 1s;
+ transition: top 1s;
+ }
+ article.show {
+ top: 200px;
+ }
+
+ section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+ }
+ li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+ }
+ li a {
+ display: block;
+ width: 40px;
+ height: 40px;
+ }
+</style>
+</head>
+<body>
+ <article <?php if($day) {echo ' class="show"';} ?>>
+ <?php if($day) {echo $data;} ?>
+ </article>
+ <section>
+<ol><li style="left:104px;top:452px"><a href="dummyapi.php?day=1">1</a></li><li style="left:344px;top:226px"><a href="dummyapi.php?day=2">2</a></li><li style="left:631px;top:257px"><a href="dummyapi.php?day=3">3</a></li><li style="left:636px;top:28px"><a href="dummyapi.php?day=4">4</a></li><li style="left:519px;top:483px"><a href="dummyapi.php?day=5">5</a></li><li style="left:17px;top:399px"><a href="dummyapi.php?day=6">6</a></li><li style="left:489px;top:101px"><a href="dummyapi.php?day=7">7</a></li><li style="left:190px;top:368px"><a href="dummyapi.php?day=8">8</a></li><li style="left:382px;top:640px"><a href="dummyapi.php?day=9">9</a></li><li style="left:587px;top:570px"><a href="dummyapi.php?day=10">10</a></li><li style="left:534px;top:591px"><a href="dummyapi.php?day=11">11</a></li><li style="left:216px;top:488px"><a href="dummyapi.php?day=12">12</a></li><li style="left:18px;top:634px"><a href="dummyapi.php?day=13">13</a></li><li style="left:68px;top:60px"><a href="dummyapi.php?day=14">14</a></li><li style="left:404px;top:581px"><a href="dummyapi.php?day=15">15</a></li><li style="left:403px;top:498px"><a href="dummyapi.php?day=16">16</a></li><li style="left:353px;top:66px"><a href="dummyapi.php?day=17">17</a></li><li style="left:43px;top:303px"><a href="dummyapi.php?day=18">18</a></li><li style="left:314px;top:669px"><a href="dummyapi.php?day=19">19</a></li><li style="left:321px;top:152px"><a href="dummyapi.php?day=20">20</a></li><li style="left:472px;top:329px"><a href="dummyapi.php?day=21">21</a></li><li style="left:541px;top:280px"><a href="dummyapi.php?day=22">22</a></li><li style="left:420px;top:51px"><a href="dummyapi.php?day=23">23</a></li><li style="left:639px;top:122px"><a href="dummyapi.php?day=24">24</a></li></ol>
+
+ </section>
+<script>
+
+ var list = document.querySelector('ol'),
+ output = document.querySelector('article');
+
+ list.addEventListener('click', function(ev) {
+ var t = ev.target;
+ if (t.tagName ==='A') {
+ var y = ev.clientY + document.body.scrollTop +
+ document.documentElement.scrollTop;
+ load(+t.innerHTML, y);
+ }
+ ev.preventDefault();
+ }, false);
+
+
+ output.addEventListener('click',function(ev){
+ var t = ev.target;
+ if(t.tagName === 'A' && t.id === 'close') {
+ output.style.top = '-400px';
+ output.className = '';
+ ev.preventDefault();
+ }
+ },false);
+
+ document.addEventListener( 'keydown', function(key) {
+ if ( key.keyCode === 27 ) {
+ if( output.className === 'show' ) {
+ output.style.top = '-400px';
+ output.className = '';
+ }
+ }
+ }, false );
+
+ function load(day,y) {
+ var httpstats = /200|304/;
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function() {
+ if (request.readyState == 4) {
+ if (request.status && httpstats.test(request.status)) {
+ output.innerHTML = request.responseText;
+ output.className = 'show';
+ output.style.top = y + 'px';
+ } else {
+ document.location = 'index.php?day=' + day;
+ }
+ }
+ };
+ request.open('get', 'simpleapi-closing.php?ajax=1&day='+day, true);
+ request.setRequestHeader('If-Modified-Since',
+ 'Wed, 05 Apr 2006 00:00:00 GMT');
+ request.send(null);
+ }
+
+</script>
+</body>
+</html>
52 random.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Random-ish distribution</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+ }
+ footer, section, header {
+ display: block;
+ }
+ section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+ }
+ li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+ }
+ </style>
+</head>
+<body>
+ <section>
+ <?php
+ echo '<ol>';
+ $width = 700;
+ $height = 800;
+ for ($i=0;$i<24;$i++) {
+ $x = rand(10,$width-20);
+ $y = rand(10,$width-20);
+ echo '<li style="left:'.$x.'px;top:'.$y.'px">'.
+ '<a href="index.php?day='.($i+1).'">'.($i+1).'</a>'.
+ '</li>';
+ }
+ echo '</ol>';
+ ?>
+ </section>
+<script>
+</script>
+</body>
+</html>
+
64 realapi.php
@@ -0,0 +1,64 @@
+<?php
+$now = '';
+$day = 0;
+$data = '';
+
+if (isset($_GET['day'])) {
+
+ $day = +($_GET['day']);
+
+ if ($day > 24) { $day = 24; }
+
+ // if (+date('m') < 12 || $day > +date('d')) {
+ // $day = 0;
+ // }
+
+ $url = 'https://docs.google.com/spreadsheet/pub?'.
+ 'key=0AhphLklK1Ve4dEp5X2tBNHFPM0hQSHpZQnBjYl9NLUE&output=csv';
+ $ch = curl_init();
+ curl_setopt($ch, CURLOPT_URL, $url);
+ curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+ curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+ $output = curl_exec($ch);
+ curl_close($ch);
+
+ $csvdata = csv_to_array($output);
+
+ $now = $csvdata[($day-1)];
+
+ if ($now) {
+ $data .= '<h1><a href="'.$now[0].'">'.$now[1].'</a></h1>'.
+ '<p>'.$now[2].'</p>';
+ if ($now[3] !== '') {
+ $data .= '<p>You can also <a href="'.$now[3].
+ '">see it in action here</a>.</p>';
+ }
+ } else {
+ $data .= '<h1><a href="http://developer.mozilla.com">Not yet!</a></h1>'.
+ '<p>You have to wait, like all the others.</p>';
+ }
+}
+
+$data .= '<a id="close" href="index.php">x</a>';
+
+if (isset($_GET['ajax'])) { echo $data; }
+
+function csv_to_array($input, $delimiter=',') {
+ $header = null;
+ $data = array();
+ $csvData = str_getcsv($input, "\n");
+ foreach($csvData as $csvLine) {
+ if (is_null($header)) {
+ $header = explode($delimiter, $csvLine);
+ } else {
+ $items = explode($delimiter, $csvLine);
+ for($n = 0, $m = count($header); $n < $m; $n++){
+ $prepareData[$n] = $items[$n];
+ }
+ $data[] = $prepareData;
+ }
+ }
+ return $data;
+}
+?>
118 realcontent.php
@@ -0,0 +1,118 @@
+<?php include('realapi.php');?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Pulling real content</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<style>
+ * {
+ margin: 0;
+ padding: 0;
+ font-size: 15px;
+ font-family: helvetica,arial,sans-serif;
+ }
+ footer, section, header {
+ display: block;
+ }
+ article {
+ z-index: 10;
+ position: absolute;
+ top: -400px;
+ width: 700px;
+ background: #d3caff;
+ -moz-transition: top 1s;
+ -webkit-transition: top 1s;
+ -ms-transition: top 1s;
+ -o-transition: top 1s;
+ transition: top 1s;
+ }
+ article.show {
+ top: 200px;
+ }
+
+ section {
+ width: 700px;
+ height: 800px;
+ position: relative;
+ background: #b4d455;
+ }
+ li {
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ background: #c0ffee;
+ list-style: none;
+ }
+ li a {
+ display: block;
+ width: 40px;
+ height: 40px;
+ }
+</style>
+</head>
+<body>
+ <article <?php if($day) {echo ' class="show"';} ?>>
+ <?php if($day) {echo $data;} ?>
+ </article>
+ <section>
+<ol><li style="left:104px;top:452px"><a href="dummyapi.php?day=1">1</a></li><li style="left:344px;top:226px"><a href="dummyapi.php?day=2">2</a></li><li style="left:631px;top:257px"><a href="dummyapi.php?day=3">3</a></li><li style="left:636px;top:28px"><a href="dummyapi.php?day=4">4</a></li><li style="left:519px;top:483px"><a href="dummyapi.php?day=5">5</a></li><li style="left:17px;top:399px"><a href="dummyapi.php?day=6">6</a></li><li style="left:489px;top:101px"><a href="dummyapi.php?day=7">7</a></li><li style="left:190px;top:368px"><a href="dummyapi.php?day=8">8</a></li><li style="left:382px;top:640px"><a href="dummyapi.php?day=9">9</a></li><li style="left:587px;top:570px"><a href="dummyapi.php?day=10">10</a></li><li style="left:534px;top:591px"><a href="dummyapi.php?day=11">11</a></li><li style="left:216px;top:488px"><a href="dummyapi.php?day=12">12</a></li><li style="left:18px;top:634px"><a href="dummyapi.php?day=13">13</a></li><li style="left:68px;top:60px"><a href="dummyapi.php?day=14">14</a></li><li style="left:404px;top:581px"><a href="dummyapi.php?day=15">15</a></li><li style="left:403px;top:498px"><a href="dummyapi.php?day=16">16</a></li><li style="left:353px;top:66px"><a href="dummyapi.php?day=17">17</a></li><li style="left:43px;top:303px"><a href="dummyapi.php?day=18">18</a></li><li style="left:314px;top:669px"><a href="dummyapi.php?day=19">19</a></li><li style="left:321px;top:152px"><a href="dummyapi.php?day=20">20</a></li><li style="left:472px;top:329px"><a href="dummyapi.php?day=21">21</a></li><li style="left:541px;top:280px"><a href="dummyapi.php?day=22">22</a></li><li style="left:420px;top:51px"><a href="dummyapi.php?day=23">23</a></li><li style="left:639px;top:122px"><a href="dummyapi.php?day=24">24</a></li></ol>
+
+ </section>
+<script>
+
+ var list = document.querySelector('ol'),
+ output = document.querySelector('article');
+
+ list.addEventListener('click', function(ev) {
+ var t = ev.target;
+ if (t.tagName ==='A') {
+ var y = ev.clientY + document.body.scrollTop +
+ document.documentElement.scrollTop;
+ load(+t.innerHTML, y);
+ }
+ ev.preventDefault();
+ }, false);
+
+
+ output.addEventListener('click',function(ev){
+ var t = ev.target;
+ if(t.tagName === 'A' && t.id === 'close') {
+ output.style.top = '-400px';
+ output.className = '';
+ ev.preventDefault();
+ }
+ },false);
+
+ document.addEventListener( 'keydown', function(key) {
+ if ( key.keyCode === 27 ) {
+ if( output.className === 'show' ) {
+ output.style.top = '-400px';
+ output.className = '';
+ }
+ }
+ }, false );
+
+ function load(day,y) {
+ var httpstats = /200|304/;
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function() {
+ if (request.readyState == 4) {
+ if (request.status && httpstats.test(request.status)) {
+ output.innerHTML = request.responseText;
+ output.className = 'show';
+ output.style.top = y + 'px';
+ } else {
+ document.location = 'index.php?day=' + day;
+ }
+ }
+ };
+ request.open('get', 'realapi.php?ajax=1&day='+day, true);
+ request.setRequestHeader('If-Modified-Since',
+ 'Wed, 05 Apr 2006 00:00:00 GMT');
+ request.send(null);
+ }
+
+</script>
+</body>
+</html>
17 simpleapi-closing.php
@@ -0,0 +1,17 @@
+<?php
+ $data = '';
+ $day = 0;
+ $day = +$_GET['day'];
+ // if (+date('m') < 12 || $day > +date('d')) {
+ // $day = 0;
+ // }
+ if ($day > 24) { $day = 24; }
+
+ if ($day) {
+ $data .= '<h1><a href="#">Title '.$day.'</a></h1>'.
+ '<p>Description</p>'.
+ '<p>See it in action <a href="#">here</a></p>';
+ }
+ $data .= '<p><a href="index.php" id="close">close</a></p>';
+ if (isset($_GET['ajax'])) { echo $data; }
+?>
16 simpleapi.php
@@ -0,0 +1,16 @@
+<?php
+ $data = '';
+ $day = 0;
+ $day = +$_GET['day'];
+ // if (+date('m') < 12 || $day > +date('d')) {
+ // $day = 0;
+ // }
+ if ($day > 24) { $day = 24; }
+
+ if ($day) {
+ $data .= '<h1><a href="#">Title '.$day.'</a></h1>'.
+ '<p>Description</p>'.
+ '<p>See it in action <a href="#">here</a></p>';
+ }
+ if (isset($_GET['ajax'])) { echo $data; }
+?>

0 comments on commit 31d7486

Please sign in to comment.
Something went wrong with that request. Please try again.