-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
86 lines (58 loc) · 2.28 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Limit Counter, Simply Element Limiter, jQuery Plugin</title>
<link rel="stylesheet" href="style/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<script src="scripts/limitCounter.1.0.js"></script>
<script>
$(document).ready(function(){
$('input').limitCounter({
limit: 140,
counterClass: 'input'
});
$('textarea').limitCounter({
limit: 140
});
});
</script>
</head>
<body>
<h1>Limit Counter 1.0</h1>
<div class="container">
<p class="intro">A lightweight plugin that allows you to very easily limit inputs & textareas.</p>
<div class="subContainer">
<h2>Usage</h2>
<p>Using Limit Counter is so dam easy! Just include the file then make a call to it as per the example no
need to modify any exiting html just CSS so make the limit counter appear where you want... Just follow
the examples below or download the Github example.</p>
<h2>JavaScript</h2>
<pre>
$(document).ready(function(){
$('input').limitCounter({
limit: 140,
counterClass: 'input',
suffix: 'characters left'
});
$('textarea').limitCounter({
limit: 140
});
});
</pre>
<p>There are a few custom variables you can set, those are show above in the example of the input...</p>
<h2>HTML</h2>
<pre>
<input type="text" name="test2" id="test2" placeholder="Type something in this text input!" />
<textarea name="test" id="test" placeholder="Type something in this textarea"><textarea>
</pre>
<h2>Preview</h2>
<input type="text" name="test2" id="test2" placeholder="Type something in this text input!" />
<textarea name="test" id="test" placeholder="Type something in this textarea"></textarea>
</div><!-- End sub container -->
</div><!-- End container -->
</body>
</html>