forked from andyshora/nudgenudge
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (126 loc) · 4.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nudgenudge jQuery plugin to nudge your users towards goals with annoying arrows</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="prettify/prettify.css" rel="stylesheet" />
<link href="css/nudgenudge.css" rel="stylesheet" />
<style type="text/css">
.container {
margin-bottom: 20px;
}
#test {
padding:20px 20px;
text-align: center;
}
body, p {
font-family: "Lucida Grande", "Helvetica Neue", Arial;
font-size: 12px;
}
pre.prettyprint {
padding:10px;
}
.avatar_wrap {
overflow: hidden;
width:100px;
height:100px;
border-radius: 3px;
margin:10px;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17716290-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>nugenudge</h1>
<p>jQuery plugin to nudge your users towards goals with annoying arrows, by <a href="http://twitter.com/andyshora">@andyshora</a></p>
</div>
<div class="row">
<div class="span8">
<div class="span6">
<h2>Notes</h2>
<ul>
<li>Arrows point via CSS3 animations.</li>
<li>Nudge length is 30-50px horizontally, regardless of arrow size. Sorry, I haven't had time to create dynamic keyframe animations yet, but feel free to edit the CSS!</li>
</ul>
<h2>Supported Browsers</h2>
<ul>
<li>Supported browsers: Chrome, Firefox, Safari, probably IE10 if they've got their act together.</li>
</ul>
</div>
<div class="span6">
</div>
</div>
<div class="span4">
<h2>Demo & Download</h2>
<p>Do your users need nudging in this direction? Then apply the nudgenudge jQuery plugin!</p>
<div id="test">
<a href="https://github.com/andyshora/nudgenudge"><button id="signup" class="btn btn-large btn-success">Download from GitHub</button></a>
</div>
</div>
</div>
<div class="span11">
<h2>Usage</h2>
<p><strong>Files required:</strong> js/jquery.nudgenudge.x.x.js, css/nudgenudge.css, img/your_arrow_image.png</p>
<p>Initialize the plugin when the document ready event has fired:</p>
<pre class="prettyprint">
$('#signup').nudgenudge({
arrow: 'img/arrow_default.png', // path to the arrow image
arrowWidth: 150,
arrowHeight: 60,
intensity: 'medium', // the intensity of the nudge (low, medium, high)
placement: 'left', // place on the left or the right of the target
closeEvent: { "el": '#signup', "event": 'click' }, // selector and event which triggers arrow hiding
hideAfter: 0, // hide after this many nudges, 0 = for the rest of eternity
offsetX: -5, // adjust x position
offsetY: 0 // adjust y position
});</pre>
</div>
<div class="span12">
<h2>License for Use</h2>
<p>Copyright (C) 2012 Andy Shora</p>
<p>This plugin is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>. You can pretty much do whatever you want with it, just keep me in the credits, and if it really helps you then feel free to give me a tweet and let me know!</p>
</div>
<div class="span12">
<h2>About the Author</h2>
<div class="span2">
<div class="avatar_wrap"><img src="http://www.gravatar.com/avatar/a9432f6dce5676b4f3d959e6c554f7c7.png?s=100" /></div>
</div>
<div class="span8">
<p> </p>
<p>Andy Shora is a Web & iOS Developer based in East London.<br />You can find Andy on <a href="http://twitter.com/andyshora">twitter</a>, the <a href="http://andyshora.com">intertubes</a>, <a href="http://github.com/andyshora">github</a>, <a href="http://forrst.me/andyshora">forrst</a>, or email andyshora{at}gmail.com.</p>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="prettify/prettify.js"></script>
<script src="js/jquery.nudgenudge.1.0.js"></script>
<script>
$(document).ready(function(){
$('#signup').nudgenudge({
arrow: 'img/arrow_default.png', // path to the arrow image
arrowWidth: 150,
arrowHeight: 60,
intensity: 'medium', // the intensity of the nudge (low, medium, high)
placement: 'left', // place on the left or the right of the target
closeEvent: { "el": '#signup', "event": 'click' }, // selector and event which triggers arrow hiding
hideAfter: 0, // hide after this many nudges
offsetX: -5, // adjust x position
offsetY: 0 // adjust y position
});
prettyPrint();
});
</script>
</html>