diff options
Diffstat (limited to 'deck.js/samples/deck-fit.html')
| -rw-r--r-- | deck.js/samples/deck-fit.html | 229 |
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">←</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> |