IntroJS Tests

by ramnathv

HTML

<link rel="stylesheet" href="//usablica.github.io/intro.js/introjs.css">
<script src="//usablica.github.io/intro.js/intro.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<link rel="stylesheet" href="//rawgit.com/ramnathv/f939a8a8e7dc24a5f774/raw/3d581a813e894ec344630ceafef59a41dade61a2/bootstrap.min.css">
<div class="container">

      <div class="masthead">
        <ul id="step5" class="nav nav-pills pull-right">
          <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
          <li><a href="https://github.com/usablica/intro.js">Github</a></li>
          <li><a href="https://twitter.com/usablica">@usablica</a></li>
        </ul>
        <h3 class="muted">Intro.js</h3>
      </div>

      <hr>

      <div class="jumbotron">
        <h1 id="step1">Programmatic</h1>
        <p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
        <a id='startintro' class="btn btn-large btn-success" href="#">Show me how</a>
      </div>

      <hr>

      <div class="row-fluid marketing">
        <div id="step2" class="span6">
          <h4>Section One</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Two</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Three</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
        </div>

        <div id="step3" class="span6">
          <h4>Section Four</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec...

CSS

/* FIX LABELS */
.introjs-helperNumberLayer{
  padding: 0px;
  width: 25px;
  height: 25px;
}

CoffeeScript

options = {
    steps: [
      { 
        intro: "Hello world!"
      },
      {
        element: '#step1',
        intro: "This is a tooltip."
      },
      {
        element: document.querySelectorAll('#step2')[0],
        intro: "Ok, wasn't that fun?",
        position: 'right'
      },
      {
        element: '#step3',
        intro: 'More features, more fun.',
        position: 'left'
      },
      {
        element: '#step4',
        intro: "Another step.",
        position: 'bottom'
      },
      {
        element: '#step5',
        intro: 'Get it, use it.'
      }
    ]
}
startIntro = (x) ->
  intro = introJs()
  intro.setOptions(x)
  intro.start()


d3.select('#startintro').on "click", ->
  startIntro(options)