-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
47 lines (45 loc) · 2.46 KB
/
Copy pathindex.html
File metadata and controls
47 lines (45 loc) · 2.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<title>Frequency</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./index.css">
<link rel="shortcut icon" type="image/png" href="./favicon.ico">
<script src="./jquery-1.11.0.min.js"></script>
<script src="./frequency.js"></script>
</head>
<body>
<div id="parent">
<a href="https://github.com/pranavrc/frequency"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<h1>frequency.js</h1>
<div id="exp">Periodic blinkers, <a href="http://xkcd.com/1331/" target="_blank">XKCD-style</a></div><hr /><br />
<table>
<tr>
<td data-frequency="1" title="~1 heartbeat per second.">HEARTBEAT</td>
<td data-frequency="0.2398" title="~4.17 births per second.">BIRTHS</td>
<td data-frequency="0.5555" title="~1.80 deaths per second.">DEATHS</td>
<td data-frequency="21.8322" title="~0.0458 earthquakes per second.">EARTHQUAKES</td>
</tr>
</table><br />
<hr /><br />
<div id="content">
<a href="https://github.com/pranavrc/frequency">frequency.js</a> is a tiny JavaScript library to display periodic events by flashing HTML elements, inspired by XKCD's 1331st webcomic, <a href="http://xkcd.com/1331" target="_blank">Frequency</a>. It requires <a href="http://jquery.com/" target="_blank">jQuery</a>.<br /><br />
Set up your script tags:
<div class="code">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><br />
<script src="/path/to/frequency.js"></script><br />
</div><br />
Add the attribute <strong><em>data-frequency="<time period in seconds>"</em></strong> to any element that you want to flash:
<div class="code">
<span <strong>data-frequency="2.71828"</strong>>This will flash once in 2.71828 seconds.</span><br />
<span <strong>data-frequency="10"</strong>>This will flash once in 10 seconds.</span><br />
</div><br />
That gives us:<br />
<span data-frequency="2.71828">This will flash once in 2.71828 seconds.</span><br />
<span data-frequency="10">This will flash once in 10 seconds.</span>
</div>
</div><br />
<hr /><br />
<div id="footer">© <a href="http://onloop.net/">Pranav Ravichandran</a>.</div>
</body>
</html>