add progress-bar example + change readme/package.json to v1.0.0

usablica · Oct 17, 2014 · ea54663 · ea54663
1 parent e2baddf
commit ea54663
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -396,12 +396,20 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish
 </p>
 
 ## Roadmap
-- Fix problems with `position: fixed` and other positions
 - Provide more examples
 - Add more templates
 
 ## Release History
 
+ * **v1.0.0** - 2014-10-17
+   - Auto-positioning feature for tooltip box
+   - Add progress-bar to tooltip box
+   - Fix `z-index` issue
+   - Add dark template
+   - Fix bad sizing with Bootstrap 3
+   - Add disable interaction ability
+   - Fix code styling issues and many minor bug fixes
+
  * **v0.9.0** - 2014-05-23
    - Add IntroJS templates
    - Add more tooltip positions (bottom-right, bottom-middle, bottom-left)

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "intro.js",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "A better way for new feature introduction and step-by-step users guide for your website and project.",
   "keywords": ["demo", "intro", "introduction"],
   "homepage": "http://usablica.github.com/intro.js/",

diff --git a/component.json b/component.json
@@ -2,7 +2,7 @@
   "name": "intro.js",
   "repo": "usablica/intro.js",
   "description": "Better introductions for websites and features with a step-by-step guide for your projects",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "main": "intro.js",
   "scripts": [
     "intro.js"

diff --git a/example/hello-world/withProgress.html b/example/hello-world/withProgress.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>With Progress-bar</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
+    <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
+
+    <!-- styles -->
+    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
+    <link href="../assets/css/demo.css" rel="stylesheet">
+
+    <!-- Add IntroJs styles -->
+    <link href="../../introjs.css" rel="stylesheet">
+
+    <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container-narrow">
+
+      <div class="masthead">
+        <ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
+          <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 data-step="1" data-intro="This is a tooltip!">Progress-bar</h1>
+        <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showProgress', true).start();">Show me how</a>
+      </div>
+
+      <hr>
+
+      <div class="row-fluid marketing">
+        <div class="span6" data-step="2" data-intro="Ok, wasn't that fun?" data-position='right'>
+          <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 class="span6" data-step="3" data-intro="More features, more fun."  data-position='left'>
+          <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 metus purus.</p>
+
+          <h4>Section Five</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 Six</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>
+
+      <hr>
+    </div>
+    <script type="text/javascript" src="../../intro.js"></script>
+  </body>
+</html>
diff --git a/example/index.html b/example/index.html
@@ -24,8 +24,10 @@ <h3 class="muted">Examples</h3>
         <li><a href="hello-world/index.html" title='Basic usage'>Basic usage</a></li>
         <li><a href="hello-world/withoutBullets.html" title='Basic usage with buttons'>Basic usage with buttons</a></li>
         <li><a href="hello-world/withoutButtons.html" title='Basic usage with bullets'>Basic usage with bullets</a></li>
+        <li><a href="hello-world/withProgress.html" title='Basic usage with progress-bar'>Basic usage with progress-bar</a></li>
         <li><a href="programmatic/index.html" title='Programmatic defining using JSON'>Programmatic defining using JSON</a></li>
         <li><a href="multi-page/index.html" title='Multi-Page introduction'>Multi-Page introduction</a></li>
+        <li><a href="auto-position/index.html" title='Auto-positioning'>Auto-positioning</a></li>
         <li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
         <li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
         <li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>

diff --git a/introjs.css b/introjs.css
@@ -22,7 +22,7 @@
 .introjs-fixParent {
   z-index: auto !important;
   opacity: 1.0 !important;
-  position: absolute;
+  position: absolute !important;
   -webkit-transform: none !important;
      -moz-transform: none !important;
       -ms-transform: none !important;