anno.js - Interactive step-by-step guides for web apps

Anno.js lets you add powerful step-by-step guides to your web-apps. It is built to be absurdly extensible, but still works great out of the box (and looks damn fine doing it).

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: iamdanfox.github.io

1. INCLUDE JS AND CSS FILES

<!-- get jQuery from somewhere; personally, I like the Google CDN: -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://iamdanfox.github.io/anno.js/anno.js" type="text/javascript"></script>
<script src="http://iamdanfox.github.io/anno.js/scrollintoview/jquery.scrollintoview.min.js" type="text/javascript"></script>
<link href="http://iamdanfox.github.io/anno.js/anno.css" rel="stylesheet" type="text/css" />

2. HTML

<pre class=" hljs js"><span class="hljs-keyword">var</span> anno1 = <span class="hljs-keyword">new</span> Anno({
  target : <span class="hljs-string">'pre:first'</span>,
  content: <span class="hljs-string">'This is an annotation'</span>
})
</pre>

3. JAVASCRIPT

var anno1 = new Anno({
  target : 'pre:first',
  content: 'This is an annotation'
})

4. EXAMPLES

Size & Positioning

var anno2 = new Anno([{
  target  : 'pre:eq(1)', // second block of code
  position: 'top',
  content : 'You can specify where you want each anno to appear.'
}, {
  target  : 'pre:eq(1)',
  position: 'left',
  content : "Use 'top', 'left', 'bottom' and 'right', just like CSS.",
}, {
  target  : 'pre:eq(1)',
  position: 'center-bottom',
  content : "You can also use 'center-bottom', 'center-right' etc"
}, {
  target  : 'pre:eq(1)',
  position: 'right',
  className: 'anno-width-200', // 150,175,200,250 (default 300)
  content : 'Add CSS classes to customize each annotation.'
}, {
  target  : 'pre:eq(1)',
  position: {
    top: '44em',
    left: '14em'
  },
  arrowPosition: 'center-left',
  content : 'You can even specify precise <code>top</code> and <code>left</code> values.'
}])

Buttons

var anno4 = new Anno({
  target: 'h2#buttons ~ p:eq(1) button:first',
  position:'top',
  content: "Anno.js provides defaults, but you can easily make your own:",
  autoFocusLastButton:false,
  buttons: [
    {
      text: 'Open HN',
      click: function(anno, evt){
        window.open('http://news.ycombinator.com/')
      }
    },{
      text: 'Sweet',
      className: 'anno-btn-low-importance',
      click: function(anno, evt){
        anno.hide()
      }
    }
  ]
})

onShow, onHide

var anno6 = new Anno({
  target: 'pre:eq(5)',
  content: "You can set up handlers for the just duration of the Anno. (Try clicking the code above)",
  onShow: function (anno, $target, $annoElem) {
    var handler = function(){ alert('Hello!'); }
    $target[0].addEventListener('click', handler)
    return handler
  },
  onHide: function(anno, $target, $annoElem, returnFromOnShow) {
    var handler = returnFromOnShow
    $target[0].removeEventListener('click', handler)
  }
})

Bootstrap Modals

var anno7 = new Anno({
  target: '#myModal .modal-content',
  content: "Because Anno is very flexible, you can make it work with all sorts of other libraries, e.g. Bootstrap",
  position: { top:'auto', left:'145px' },
  showOverlay: function(){}, // the modal already has one, so disable the anno.js one
  buttons: {
    text:'Done',
    click: function(){  $('#myModal').modal('hide')  }
  }
})

// link the anno object to the modal
$('#myModal').on('shown.bs.modal', function(){
  anno7.show()
}).on('hide.bs.modal', function(){
  anno7.hide()
})

Scrolling inside divs

var anno8 = new Anno([{
  target: '#box1',
  position: 'center-right',
  content: "Guide your users through nested scrolling panels..."
},{
  target: '#box2',
  position:'center-left',
  content: "...without confusing them.",
  buttons: [AnnoButton.BackButton, AnnoButton.DoneButton]
}])

Unclickable target

var anno9 = new Anno({
  target: '#region9',
  content: "<code>#button1</code> is disabled, but <code>#button2</code> still works.",
  className: 'anno-width-400',
  onShow: function (anno, $target, $annoElem) {
    var handler = function(e){
      if(e.target.id === 'button1') e.stopPropagation() // filters out #button1
    }
    $target[0].addEventListener('click', handler, true) // `true` is essential
    return handler
  },
  onHide: function(anno, $target, $annoElem, handler) {
    $target[0].removeEventListener('click', handler, true)
  }
})

http://iamdanfox.github.io/anno.js/