forked from whilp/sideshow
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.xhtml
More file actions
88 lines (75 loc) · 2.79 KB
/
Copy pathindex.xhtml
File metadata and controls
88 lines (75 loc) · 2.79 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Sideshow — XHTML5/JS/CSS presentations</title>
<link rel="stylesheet" type="text/css" href="css/sideshow.css" />
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<article>
<section>
<header>
<h1>Sideshow — XHTML5/JS/CSS presentations</h1>
</header>
<ul>
<li>Sideshow turns webpages into presentations</li>
<li>You can use it to write presentations, too</li>
<li>You can find/fork the code on github (BSD/MIT/X11 license):</li>
<li><a href="http://github.com/wcmaier/sideshow/">http://github.com/wcmaier/sideshow/</a></li>
<li>See the next slide for an example</li>
</ul>
</section>
<section>
<header>
<h1>Getting started</h1>
</header>
<ul>
<li>Start with a (X)HTML5 document with <code><article></code> and <code><section></code> tags</li>
<li>Load <a href="https://github.com/wcmaier/sideshow/blob/master/css/sideshow.css">sideshow.css</a></li>
<li>Load <a href="http://jquery.com/">jQuery</a>, <a href="http://benalman.com/projects/jquery-hashchange-plugin/">jQuery-hashchange</a> and <a href="https://github.com/wcmaier/sideshow/blob/master/js/sideshow.js">sideshow.js</a></li>
<li>Add a <code><script></code> at the end and call <code>$("article").sideshow()</code></li>
<li>The <code><article></code> becomes the presentation</li>
<ul>
<li>Each <code><section></code> within the <code><article></code> will become a slide</li>
<li>If the <code><article></code> has a <code><header></code> and/or <code><footer></code>, they'll show up on each slide</li>
<li>If a <code><section></code> has a <code><header></code> and/or <code><footer></code>, they'll only show up on that slide</li>
</ul>
</ul>
</section>
<section>
<header>
<h1>Other stuff</h1>
</header>
<ul>
<li>Theme your presentation with CSS</li>
<ul>
<li>The presentation root will be tagged with a <code>sideshow</code> class</li>
<li>Useful selectors:</li>
<ul>
<li><code>.sideshow > header</code> — the presentation header</li>
<li><code>.sideshow > footer</code> — the presentation footer</li>
<li><code>.sideshow > section</code> — the slides</li>
<li><code>.sideshow > section > header</code> — the slide headers</li>
<li><code>.sideshow > section > footer</code> — the slide footers</li>
</ul>
</ul>
<li>Extend Sideshow</li>
<ul>
<li>There are lots of points to hook in; see <a href="https://github.com/wcmaier/sideshow/blob/master/js/sideshow.js">sideshow.js</a></li>
</ul>
</ul>
</section>
</article>
<script src="js/jquery-1.5.min.js"></script>
<script src="js/jquery-hashchange-1.3.min.js"></script>
<script src="js/sideshow.js"></script>
<script>
/* <![CDATA[ */
$("article").sideshow();
/* ]]> */
</script>
</body>
</html>