# TextArea
Open me!
Demo View | Source Code (opens new window) | Download all widgets
Assets:
Images:
JavaScripts:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript" src="js/cutext.js"></script>
<script type="text/javascript" src="js/text-area.js"></script>
<title>Text area</title>
</head>
<body>
<h1>Text area</h1>
<div class="content">
<textarea class="cuText" rows="" cols=""></textarea>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.cuTextWrap{
width: 298px;
height: 133px;
color: #000;
resize: none;
padding: 5px;
position: relative;
}
.cuTextWrap .scroll-pane {
width: 100%;
height: 100%;
overflow: auto;
background: url(../core/images/textarea_bg.png) repeat-y;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cuTextWrap textarea{
width: 283px;
display: block;
overflow:hidden;
border:none;
background:none;
}
.cuTextWrap textarea:focus {
outline: 0;
}
.cuTextWrap .jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}
.cuTextWrap .jScrollPaneTrack {
background: none;
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
}
.cuTextWrap .jScrollPaneDrag {
position: absolute;
background: url(../core/images/scroll_shape.png) no-repeat center;
cursor: pointer;
overflow: hidden;
}
.cuTextWrap .jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 0;
}
.cuTextWrap .jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
height: 0;
}
* html .cuTextWrap .jScrollPaneDragBottom {
bottom: -1px;
}
.cuTextWrap a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
height: 11px;
background: url(../core/images/gray_arrow_up.png) no-repeat;
}
.cuTextWrap a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
height: 11px;
background: url(../core/images/gray_arrow_down.png) no-repeat;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-se {
cursor: se-resize;
width: 10px;
height: 10px;
right: 1px;
bottom: 1px;
}
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
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
$(function() {
$('.cuText').cuText({
scrollbarWidth : 20,
showArrows: true
});
});
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group