Skip to content

Commit b343824

Browse files
committed
Update README.md
1 parent a85fbc3 commit b343824

File tree

1 file changed

+4
-294
lines changed

1 file changed

+4
-294
lines changed

README.md

Lines changed: 4 additions & 294 deletions
Original file line numberDiff line numberDiff line change
@@ -1,297 +1,7 @@
1-
# Intro.js
1+
this is a fork from [introJs](https://github.com/usablica/intro.js)
22

3-
> Better introductions for websites and features with a step-by-step guide for your projects.
3+
It fix some unwanted behavior whith scrollbar. When a element is in a container with a scrollbar, or in severals ones, it move the scrollbar to make the element visible in the viewport when this one is enlighted.
44

5+
It also add a beforeChange event.
56

6-
## How to use
7-
Intro.js can be added to your site in three simple steps:
8-
9-
**1)** Include `intro.js` and `introjs.css` (or the minified version for production) in your page.
10-
11-
> Note: if you need Internet Explorer compatiblity, you have to add introjs-ie.css to the page also:
12-
13-
```html
14-
<!--[if lte IE 8]>
15-
<link href="../introjs-ie.css" rel="stylesheet">
16-
<!-- <![endif]-->
17-
````
18-
19-
**2)** Add `data-intro` and `data-step` to your HTML elements.
20-
21-
For example:
22-
23-
```html
24-
<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
25-
````
26-
27-
Optionally you can define `data-position` attribute to define the position of tooltip with values `top`, `right`, `left` and `bottom`. Default value is `bottom`.
28-
29-
**3)** Call this JavaScript function:
30-
```javascript
31-
introJs().start();
32-
````
33-
34-
Optionally, pass one parameter to `introJs` function to limit the presentation section.
35-
36-
**For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`.
37-
38-
<p align="center"><img src="http://usablica.github.com/intro.js/img/introjs-demo.png"></p>
39-
40-
## API
41-
42-
###introJs([targetElm])
43-
44-
Creating an introJs object.
45-
46-
**Available since**: v0.1.0
47-
48-
**Parameters:**
49-
- targetElm : String (optional)
50-
Should be defined to start introduction for specific element, for example: `#intro-farm`.
51-
52-
**Returns:**
53-
- introJs object.
54-
55-
**Example:**
56-
```javascript
57-
introJs() //without selector, start introduction for whole page
58-
introJs("#intro-farm") //start introduction for element id='intro-farm'
59-
````
60-
61-
-----
62-
63-
###introJs.start()
64-
65-
Start the introduction for defined element(s).
66-
67-
**Available since**: v0.1.0
68-
69-
**Returns:**
70-
- introJs object.
71-
72-
**Example:**
73-
```javascript
74-
introJs().start()
75-
````
76-
-----
77-
78-
###introJs.goToStep(step)
79-
80-
Go to specific step of introduction.
81-
82-
**Available since**: v0.3.0
83-
84-
**Parameters:**
85-
- step : Number
86-
87-
**Returns:**
88-
- introJs object.
89-
90-
**Example:**
91-
```javascript
92-
introJs().goToStep(2).start(); //starts introduction from step 2
93-
````
94-
95-
-----
96-
97-
###introJs.exit()
98-
99-
Exit the introduction.
100-
101-
**Available since**: v0.3.0
102-
103-
**Returns:**
104-
- introJs object.
105-
106-
**Example:**
107-
```javascript
108-
introJs().exit()
109-
````
110-
111-
-----
112-
113-
###introJs.setOption(option, value)
114-
115-
Set a single option to introJs object.
116-
117-
**Available since**: v0.3.0
118-
119-
**Parameters:**
120-
- option : String
121-
Option key name.
122-
123-
- value : String/Number
124-
Value of the option.
125-
126-
**Returns:**
127-
- introJs object.
128-
129-
**Example:**
130-
```javascript
131-
introJs().setOption("skipLabel", "Exit");
132-
````
133-
134-
----
135-
136-
###introJs.setOptions(options)
137-
138-
Set a group of options to the introJs object.
139-
140-
**Available since**: v0.3.0
141-
142-
**Parameters:**
143-
- options : Object
144-
Object that contains option keys with values.
145-
146-
**Returns:**
147-
- introJs object.
148-
149-
**Example:**
150-
```javascript
151-
introJs().setOptions({ skipLabel: "Exit", tooltipPosition: "right" });
152-
````
153-
154-
----
155-
156-
###introJs.oncomplete(providedCallback)
157-
158-
Set callback for when introduction completed.
159-
160-
**Available since**: v0.2.0
161-
162-
**Parameters:**
163-
- providedCallback : Function
164-
165-
**Returns:**
166-
- introJs object.
167-
168-
**Example:**
169-
```javascript
170-
introJs().oncomplete(function() {
171-
alert("end of introduction");
172-
});
173-
````
174-
175-
-----
176-
177-
###introJs.onexit(providedCallback)
178-
179-
Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user.
180-
181-
**Available since:** v0.2.0
182-
183-
**Parameters:**
184-
- providedCallback : Function
185-
186-
**Returns:**
187-
- introJs object.
188-
189-
**Example:**
190-
```javascript
191-
introJs().onexit(function() {
192-
alert("exit of introduction");
193-
});
194-
````
195-
196-
-----
197-
198-
###introJs.onchange(providedCallback)
199-
200-
Set callback to change of each step of introduction. Given callback function will be called after completing each step.
201-
The callback function receives the element of the new step as an argument.
202-
203-
**Available since:** v0.3.0
204-
205-
**Parameters:**
206-
- providedCallback : Function
207-
208-
**Returns:**
209-
- introJs object.
210-
211-
**Example:**
212-
```javascript
213-
introJs().onchange(function(targetElement) {
214-
alert("new step");
215-
});
216-
````
217-
218-
## Using with:
219-
220-
### Rails
221-
If you are using the rails asset pipeline you can use the [introjs-rails](https://github.com/heelhook/intro.js-rails) gem.
222-
223-
### Yii framework
224-
You can simply use this project for Yii framework: https://github.com/moein7tl/Yii-IntroJS
225-
226-
227-
## Build
228-
229-
First you should install `nodejs` and `npm`, then first run this command: `npm install` to install all dependencies.
230-
231-
Now you can run this command to minify all static resources:
232-
233-
make build
234-
235-
236-
## Roadmap
237-
- Multi-page introduction
238-
- More browser compatibility
239-
240-
241-
## Release History
242-
* **v0.3.0** - 2013-03-28
243-
- Adding support for CommonJS, RequireJS AMD and Browser Globals.
244-
- Add `goToStep` function to go to specific step of introduction.
245-
- Add `onchange` callback.
246-
- Add `exit` function to exit from introduction.
247-
- Adding options with `setOption` and `setOptions` functions.
248-
- More IE compatibility.
249-
- Fix `min-width` bug with tooltip box.
250-
- Code cleanup + Better coding style.
251-
252-
* **v0.2.1** - 2013-03-20
253-
- Fix keydown event unbinding bug.
254-
255-
* **v0.2.0** - 2013-03-20
256-
- Ability to define tooltip position with `data-position` attribute
257-
- Add `onexit` and `oncomplete` callback
258-
- Better scrolling functionality
259-
- Redesign navigating buttons + add previous button
260-
- Fix overlay layer bug in wide monitors
261-
- Fix show element for elements with position `absolute` or `relative`
262-
- Add `enter` key for navigating in steps
263-
- Code refactoring
264-
265-
266-
* **v0.1.0** - 2013-03-16
267-
- First commit.
268-
269-
## Author
270-
**Afshin Mehrabani**
271-
272-
- [Twitter](https://twitter.com/afshinmeh)
273-
- [Github](https://github.com/afshinm)
274-
- [Personal page](http://afshinm.name/)
275-
276-
[Other contributors](https://github.com/usablica/intro.js/graphs/contributors)
277-
278-
279-
## Support/Discussion
280-
- [Google Group](https://groups.google.com/d/forum/introjs)
281-
- [Stackoverflow](http://stackoverflow.com/questions/tagged/intro.js)
282-
283-
## License
284-
> Copyright (C) 2012 Afshin Mehrabani ([email protected])
285-
286-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
287-
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
288-
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
289-
and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
290-
The above copyright notice and this permission notice shall be included in all copies or substantial portions
291-
of the Software.
292-
293-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
294-
TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
295-
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
296-
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
297-
IN THE SOFTWARE.
7+
see an exemple at [http://platane.github.com/intro.js/index.html](http://platane.github.com/intro.js/index.html)

0 commit comments

Comments
 (0)