demo.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checking Reveal.js</title>
  <meta name="description" content="">
  <meta name="author" content="Ramnath Vaidyanathan">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/amelia/bootstrap.min.css">
<link rel="stylesheet" href="./frameworks/revealjs/css/reveal.min.css">
  <link rel="stylesheet" href="./frameworks/revealjs/css/theme/solarized.css" id="theme">
  <link rel="stylesheet" href="./highlighters/highlight.js/css/zenburn.css" id="theme">
  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->  <link rel="stylesheet" href = "assets/css/slidify-reveal.css">

</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">
              <!-- <img src='assets/img/slidify_logo.png' width='100px' /> -->
              Slidify
            </a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="">
                      <a href="index.html" >
                        <i class="icon-home"> </i>
                        Home
                        
                      </a>
                    </li>
                    <li class="">
                      <a href="start.html" >
                        <i class="icon-signin"> </i>
                        Start
                        
                      </a>
                    </li>
                    <li class="">
                      <a href="about.html" >
                        <i class="icon-pencil"> </i>
                        Author
                        
                      </a>
                    </li>
                    <li class="dropdown">
                      <a href="style.html" class="dropdown-toggle"
                        data-toggle="dropdown">
                        <i class="icon-hand-right"> </i>
                        Style
                        <b class="caret"></b>
                      </a>
                      <ul class="dropdown-menu">
                      	  <li>
                      	    <a href="samples/intro.html">
                      	     <i class="icon-hand-right"> </i>
                      	     io2012
                      	    </a>
                      	  </li>
                      	  <li>
                      	    <a href="samples/deck.js.html">
                      	     <i class="icon-hand-right"> </i>
                      	     deck.js
                      	    </a>
                      	  </li>
                      	  <li>
                      	    <a href="samples/shower.html">
                      	     <i class="icon-hand-right"> </i>
                      	     shower
                      	    </a>
                      	  </li>
                      	  <li>
                      	    <a href="samples/landslide.html">
                      	     <i class="icon-hand-right"> </i>
                      	     landslide
                      	    </a>
                      	  </li>
                      </ul>
                    </li>
                    <li class="">
                      <a href="customize.html" >
                        <i class="icon-gift"> </i>
                        Customize
                        
                      </a>
                    </li>
                    <li class="">
                      <a href="extend.html" >
                        <i class="icon-cogs"> </i>
                        Extend
                        
                      </a>
                    </li>
                    <li class="">
                      <a href="publish.html" >
                        <i class="icon-github"> </i>
                        Publish
                        
                      </a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
  <div class="reveal">
    <div class="slides">
      <section class='' data-state='' id='slide-1'>
  <h1>Reveal.js</h1>
  <h3>HTML PRESENTATIONS MADE EASY</h3>

<p><small> Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a> </small></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <aside class='notes'>
    <p>Some notes on the first slide</p>

  </aside>
</section>
<section class='' data-state='' id='slide-2'>
  <h2>Heads Up</h2>
  <p>reveal.js is a framework for easily creating beautiful presentations using HTML. You&#39;ll need a browser with support for CSS 3D transforms to see it in its full glory.</p>

<p><section></p>

</section>
<section class='' data-state='' id='slide-3'>
  <h2>Slide 1</h2>
  
</section>
<section class='' data-state='' id='slide-4'>
  <h2>Slide 2</h2>
  <p></section></p>

</section>
<section>
   <section class='' data-state=''>
    <h2>Vertical Slides</h2>
    <p>Slides can be nested inside of other slides, try pressing <a href="#" class="navigate-down">down</a></p>

<p><a href="#" class="image navigate-down">
  <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Basement Level 1</h2>

<p>Press down or up to navigate.</p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Basement Level 2</h2>

<p>Cornify</p>

<p><a class="test" href="http://cornify.com">
 <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Basement Level 3</h2>

<p>That&#39;s it, time to go back up.</p>

<p><a href="#/2" class="image">
  <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
</section>
<section>
   <section class='' data-state=''>
    <h2>Vertical Slides</h2>
    <p>Slides can be nested inside of other slides, try pressing <a href="#" class="navigate-down">down</a></p>

