-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (56 loc) · 2.91 KB
/
index.html
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>YATimeline by rootyb</title>
</head>
<body>
<div id="container">
<div class="inner">
<header>
<h1>YATimeline</h1>
<h2>This is a super-simple timeline I threw together for a project at work. It's almost completely unstyled, so the user can style as they see fit.</h2>
</header>
<section id="downloads" class="clearfix">
<a href="https://github.com/rootyb/YATimeline/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
<a href="https://github.com/rootyb/YATimeline/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
<a href="https://github.com/rootyb/YATimeline" id="view-on-github" class="button"><span>View on GitHub</span></a>
</section>
<hr>
<section id="main_content">
<h3>Usage:</h3>
<p>First off, let me just point out that this script is in a very early form, and will probably need some tweaking. That said, if you're ready to go, just download and include the following in your HTML file (along with jQuery 1.7.2, of course):</p>
<pre><code>
<script type="text/javascript" src="jquery.effects.core.js"></script>
<script type="text/javascript" src="jquery.yaTimeline.js"></script>
</code></pre>
<p>Then, just activate it on any container object:</p>
<pre><code>
$(document).ready(function(){
$(".timeline").yaTimeline();
});
</code></pre>
<p>The container object just needs to be a block-level element with some stuff inside. Any child elements will be turned into slides. Each slide needs to have a data-label attribute, which should contain that slide's label button, like so:</p>
<pre><code>
<div class="timeline">
<p data-label="June 2012">The June content</p>
<p data-label="July 2012">The July content</p>
</div>
</code></pre>
</section>
<footer>
YATimeline is maintained by <a href="https://github.com/rootyb">rootyb</a><br>
This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="http://twitter.com/jasonlong">Jason Long</a>.
</footer>
</div>
</div>
</body>
</html>