From 5a774ef6f3b38b19b26913a34b1388530c72334e Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Tue, 9 Apr 2013 14:31:22 +0200 Subject: Initial Commit --- deck.js/samples/deck-fit.html | 229 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 deck.js/samples/deck-fit.html (limited to 'deck.js/samples/deck-fit.html') 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 @@ + + + + + + + + + + deck.fit.js test/demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +This page demonstrates the use of the "fit" extension for deck.js.
+Use left/right arrow keys to browse the presentation.
+ + +
+
+ + +
+

Getting started with deck.js:
fit extension +
use right arrow to move on +

+
+ +
+

“fit”: What It Does

+
    +
  • +

    Before anything

    please resize the slides by dragging the bottom right corner of the dark-red frame +
    • +
  • + More on the next slide +
    • +
+
+
+

Designing for “fit”

+
    +
  • You decide on a design dimension
    (default: 800x600)
    • +
  • You write all your slides
    as if they were exactly of this size
    • +
    +
  • You put your slides in a container of any size
    • +
  • You decide how they should adapt (e.g., center)
    • +
    +
  • And “fit” handles it!
    • +
+
+
+

Playing with “fit” demo

+
    +
  • Resize the red box
    • +
  • Change the “fitMode”
    with the select on the top-right of this page
    • +
  • Press the 's' key to make the slides fit to the window
    • +
+
+
+

Browser support

+
    +
  • Did it work for you? :)
    • +
  • Should be ok on good browsers
    • +
+
+
+

Notes about the demo

+
    +
  • The 8 yellow boxes are to test background elements. You may use them into your slides, e.g., for footer, logos, …
    • +
  • The red border just helps understanding where the “deck-container” is
    • +
  • The white border just helps understanding where each “slide” is
    • +
  • The white border also illustrates the “fitMarginX” and “fitMarginY” options that can be used for adding a margin around the slides
    • +
+
+ + + + + + + + + + +# + + + + + + + + +
+
+ + -- cgit v1.2.1