forked from wavded/humane-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (127 loc) · 5.24 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
<!doctype html>
<html>
<head>
<title>Humane JS</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700&v2' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Ubuntu, sans-serif;
padding: 80px;
background-color: #f0f0f0;
}
h1,h3 {
font-family: 'Cabin Sketch', serif;
text-shadow: -1px 0px 1px #aaa;
}
h1 {
font-size: 4em;
margin: 0
}
h3 {
font-size: 2em;
margin: 0
}
select {
font-size: 0.8em;
}
a {
text-decoration: none;
color: #a13;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
pre {
font-family: "Ubuntu Mono";
font-size: 0.9em;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 6px;
padding: 10px;
text-decoration: none;
}
blockquote {
font-size: 0.8em
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link id='theme' rel='stylesheet' href='themes/bigbox.css'/>
<script src='humane.js'></script>
</head>
<body>
<a href="http://github.com/wavded/humane-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<h1>Humane JS</h1>
<p>
<strong>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</strong>
<br/>Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.
</p>
<h3>Select A Theme:
<select onchange='document.getElementById("theme").href = "themes/" + this.options[this.selectedIndex].value + ".css"'>
<option selected>bigbox</option>
<option>libnotify</option>
<option>boldlight</option>
<option>jackedup</option>
</select>
</h3>
<a href='javascript:humane.log("Welcome Back")'>
<pre>humane("Welcome Back");
humane.log("Welcome Back");</pre>
</a>
<a href='javascript:humane.info("Record <b>392</b> has been updated")'>
<pre>humane.info("Record <b>392</b> has been updated");</pre>
</a>
<a href='javascript:humane.error("Invalid Username and/or Password")'>
<pre>humane.error("Invalid Username and/or Password");</pre>
</a>
<a href='javascript:humane.success(["List","of","Items"])'>
<pre>humane.success(["List","of","Items"]);</pre>
</a>
<h3>Options</h3>
<pre>humane.timeout = (number of milliseconds);</pre>
<blockquote>
<p>Sets the delay before a message fades out.</p>
<p>
Try It:
<input type='radio' name='timeout' onclick='humane.timeout = 2500' checked> 2500 <small>(2s - default)</small>
<input type='radio' name='timeout' onclick='humane.timeout = 5000'> 5000 <small>(5s)</small>
<input type='radio' name='timeout' onclick='humane.timeout = 500'> 500 <small>(0.5s)</small>
</p>
</blockquote>
<pre>humane.waitForMove = (true|false);</pre>
<blockquote>
<p>Wait for mouse, or keyboard action to be taken before clearing message (after timeout)</p>
<p>
Try It:
<input type='radio' name='waitformove' onclick='humane.waitForMove = true'> true
<input type='radio' name='waitformove' onclick='humane.waitForMove = false' checked> false <small>(default)</small>
</p>
</blockquote>
<pre>humane.forceNew = (true|false);</pre>
<blockquote>
<p>Force new messages to appear immediately</p>
<p>
Try It:
<input type='radio' name='forceNew' onclick='humane.forceNew = true'> true
<input type='radio' name='forceNew' onclick='humane.forceNew = false' checked> false <small>(default)</small>
</p>
</blockquote>
<h3>Browser Support</h3>
<p>Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.</p>
<ul>
<li>Internet Explorer 7+</li>
<li>Firefox 3+</li>
<li>Chrome 9+</li>
<li>Safari 3+</li>
<li>Opera 10+</li>
<li>iOS (experimental support)</li>
<li>Android (experimental support)</li>
</ul>
<h3>Create A Custom Theme</h3>
<p>Humane is easily themable using <a href="http://learnboost.github.com/stylus">Stylus</a>. There are currently a few <a href='https://github.com/wavded/humane-js/wiki/Themes'>themes</a>, but I hope this grows. Send me a pull request and update the wiki with your favorite look and feel.</p>
<h3>Download and Usage</h3>
<p>Visit <a href='http://github.com/wavded/humane-js'>github page</a> to download and get more details.</p>
</body>
</html>