Skip to content
Newer
Older
100644 68 lines (49 sloc) 2.42 KB
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
1 pageguide.js
2 ============
659d464 @brianfleming initial commit
brianfleming authored May 10, 2012
3
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
4 An interactive guide for web page elements using jQuery and CSS3.
5
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
6 ## How-to:
3ef1900 @brianfleming READEME.md typos ftw
brianfleming authored May 15, 2012
7 1. Add references in your code to pageguide.js, jQuery & pageguide.css
b0b83a5 @seliopou [README] Update README with new setup instructions
seliopou authored May 20, 2012
8 2. Add a document ready callback to setup the page guide
9 3. Add a simple `<ul>` to the bottom of the pages you want the pageguide to appear on.
10 4. Customize the page guide tour title.
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
11
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
12 ## An example:
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
13
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
14 ### Step 1 - Add pageguide.js
15
16 Add `<script src="pageguide.js"></script>` to the bottom of your html document, right before your closing `</body>` tag.
0fd9e0d @brianfleming formatting updates to README.md
brianfleming authored May 15, 2012
17
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
18 We provide both the standard js as well as a minified version.
19
3ef1900 @brianfleming READEME.md typos ftw
brianfleming authored May 15, 2012
20 ### Step 2 - Add pageguide.css
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
21
22 Add `<link rel="stylesheet" href="stylesheets/pageguide.css">` to the header of your html document.
0fd9e0d @brianfleming formatting updates to README.md
brianfleming authored May 15, 2012
23
3ef1900 @brianfleming READEME.md typos ftw
brianfleming authored May 15, 2012
24 We provide a css file as well as a minified version. Alternatively, we use <a href="http://lesscss.org/" target="_blank">LESS CSS</a> at Tracelytics, so we provide that as well.
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
25
b0b83a5 @seliopou [README] Update README with new setup instructions
seliopou authored May 20, 2012
26 ### Step 3 - Add setup code
27
28 Add the following block of JavaScript to your html document:
29
30 ```$(document).ready(function() {
31 tl.pg.init({ /* optional preferences go here */ });
32 });```
33
34 ### Step 4 - Choose the elements that you want included in the page guide.
3ef1900 @brianfleming READEME.md typos ftw
brianfleming authored May 15, 2012
35 pageguide.js matches the first occurrence of the selector you specify in the `<ul>` you put on your pages in the next step.
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
36
b0b83a5 @seliopou [README] Update README with new setup instructions
seliopou authored May 20, 2012
37 ### Step 5 - Add the pageguide.js `<ul>` near the bottom of your pages.
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
38
39 <ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
40 <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
41 <div>
42 Here is the first tour item description. The number will appear to the left of the element.
43 </div>
44 </li>
45 <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
46 <div>
47 Here is the second tour item description. The number will appear to the right of the element.
48 </div>
49 </li>
50 <li class="tlypageguide_top" data-tourtarget=".third_element_to_target">
51 <div>
52 Here is the third tour item description. The number will appear above of the element.
53 </div>
54 </li>
55 <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
56 <div>
57 Here is the fourth tour item description. The number will appear below of the element.
58 </div>
59 </li>
60 </ul>
61
62
63 ## See it IRL:
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
64 * http://tracelytics.github.com/pageguide
65
7dde779 @brianfleming adding example to README.md
brianfleming authored May 15, 2012
66 ## Contribute
660ffc9 @dkuebric [readme] stub out a bit more info
dkuebric authored May 14, 2012
67 Bugfix? Cool new feature? Alternate style? Send us a pull request!
Something went wrong with that request. Please try again.