Skip to content

Commit 97aedf1

Browse files
mendhakmendhak
committed
Basic example with assets
1 parent e6590b6 commit 97aedf1

File tree

8 files changed

+377
-0
lines changed

8 files changed

+377
-0
lines changed

‎example/assets/css/bootstrap-responsive.min.css‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/assets/css/bootstrap.min.css‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/assets/css/demo.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
padding-top: 20px;
3+
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
4+
padding-bottom: 40px;
5+
}
6+
7+
/* Custom container */
8+
.container-narrow {
9+
margin: 0 auto;
10+
max-width: 700px;
11+
}
12+
.container-narrow > hr {
13+
margin: 30px 0;
14+
}
15+
16+
/* Main marketing message and sign up button */
17+
.jumbotron {
18+
margin: 60px 0;
19+
text-align: center;
20+
}
21+
.jumbotron h1 {
22+
font-size: 72px;
23+
line-height: 1;
24+
}
25+
.jumbotron .btn {
26+
font-size: 21px;
27+
padding: 14px 24px;
28+
}
29+
30+
/* Supporting marketing content */
31+
.marketing {
32+
margin: 60px 0;
33+
}
34+
.marketing p + h4 {
35+
margin-top: 28px;
36+
}

‎example/assets/img/glyphicons-halflings-white.png‎

8.57 KB
Loading

‎example/assets/img/glyphicons-halflings.png‎

12.5 KB
Loading

‎example/index.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Defining with JSON configuration</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- styles -->
11+
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
12+
<link href="assets/css/demo.css" rel="stylesheet">
13+
14+
<!-- Add IntroJs styles -->
15+
<link href="../lib/introjs.css" rel="stylesheet">
16+
17+
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
18+
</head>
19+
20+
<body>
21+
22+
<div class="container-narrow">
23+
24+
<div class="masthead">
25+
<ul id="step5" class="nav nav-pills pull-right">
26+
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
27+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
28+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
29+
</ul>
30+
<h3 class="muted">Intro.js</h3>
31+
</div>
32+
33+
<hr>
34+
35+
<div class="jumbotron">
36+
<h1 id="step1">Programmatic</h1>
37+
<p id="step4" class="lead">In this example we are going to define steps with JSON configuration.</p>
38+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
39+
</div>
40+
41+
<hr>
42+
43+
<div class="row-fluid marketing">
44+
<div id="step2" class="span6">
45+
<h4>Section One</h4>
46+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
47+
48+
<h4>Section Two</h4>
49+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
50+
51+
<h4>Section Three</h4>
52+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
53+
</div>
54+
55+
<div id="step3" class="span6">
56+
<h4>Section Four</h4>
57+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
58+
59+
60+
<h4>Section Five</h4>
61+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
62+
63+
<h4>Section Six</h4>
64+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
65+
</div>
66+
</div>
67+
68+
<hr>
69+
70+
</div>
71+
<script type="text/javascript" src="../lib/intro.min.js"></script>
72+
<script type="text/javascript">
73+
function startIntro(){
74+
var intro = introJs();
75+
intro.setOptions({
76+
steps: [
77+
{
78+
element: document.querySelector('#step1'),
79+
intro: "This is a tooltip."
80+
},
81+
{
82+
element: document.querySelectorAll('#step2')[0],
83+
intro: "Ok, wasn't that fun?",
84+
position: 'right'
85+
},
86+
{
87+
element: '#step3',
88+
intro: 'More features, more fun.',
89+
position: 'left'
90+
},
91+
{
92+
element: '#step4',
93+
intro: "Another step.",
94+
position: 'bottom'
95+
},
96+
{
97+
element: '#step5',
98+
intro: 'Get it, use it.'
99+
}
100+
]
101+
});
102+
103+
intro.start();
104+
}
105+
</script>
106+
</body>
107+
</html>

‎js/intro.min.js‎ renamed to ‎lib/intro.min.js‎

File renamed without changes.

