forked from nickrouty/jQuery-Tour
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (174 loc) · 8.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Website Tour with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Tour with jQuery" />
<meta name="keywords" content="tour, walkthrough, jquery, plugin, steps, explain, describe, take a tour"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/jquery.storage.js"></script>
<script type="text/javascript" src="javascript/jquery.tour.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Codrops & Routy Development</h1>
<h2 class="tour_7">Website Tour with jQuery Demo</h2>
<div class="content">
<p><strong>This is a demo of how to create a website tour or walkthrough with jQuery.
If you start the tour, you will see tooltips in each step, explaining a certain
part of the website.
</strong>
</p>
<div class="box left">
<h2 class="tour_1">Create a tour</h2>
<p>Several features have been added to the original code. First off, it's much more portable! It's object oriented, and easier to extend. Reminder feature is integrated using localstorage. View thecode to understand more!</p>
</div>
<div class="box right">
<h2 class="tour_2">Mark a tour point</h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<div class="box left">
<h2 class="tour_3">Let your users step through</h2>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
<div class="box right">
<h2 class="tour_4">Use the autoplay function</h2>
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
</div>
<div class="clear"></div>
<h2>Describe the functionality of your page</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
<div class="box left">
<h2 class="tour_5">Choose the direction of the tooltip</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box right">
<h2 class="tour_6">Choose a background color</h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<a href="http://tympanus.net/codrops/2010/12/21/website-tour/">back to the Codrops tutorial</a>
<a href="http://blog.routydevelopment.com">back to Routy Development</a>
</div>
<script type="text/javascript">
//f(!(jQuery.Storage.get("tour") == "true"))
//{
var config = {
mainTitle: "New Features!",
saveCookie: true,
steps: [
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "L",
"text" : "You can create a tour to explain the functioning of your app",
"time" : 5000,
'fn_next' : function(){
console.log('adelante 1');
},
'fn_prev' : function(){
console.log('atras 1');
}
},
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "LT",
"text" : "You can create a tour to explain the functioning of your app",
"time" : 5000,
'fn_next' : function(){
console.log('adelante 2');
},
'fn_prev' : function(){
console.log('atras 2');
}
},
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "LB",
"text" : "You can create a tour to explain the functioning of your app",
"time" : 5000,
'fn_next' : function(){
console.log('adelante 3');
},
'fn_prev' : function(){
console.log('atras 3');
}
},
{
"name" : "tour_2",
"bgcolor" : "black",
"color" : "white",
"text" : "Give a class to the points of your walkthrough",
"position" : "BL",
"time" : 5000,
'fn_next' : function(){
console.log('adelante 4');
},
'fn_prev' : function(){
console.log('atras 4');
}
},
{
"name" : "tour_3",
"bgcolor" : "black",
"color" : "white",
"text" : "Customize the navigation buttons",
"position" : "BL",
"time" : 5000
},
{
"name" : "tour_4",
"bgcolor" : "black",
"color" : "white",
"text" : "You can also use the autoplay function where the user can just sit back and watch the whole tour",
"position" : "TL",
"time" : 5000
},
{
"name" : "tour_5",
"bgcolor" : "black",
"color" : "white",
"text" : "You can indicate the direction of the tooltip arrow for each tour point",
"position" : "TL",
"time" : 5000
},
{
"name" : "tour_6",
"bgcolor" : "#111199",
"color" : "white",
"text" : "Mark important tour points in a different color",
"position" : "BL",
"time" : 5000
},
{
"name" : "tour_7",
"bgcolor" : "black",
"color" : "white",
"text" : "Automatically scrolls to the right place of the website",
"position" : "TL",
"time" : 5000
}]
};
$.tour.start(config);
//}
</script>
</body>
</html>