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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>deck.fit.js test/demo</title>
<meta name="description" content="deck.fit.js">
<meta name="author" content="Rémi Emonet">
<!--meta name="viewport" content="width=1024, user-scalable=no"/-->
<!-- Core and extension CSS files -->
<link rel="stylesheet" href="../core/deck.core.css">
<link rel="stylesheet" href="../extensions/status/deck.status.css">
<link rel="stylesheet" href="../extensions/hash/deck.hash.css">
<!-- Style theme. More available in /themes/style/ or create your own. -->
<link rel="stylesheet" href="../themes/style/neon.css">
<!-- Transition theme. More available in /themes/transition/ or create your own. -->
<!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
<script src="../modernizr.custom.js"></script>
<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
<!-- Deck Core and extensions -->
<script src="../core/deck.core.js"></script>
<script src="../extensions/hash/deck.hash.js"></script>
<script src="../extensions/status/deck.status.js"></script>
<script src="../extensions/fit/deck.fit.js"></script> <!-- WE ADD THE deck.fit.js extension -->
<style type="text/css">
/* style override */
html, body {margin:0;padding:0}
.deck-container {
}
/* for the demo */
.slide h1 {font-size: 3em;}
.slide h1 b {color: #0F0;}
.slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
.resizeable { /* for the demo */
background: #900;
margin: 0; padding: 20px;
width: 600px; height: 450px; /* just the initial size for the resizeable demo */
resize: both;
overflow: hidden; /* needed for the resize handle to be really shown in ffox */
border: 1px solid blue;
}
.deck-container {
width: 100%; height: 100%; /* to get a proper filling of the parent */
margin: 0; padding: 0; /* any margin is handled by the parent or the fit extension */
border: 1px solid red; /* for the demo */
}
.deck-container .slide {
width: 100%; height: 100%; /* to get a proper filling of the parent */
min-width:0; min-height:0; /* undoing some hurting style */
overflow: hidden; /* don't show slides outside of their box */
/* margin:0; padding:0; /* remove possible margins */
border: 2px solid white; /* for the demo */
}
.deck-container .slide {background:
url(rectangle.png) bottom left no-repeat,
url(rectangle.png) top left no-repeat,
url(rectangle.png) bottom right no-repeat,
url(rectangle.png) right no-repeat,
url(rectangle.png) left no-repeat,
url(rectangle.png) top no-repeat,
url(rectangle.png) bottom no-repeat,
url(rectangle.png) top right no-repeat
}
.deck-container.fullscreen { /* for the demo but could be reused */
position: absolute;
left:0; top:0; width:100%; height:100%;
border: 0;
}
</style>
</head>
<!-- for the demo, the body is not the container so it can be resized by the user -->
<body>
<!-- for the demo, a select changes the fitMode -->
<select class="fitModeSelect" style="float:right">
<option value="center middle" selected="true">(default) fitMode: "center middle"</option>
<option value="top left">fitMode: "top left"</option>
<option value="bottom right">fitMode: "bottom right"</option>
<option value="stretched">fitMode: "stretched"</option>
</select>
This page demonstrates the use of the "fit" extension for deck.js.<br/>
Use left/right arrow keys to browse the presentation.<br/>
<!-- for the demo, a resizeable wrapper around the container -->
<div class="resizeable">
<div class="deck-container">
<!-- Begin slides -->
<section class="slide" id="title-slide">
<h1>Getting started with deck.js:<br/><b>fit</b> extension
<br/><em>use right arrow to move on</em>
</h1>
</section>
<section class="slide">
<h2>“fit”: What It Does</h2>
<ul>
<li>
<h3>Before anything</h3> please resize the slides by dragging <em>the bottom right corner of the dark-red frame</em>
</li>
<li>
More on the next slide
</li>
</ul>
</section>
<section class="slide">
<h2>Designing for “fit”</h2>
<ul>
<li>You decide on a design dimension<br/> (default: 800x600)</li>
<li>You write all your slides<br/> as if they were exactly of this size</li>
<br/>
<li>You put your slides in a container of any size</li>
<li>You decide how they should adapt (e.g., center)</li>
<br/>
<li>And “fit” handles it!</li>
</ul>
</section>
<section class="slide">
<h2>Playing with “fit” demo</h2>
<ul>
<li>Resize the red box</li>
<li>Change the “fitMode”<br/> with the select on the top-right of this page</li>
<li>Press the 's' key to make the slides fit to the window</li>
</ul>
</section>
<section class="slide">
<h2>Browser support</h2>
<ul>
<li>Did it work for you? :)</li>
<li>Should be ok on good browsers</li>
</ul>
</section>
<section class="slide">
<h2>Notes about the demo</h2>
<ul>
<li>The 8 yellow boxes are to test background elements. You may use them into your slides, e.g., for footer, logos, …</li>
<li>The red border just helps understanding where the “deck-container” is</li>
<li>The white border just helps understanding where each “slide” is</li>
<li>The white border also illustrates the “fitMarginX” and “fitMarginY” options that can be used for adding a margin around the slides</li>
</ul>
</section>
<!-- DEMO: fit -->
<!-- deck.navigation snippet -->
<!--a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a-->
<!-- deck.status snippet -->
<!--p class="deck-status">
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p-->
<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<!-- Initialize the deck -->
<script>
$(function() {
$.deck('.slide', {
// fitMarginX:100, fitMarginY:100,
// fitMode: "stretched" //"center middle" //"bottom right" //"top left"
});
});
</script>
<script> /* This script is just for the demo with live resizing */
$(function(){
var $c = $(".deck-container");
var xy = $c.width()+"x"+$c.height();
var update = function() {
var nxy = $c.width()+"x"+$c.height();
if (nxy != xy) {
xy = nxy;
$["deck"]('enableScale');
}
window.setTimeout(update, 200);
}
window.setTimeout(update, 200);
});
</script>
<script> /* This script is just for the demo: change fitMode using a select */
$(function(){
$(".fitModeSelect").change(function() {
$(".fitModeSelect option:selected").each(function () {
$['deck']('getOptions').fitMode = $(this).attr('value');
$["deck"]('enableScale');
});
$(".fitModeSelect").blur(); // to avoid the key strokes doing both nextSlide and changing the selected value in the select
});
$(".fitModeSelect").change();
});
</script>
<script> /* This script is just for the demo: unbinds the 's' key and use it to switch to fullscreen */
$(function(){
var deck = 'deck';
var $d = $(document);
var opts = $[deck]('getOptions');
$d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) {
if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) {
$(".deck-container").toggleClass("fullscreen");
e.preventDefault();
}
})
});
</script>
</div>
</div>
</body>
</html>
|