‎lib/introjs.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
.introjs-overlay {
2+
position: absolute;
3+
z-index: 999999;
4+
background-color: #000;
5+
opacity: 0;
6+
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
7+
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
8+
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
9+
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
10+
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
11+
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
12+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
13+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
14+
filter: alpha(opacity=50);
15+
-webkit-transition: all 0.3s ease-out;
16+
-moz-transition: all 0.3s ease-out;
17+
-ms-transition: all 0.3s ease-out;
18+
-o-transition: all 0.3s ease-out;
19+
transition: all 0.3s ease-out;
20+
}
21+
22+
.introjs-fixParent {
23+
z-index: auto !important;
24+
}
25+
26+
.introjs-showElement {
27+
z-index: 9999999 !important;
28+
}
29+
30+
.introjs-relativePosition {
31+
position: relative;
32+
}
33+
34+
.introjs-helperLayer {
35+
position: absolute;
36+
z-index: 9999998;
37+
background-color: #FFF;
38+
background-color: rgba(255,255,255,.9);
39+
border: 1px solid #777;
40+
border: 1px solid rgba(0,0,0,.5);
41+
border-radius: 4px;
42+
box-shadow: 0 2px 15px rgba(0,0,0,.4);
43+
-webkit-transition: all 0.3s ease-out;
44+
-moz-transition: all 0.3s ease-out;
45+
-ms-transition: all 0.3s ease-out;
46+
-o-transition: all 0.3s ease-out;
47+
transition: all 0.3s ease-out;
48+
}
49+
50+
.introjs-helperNumberLayer {
51+
position: absolute;
52+
top: -16px;
53+
left: -16px;
54+
z-index: 9999999999 !important;
55+
padding: 2px;
56+
font-family: Arial, verdana, tahoma;
57+
font-size: 13px;
58+
font-weight: bold;
59+
color: white;
60+
text-align: center;
61+
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
62+
background: #ff3019; /* Old browsers */
63+
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
64+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
65+
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
66+
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
67+
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
68+
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
69+
width: 20px;
70+
height:20px;
71+
line-height: 20px;
72+
border: 3px solid white;
73+
border-radius: 50%;
74+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
75+
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
76+
box-shadow: 0 2px 5px rgba(0,0,0,.4);
77+
}
78+
79+
.introjs-arrow {
80+
border: 5px solid white;
81+
content:'';
82+
position: absolute;
83+
}
84+
.introjs-arrow.top {
85+
top: -10px;
86+
border-top-color:transparent;
87+
border-right-color:transparent;
88+
border-bottom-color:white;
89+
border-left-color:transparent;
90+
}
91+
.introjs-arrow.right {
92+
right: -10px;
93+
top: 10px;
94+
border-top-color:transparent;
95+
border-right-color:transparent;
96+
border-bottom-color:transparent;
97+
border-left-color:white;
98+
}
99+
.introjs-arrow.bottom {
100+
bottom: -10px;
101+
border-top-color:white;
102+
border-right-color:transparent;
103+
border-bottom-color:transparent;
104+
border-left-color:transparent;
105+
}
106+
.introjs-arrow.left {
107+
left: -10px;
108+
top: 10px;
109+
border-top-color:transparent;
110+
border-right-color:white;
111+
border-bottom-color:transparent;
112+
border-left-color:transparent;
113+
}
114+
115+
.introjs-tooltip {
116+
position: absolute;
117+
padding: 10px;
118+
background-color: white;
119+
min-width: 200px;
120+
max-width: 300px;
121+
border-radius: 3px;
122+
box-shadow: 0 1px 10px rgba(0,0,0,.4);
123+
-webkit-transition: opacity 0.1s ease-out;
124+
-moz-transition: opacity 0.1s ease-out;
125+
-ms-transition: opacity 0.1s ease-out;
126+
-o-transition: opacity 0.1s ease-out;
127+
transition: opacity 0.1s ease-out;
128+
}
129+
130+
.introjs-tooltipbuttons {
131+
text-align: right;
132+
}
133+
134+
/*
135+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
136+
Changed by Afshin Mehrabani
137+
*/
138+
.introjs-button {
139+
position: relative;
140+
overflow: visible;
141+
display: inline-block;
142+
padding: 0.3em 0.8em;
143+
border: 1px solid #d4d4d4;
144+
margin: 0;
145+
text-decoration: none;
146+
text-shadow: 1px 1px 0 #fff;
147+
font: 11px/normal sans-serif;
148+
color: #333;
149+
white-space: nowrap;
150+
cursor: pointer;
151+
outline: none;
152+
background-color: #ececec;
153+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
154+
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
155+
background-image: -o-linear-gradient(#f4f4f4, #ececec);
156+
background-image: linear-gradient(#f4f4f4, #ececec);
157+
-webkit-background-clip: padding;
158+
-moz-background-clip: padding;
159+
-o-background-clip: padding-box;
160+
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
161+
-webkit-border-radius: 0.2em;
162+
-moz-border-radius: 0.2em;
163+
border-radius: 0.2em;
164+
/* IE hacks */
165+
zoom: 1;
166+
*display: inline;
167+
margin-top: 10px;
168+
}
169+
170+
.introjs-button:hover {
171+
border-color: #bcbcbc;
172+
text-decoration: none;
173+
box-shadow: 0px 1px 1px #e3e3e3;
174+
}
175+
176+
.introjs-button:focus,
177+
.introjs-button:active {
178+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
179+
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
180+
background-image: -o-linear-gradient(#ececec, #f4f4f4);
181+
background-image: linear-gradient(#ececec, #f4f4f4);
182+
}
183+
184+
/* overrides extra padding on button elements in Firefox */
185+
.introjs-button::-moz-focus-inner {
186+
padding: 0;
187+
border: 0;
188+
}
189+
190+
.introjs-skipbutton {
191+
margin-right: 5px;
192+
color: #7a7a7a;
193+
}
194+
195+
.introjs-prevbutton {
196+
-webkit-border-radius: 0.2em 0 0 0.2em;
197+
-moz-border-radius: 0.2em 0 0 0.2em;
198+
border-radius: 0.2em 0 0 0.2em;
199+
border-right: none;
200+
}
201+
202+
.introjs-nextbutton {
203+
-webkit-border-radius: 0 0.2em 0.2em 0;
204+
-moz-border-radius: 0 0.2em 0.2em 0;
205+
border-radius: 0 0.2em 0.2em 0;
206+
}
207+
208+
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
209+
color: #9a9a9a;
210+
border-color: #d4d4d4;
211+
box-shadow: none;
212+
cursor: default;
213+
background-color: #f4f4f4;
214+
background-image: none;
215+
text-decoration: none;
216+
}

0 commit comments

Comments
 (0)