<p><a href="#" class="image navigate-down">
  <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Basement Level 1</h2>

<p>Press down or up to navigate.</p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Basement Level 2</h2>

<p>Cornify</p>

    <aside class='notes'>
      
    </aside>
   </section>
</section>
<section class='' data-state='' id='slide-7'>
  <h2>Point of View</h2>
  <p>Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.</p>

</section>
<section class='' data-state='' id='slide-8'>
  <h2>RVL.IO</h2>
  <p>If you don&#39;t like writing slides in HTML you can use the online editor <a href="http://rvl.io">rvl.io</a>.</p>

</section>
<section class='' data-state='' id='slide-9'>
  <h2>Works in Mobile Safari</h2>
  <p>Try it out! You can swipe through the slides and pinch your way to the overview.</p>

</section>
<section class='' data-state='' id='slide-10'>
  <h2>Marvolous Unordered List</h2>
  <ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>

</section>
<section class='' data-state='' id='slide-11'>
  <h2>Fantastic Ordered List</h2>
  <ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>

</section>
<section class='' data-state='' id='transitions'>
  <h2>TRANSITION STYLES</h2>
  <p>You can select from different transitions, like: </p>

<p><a href="?transition=cube#/transitions">Cube</a> - <a href="?transition=page#/transitions">Page</a> - <a href="?transition=concave#/transitions">Concave</a> - <a href="?transition=zoom#/transitions">Zoom</a> - <a href="?transition=linear#/transitions">Linear</a> - <a href="?transition=fade#/transitions">Fade</a> - <a href="?transition=none#/transitions">None</a> - <a href="?transition=default#/transitions">Default</a></p>

</section>
<section class='' data-state='' id='themes'>
  <h2>Themes</h2>
  <p>Reveal.js comes with a few themes built in: </p>

<p><a href="?theme=sky#/themes">Sky</a> - <a href="?theme=beige#/themes">Beige</a> - <a href="?theme=simple#/themes">Simple</a> - <a href="?theme=serif#/themes">Serif</a> - <a href="?theme=night#/themes">Night</a> - <a href="?theme=default#/themes">Default</a> - <a href="?theme=solarized#/themes">Solarized</a> - <a href="?theme=moon#/themes">Moon</a></p>

<p><small>* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.</small></p>

</section>
<section>
   <section class='' data-state='alert'>
    <h2>Global State</h2>
    <p>Set <code>data-state=&quot;something&quot;</code> on a slide and &quot;something&quot; will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the background.</p>

<p><a href="#" class="image navigate-down">
  <img width="178" height="238" 
    src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='blackout'>
    <h2>Blackout</h2>

<p><a href="#" class="image navigate-down">
  <img width="178" height="238" 
    src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='soothe'>
    <h2>Soothe</h2>

<p><a href="#" class="image navigate-next">
  <img width="178" height="238" alt="Up arrow" style="-webkit-transform: rotate(-90deg);"
    src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" >
</a></p>

    <aside class='notes'>
      
    </aside>
   </section>
</section>
<section>
   <section class='' data-state='red'>
    <h2>Custom Soothe Styles</h2>
    
    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='orange'>
    <h2>Orange</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='yellow'>
    <h2>Yellow</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='green'>
    <h2>Green</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='blue'>
    <h2>Blue</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='indigo'>
    <h2>Indigo</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='violet'>
    <h2>Violet</h2>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state='brown'>
    <h2>Brown</h2>

    <aside class='notes'>
      
    </aside>
   </section>
</section>
<section class='' data-state='' id='slide-16'>
  <h2>Custom Events</h2>
  <p>Additionally custom events can be triggered on a per slide basis by binding to the data-state name.</p>

<pre><code>Reveal.addEventListener( &#39;customevent&#39;, function() {
  console.log( &#39;&quot;customevent&quot; has fired&#39; );
} );
</code></pre>

