Webguide NPM | npm.io

Webguide

Webguide has just one dependency and it's jQuery. It's used to animate showing and hiding of elements as well as pop-up windows.

You can acquire local copy to your project from: 1. The github repository from this link 2. Using npm npm install webguide

After the download of the source, you need to link the library file to your page. The library has three main parts

Firstly, you need to select chosen HTML element you want to include by adding custom-data-attribute so the library knows exactly which elements it should consider. It may look like this:
```
```
 <button id="example" data-guide="true">Example button</button>
```
Secondly, you should select the order of elements, so the program knows which element is first, which is second etc. This is made by custom-data as well. Let's use our button again and set the element second in the sequence to be shown. It's gonna look like this:
```
```
 <button id="example" data-guide="true" data-guide-step="2">Example button</button>
```
The last part is to initialize guide in TypeScript file with an input array of chosen messages, it may look like this:
```
 let messages=[ “this is my first message“ , “second one“ , ... , “this will be end of the guide“ ];
 webGuide(messages);
```
Optional
You can add position of pop-up windows as well if you want to, or the layout of your page requires that. The position of pop-up window is set to be under the HTML element by default, but you can easily change that simply by adding position attribute to your element. The “position“ can be “L“ , “R“ and “U“ (left,right and up, down is set by default). It my look like this:
```
 <button id="example" data-guide="true" data-guide-step="2" data-guide-position="R">Example button</button>
```
Now you should be completely ready to go and use this library.
Contributors
- Matúš Kanda