-
Notifications
You must be signed in to change notification settings - Fork 84
/
Copy pathindex.html
136 lines (113 loc) · 6.27 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Jquerypagewalkthrough.github.com : Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs." />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>jQuery Page Walkthrough</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/erwinyusrizal/jquerypagewalkthrough.github.com">View on GitHub</a>
<h1 id="project_title">Jquery Page Walkthrough</h1>
<h2 id="project_tagline">Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs.</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/jquerypagewalkthrough/jquerypagewalkthrough.github.com/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/jquerypagewalkthrough/jquerypagewalkthrough.github.com/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<p>Page Walkthrough is a flexible system for designing interactive, multimedia, educational walkthroughs.</p>
<h2>Example:</h2>
<p>To view jQuery Page Walkthrough example <a href="example/example.html">Click Here</a></p>
<h2>Install:</h2>
<pre>
<!-- CSS >-->
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" />
<!-- JQUERY -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pagewalkthrough-1.1.0.js"></script>
</pre>
<h2>jQuery Page Walkthrough Default Options:</h2>
<pre>
steps: [
{
wrapper: '', //an ID of page element HTML that you want to highlight
margin: 0, //margin for highlighted area, may use CSS syntax i,e: '10px 20px 5px 30px' or '20px 20px' and so on
popup:
{
content: '', //ID content of the walkthrough
type: 'modal', //tooltip, modal, nohighlight
position:'top',//position for tooltip and nohighlight type only: top, right, bottom, left
offsetHorizontal: 0, //horizontal offset for the walkthrough
offsetVertical: 0, //vertical offset for the walkthrough
width: '320', //default width for each step,
draggable: false, // set true to set walkthrough draggable,
contentRotation: 0 //content rotation : i.e: 0, 90, 180, 270 or whatever value you add. minus sign (-) will be CCW direction
},
overlay: true, //use overlay or not, default: true
accessable: false, //if true - you can access html element such as form input field, button etc
autoScroll: true, //is true - this will autoscroll to the arror/content every step
scrollSpeed: 1000, //scroll speed
stayFocus: false, //if true - when user scroll down/up to the page, it will scroll back the position it belongs
onLeave: null, // callback when leaving the step
onEnter: null // callback when entering the step
}
],
name: '',
onLoad: true, //load the walkthrough at first time page loaded
onBeforeShow: null, //callback before page walkthrough loaded
onAfterShow: null, // callback after page walkthrough loaded
onRestart: null, //callback for onRestart walkthrough
onClose: null, //callback page walkthrough closed
onCookieLoad: null //when walkthrough closed, it will set cookie and tells the walkthrough to not load automaticly
</pre>
<h2>Public Methods:</h2>
<pre>
<strong>show</strong> : $.pagewalkthrough('show', target)
This method allows you to open page walkthrough. Target is your walkthrough ID, i.e: #selector
<strong>next</strong> : $.pagewalkthrough('next', event)
This method allows you to go the NEXT step. Event is needed as a param to call next method
<strong>prev</strong> : $.pagewalkthrough('prev', event)
This method allows you to go the PREVIOUS step. Event is needed as a param to call prev method
<strong>restart</strong> : $.pagewalkthrough('restart', event)
This method allows you to go the RESTART step. Event is needed as a param to call restart method
<strong>close</strong> : $.pagewalkthrough('close', target)
This method allows you to go the CLOSE step. Target is optional. It could be filled with walkthrough ID or leave it blank
<strong>isPageWalkthroughActive</strong> : $.pagewalkthrough('isPageWalkthroughActive')
This property will return status of page walkthrough
<strong>currIndex</strong> : $.pagewalkthrough('currIndex')
This property will return current index of current walkthrough step
</pre>
<h2>Browser Support:</h2>
<p>IE7+, Firefox (Win & Mac), Safari (Win & Mac), Chrome (Win & Mac)</p>
<p><strong>Note:</strong> Because chrome doesn't support running cookie in local file, if you want to test this plugin on chrome, you should run this plugin from webserver i.e: wamp, mamp, etc</p>
<h2>Theme:</h2>
<p>Will be added soon...</p>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Jquerypagewalkthrough.github.com maintained by <a href="https://github.com/erwinyusrizal">erwinyusrizal</a></p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-38968241-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>