1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml"
4 lang=
"en" xml:
lang=
"en">
6 <title>Slides with Org-Mode and JavaScript
</title>
7 <meta http-equiv=
"Content-Type" content=
"text/html;charset=iso-8859-1"/>
8 <meta name=
"generator" content=
"Org-mode"/>
9 <meta name=
"generated" content=
"2008-09-06 15:58:41 CEST"/>
10 <meta name=
"author" content=
"Sebastian Rose"/>
11 <style type=
"text/css">
12 html
{ font-family: Times
, serif
; font-size: 12pt; }
13 .title { text-align: center
; }
15 .done { color: green
; }
16 .tag { background-color:lightblue
; font-weight:normal
}
18 .timestamp { color: grey
}
19 .timestamp-kwd { color: CadetBlue
}
20 p
.verse
{ margin-left: 3% }
22 border: 1pt solid
#AEBDCC;
23 background-color: #F3F5F7;
25 font-family: courier
, monospace
;
29 table
{ border-collapse: collapse
; }
30 td
, th
{ vertical-align: top
; }
31 dt
{ font-weight: bold
; }
33 .org-info-js_info-navigation { border-style:none
; }
34 #org-info-js_console-label { font-size:10px; font-weight:bold
;
36 .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
39 </style><link rel=
"stylesheet" type=
"text/css" href=
"slides.css" />
40 <script type=
"text/javascript" language=
"JavaScript" src=
"../org-info.js"></script>
41 <script type=
"text/javascript" language=
"JavaScript">
43 org_html_manager
.set("TOC_DEPTH", "3");
44 org_html_manager
.set("LINK_HOME", "http://orgmode.org");
45 org_html_manager
.set("LINK_UP", "http://orgmode.org/worg/");
46 org_html_manager
.set("LOCAL_TOC", "0");
47 org_html_manager
.set("VIEW_BUTTONS", "0");
48 org_html_manager
.set("MOUSE_HINT", "underline");
49 org_html_manager
.set("FIXED_TOC", "0");
50 org_html_manager
.set("TOC", "0");
51 org_html_manager
.set("VIEW", "slide");
52 org_html_manager
.setup(); // activate after the parameterd are set
56 <h1 id=
"title">Slides with Org-Mode and JavaScript
</h1>
58 <div id=
"table-of-contents">
59 <h2>Table of Contents
</h2>
60 <div id=
"text-table-of-contents">
62 <li><a href=
"#sec-1">Welcome to Org-mode and Slides
</a></li>
63 <li><a href=
"#sec-2">Overview
</a></li>
64 <li><a href=
"#sec-3">Create the Org-mode file
</a></li>
65 <li><a href=
"#sec-4">Export the Org-mode file to XHTML
</a></li>
66 <li><a href=
"#sec-5">Create a stylesheet for slides
</a>
68 <li><a href=
"#sec-5.1">CSS - body
</a></li>
69 <li><a href=
"#sec-5.2">CSS - headlines
</a></li>
70 <li><a href=
"#sec-5.3">CSS - org-info-js
</a></li>
73 <li><a href=
"#sec-6">TODOS
</a></li>
74 <li><a href=
"#sec-7"></a></li>
79 <div id=
"outline-container-1" class=
"outline-2">
80 <h2 id=
"sec-1">Welcome to Org-mode and Slides
</h2>
86 Navigate back and and forth on doubleclick and click.
89 Use all the navigation and text facilities of org-info.js in your
93 Remove warnings on click.
96 No warnings when navigating with the mouse.
99 Simple lists are shown item by item automatically.
108 <div id=
"outline-container-2" class=
"outline-2">
109 <h2 id=
"sec-2">Overview
</h2>
115 Create the Org-mode file
118 Export the Org-mode file to XHTML
121 Create a stylesheet for slides
130 <div id=
"outline-container-3" class=
"outline-2">
131 <h2 id=
"sec-3">Create the Org-mode file
</h2>
136 <b>Structure for slides
</b>
139 <pre class=
"example">
142 + Create the Org-mode file
146 + Create the Org-mode file
147 + Export the Org-mode file to XHTML
154 <div id=
"outline-container-4" class=
"outline-2">
155 <h2 id=
"sec-4">Export the Org-mode file to XHTML
</h2>
160 <code>view:slide
</code>
163 <pre class=
"example">
164 #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
167 * COMMENT html style specifications
169 # org-export-html-style:
"<link rel=\"stylesheet\
" \
170 # type=\"text/css\
" href=\"slides.css\
" />"
179 <div id=
"outline-container-5" class=
"outline-2">
180 <h2 id=
"sec-5">Create a stylesheet for slides
</h2>
186 Stylesheets for slides are different.
189 The body uses the whole width.
192 Use the same style for all headlines.
195 The postamble will be hidden automatically.
198 Position org-info.js's window.
206 <div id=
"outline-container-5.1" class=
"outline-3">
207 <h3 id=
"sec-5.1">CSS - body
</h3>
215 <pre class=
"example">
219 padding:
0px
0px
0px
0px;
220 margin:
0px
0px
0px
0px;
221 background-image:url(img/bg.gif);
222 background-attachment:fixed;
223 background-repeat:repeat-x;
232 <div id=
"outline-container-5.2" class=
"outline-3">
233 <h3 id=
"sec-5.2">CSS - headlines
</h3>
238 Set all headlines to the same size:
241 <pre class=
"example">
255 <div id=
"outline-container-5.3" class=
"outline-3">
256 <h3 id=
"sec-5.3">CSS - org-info-js
</h3>
261 Position the org-info.js window.
264 <pre class=
"example">
279 <div id=
"outline-container-6" class=
"outline-2">
280 <h2 id=
"sec-6">TODOS
</h2>
285 <li id=
"sec-6.1"><span class=
"todo">TODO
</span> More features.
<br/>
287 <li id=
"sec-6.2"><span class=
"todo">TODO
</span> Load stylsheets dynamically.
<br/>
289 <li id=
"sec-6.3"><span class=
"todo">TODO
</span> Drop lot's of mails with bugs and wishes.
<br/>
296 <li id=
"sec-6.4"><span class=
"todo">TODO
</span> Have Fun with Org-mode and all the tools around.
<br/>
304 <div id=
"outline-container-7" class=
"outline-2">
305 <h2 id=
"sec-7"><span class=
"done">DONE
</span></h2>
315 <div id=
"postamble"><p class=
"author"> Author: Sebastian Rose
316 <a href=
"mailto:sebastian_rose@gmx.de"><sebastian_rose@gmx.de
></a>
318 <p class=
"date"> Date:
2008-
09-
06 15:
58:
41 CEST
</p>
319 <p>HTML generated by org-mode
6.06b in emacs
23</p>