summaryrefslogtreecommitdiff
path: root/deck.js/samples/deck-fit.html
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
committerChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
commit5a774ef6f3b38b19b26913a34b1388530c72334e (patch)
tree543127427771d75f652fc9e726cc39aa1a72571c /deck.js/samples/deck-fit.html
Initial Commit
Diffstat (limited to 'deck.js/samples/deck-fit.html')
-rw-r--r--deck.js/samples/deck-fit.html229
1 files changed, 229 insertions, 0 deletions
diff --git a/deck.js/samples/deck-fit.html b/deck.js/samples/deck-fit.html
new file mode 100644
index 0000000..b69bff4
--- /dev/null
+++ b/deck.js/samples/deck-fit.html
@@ -0,0 +1,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">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</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>