-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (115 loc) · 4.84 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Highlighter</title>
<!--CSS STYLES-->
<link href="css/demoStyles.css" rel="stylesheet" type="text/css" />
<!--jQuery core-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--Form Highlighter plugin-->
<script src="js/jquery.formHighlighter.js" type="text/javascript"></script>
<!--Demo examples-->
<script type="text/javascript">
$(document).ready(function () {
/*Basic call*/
$("#basicCall").formHighlighter();
/*Calling Form Highlighter with some CSS classes*/
$("#stylingCall").formHighlighter({
classFocus: 'demoFocus',
classBlur: 'demoBlur',
classKeyDown: 'demoKeydown',
classNotEqualToDefault: 'demoNotEqualToDefault',
clearField:false
});
/*Calling your own functions through Form Highlighter*/
$("#advancedCall").formHighlighter({
classFocus: 'demoFocus',
classBlur: 'demoBlur',
classKeyDown: 'demoKeydown',
classNotEqualToDefault: 'demoNotEqualToDefault',
clearField:false,
onBlur: function () { demoBlur(); },
onFocus: function () { demoFocus($(this)); }
});
/*Your own function that will be called from Form Highlighter*/
function demoBlur() {
$("#advancedCall input.demoBlur:not(input:hidden)").stop(0, 1).fadeTo(500, 1.0);
}
function demoFocus(element) {
$("#advancedCall input.demoBlur:not(input:hidden)").stop(0, 1).fadeTo(500, 0.5);
}
});
</script>
</head>
<body>
<h1>Form without Form Highlighter effect</h1>
<div id="normalForm">
<form action="" name="normalForm">
<input class="myclass" type="text" name="NormalYourName" value="Type your name here" /><br />
<input class="myclass" type="text" name="NormalYourEmail" value="Type your e-mail here" /><br />
<input class="myclass" type="password" name="NormalYourPassword" value="Type your password here" /><br />
</form>
</div>
<h1>Basic Form Hightlighter call</h1>
<p>
$("#basicCall").formHighlighter();
</p>
<div id="basicCall">
<form action="" name="basicCall">
<input class="myclass" type="text" name="BasicYourName" value="Type your name here" /><br />
<input class="myclass" type="text" name="BasicYourEmail" value="Type your e-mail here" /><br />
<input class="myclass" type="password" name="BasicYourPassword" value="Type your password here" /><br />
</form>
</div>
<h1>Call with CSS Styling</h1>
<p>$('#demo').formHighlighter( {<br />
classFocus: 'demoFocus',
<br />
classBlur: 'demoBlur',
<br />
classKeyDown: 'demoKeydown',
<br />
classNotEqualToDefault: 'demoNotEqualToDefault'<br />
});</p>
<div id="stylingCall">
<form action="" name="stylingCall">
<input class="myclass" type="text" name="StylingYourName" value="Type your name here" /><br />
<input class="myclass" type="text" name="StylingYourEmail" value="Type your e-mail here" /><br />
<input class="myclass" type="password" name="StylingYourPassword" value="Type your password here" /><br />
</form>
</div>
<h1>Attaching your own functions</h1>
<p>$("#advancedCall").formHighlighter({
<br />
classFocus: 'demoFocus',
<br />
classBlur: 'demoBlur',
<br />
classKeyDown: 'demoKeydown',
<br />
classNotEqualToDefault: 'demoNotEqualToDefault',
<br />
onBlur: function () { demoBlur(); },
<br />
onFocus: function () { demoFocus($(this)); }
<br />
});</p>
<div id="advancedCall">
<form action="" name="advancedCall">
<input class="myclass" type="text" name="AdvancedYourName" value="Type your name here" /><br />
<input class="myclass" type="text" name="AdvancedYourEmail" value="Type your e-mail here" /><br />
<input class="myclass" type="password" name="AdvancedYourPassword" value="Type your password here" /><br />
</form>
</div>
<h1>More info</h1>
<p>For more information about Form Highlighter please visit
<a href="http://www.saucer.dk/formhighlighter" target="_blank">www.saucer.dk/formhighlighter</a>
<br />
or follow me on twitter and get the latest news about Form Highlighter
<a href="http://www.twitter.com/saucerdk" target="_blank">www.twitter.com/saucerdk</a>
<br />
<br />
<br />
</p>
</body>
</html>