</section>
<section class='' data-state='' id='slide-17'>
  <h2>Clever Quotes</h2>
  <p>These guys come in two forms, inline:  <q>The nice thing about standards is that there are so many to choose from and block:</q></p>

<blockquote>
<p>For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.</p>
</blockquote>

</section>
<section class='' data-state='' id='slide-18'>
  <h2>Pretty Code</h2>
  <pre><code>function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
      var node = nodes[i];

      if( !node.className ) ) {
        node.className += &#39; roll&#39;;
      }
    };
  }
}
</code></pre>

<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a></p>

</section>
<section class='' data-state='' id='slide-19'>
  <h2>Intergalactic Interconnections</h2>
  <p>You can link between slides internally, <a href="#/2/3">like this</a>.</p>

</section>
<section class='' data-state='' id='slide-20'>
  <h2>Fragmented Views</h2>
  <p>Hit the next arrow...</p>

<p class='fragment'>... to step through ...</p>

<ul class = "build incremental">
<li>any type</li>
<li>of view</li>
<li><strong>fragments</strong></li>
</ul>

</section>
<section class='' data-state='' id='slide-21'>
  <h2>Take a Moment</h2>
  <p>Press b or period on your keyboard to enter the &#39;paused&#39; mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.</p>

</section>
<section class='' data-state='' id='slide-22'>
  <h2>Incremental Paragraphs</h2>
  <p class='fragment'>This is paragraph 1 and should appear on first click.</p>

<p class='fragment'>This is paragraph 2 and should appear on second click.</p>

<p class='small'><a href="#/0">Back to the Beginning</a></p>

</section>
<section class='' data-state='' id='slide-23'>
  <h2>Title</h2>
  <p>This is a slide</p>

<ul>
<li>point 1</li>
<li>point 2</li>
<li>point 3</li>
</ul>

</section>
<section class='' data-state='' id='slide-24'>
  <h2>Incremental Reveal</h2>
  <p>These points should be animated</p>

<ul class = "build incremental">
<li>Point 1</li>
<li class = 'highlight-red'>Point 2</li>
<li class = 'grow'>Point 3</li>
</ul>

<script>
$('ul.incremental li').addClass('fragment')
</script>

</section>
<section class='' data-state='' id='slide-25'>
  <h2>Code with slide</h2>
  <pre><code class="r">library(ggplot2)
qplot(wt, mpg, data = mtcars)
</code></pre>

<p><img src="assets/fig/unnamed-chunk-3.png" alt="plot of chunk unnamed-chunk-3"> </p>

</section>
<section>
   <section class='' data-state='soothe'>
    <h2>Vertical Slides</h2>
    <p>The next set of slides will be vertical slides.</p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Slide 1</h2>

<p>This is slide 1</p>

    <aside class='notes'>
      
    </aside>
   </section>
   <section class='' data-state=''>
    <h2>Slide 2</h2>

<iframe src='http://www.statdistributions.com' width = '960px' height = '600px'></iframe>

    <aside class='notes'>
      
    </aside>
   </section>
</section>
    </div>
  </div>
</body>
  <script src="./frameworks/revealjs/lib/js/head.min.js"></script>
  <script src="./frameworks/revealjs/js/reveal.min.js"></script>
  <script>
  // Full list of configuration options available here:
  // https://github.com/hakimel/reveal.js#configuration
  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,
    theme: Reveal.getQueryHash().theme || 'solarized', 
    transition: Reveal.getQueryHash().transition || 'none', 
    dependencies: [
    // Cross-browser shim that fully implements classList -
    // https://github.com/eligrey/classList.js/
      { src: './frameworks/revealjs/lib/js/classList.js', condition: function() { return !document.body.classList;}},
      // Zoom in and out with Alt+click
      { src: './frameworks/revealjs/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
      // Speaker notes
      { src: './frameworks/revealjs/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
      // Remote control your reveal.js presentation using a touch device
      //{ src: './frameworks/revealjs/plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
      ]
  });
  </script>  <!-- LOAD HIGHLIGHTER JS FILES -->
<script src="./highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES -->
 

  <!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    }
  });
</script>


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

</html>