Resizable Comment Area
-
Comments:
- here.
I’ve already had resizable Textarea implemented in this blog – the two buttons that appear at the bottom of the comment box, next to Preview/Post Reply. However, today over on MacGeekery, I came across something even better. A resize widget, that can be dragged to resize the comment entry box. Getting this to work wasn’t quite as simple as just cutting and pasting code, however. Eventually, I rewrote the code from scratch, using some of my toolbox tools also. The script starts by finding every <textarea>, and then, if it has the class resizable, it adds an enclosing <div> tag, and a grippie <div> tag. This then allows for CSS to style the grippie tag.
1 function ResizableComment(){
2 textareas = document.getElementsByTagName('textarea');
3
4 var textarea;
5 for (var i=0; textarea = textareas[i]; i++){
6 if (textarea.className.match(“resizable”)){
7 // Insert resizable <div>
8 ta = document.createElement('div');
9 ta.className = “resizable-textarea”;
10 textarea.parentNode.insertBefore(ta, textarea);
11 ta.insertBefore(textarea,ta.firstChild);
12 // Insert Grippie
13 grippie = document.createElement('div');
14 grippie.className = 'grippie';
15 w = textarea.offsetWidth - 2;
16 grippie.style.width = px(w);
17 textarea.parentNode.insertBefore(grippie, textarea.nextSibling);
18 grippie.onmousedown = beginResize;
19 // Remove bottom border
20 textarea.style.marginBottom = 0;
21 textarea.style.borderBottom = 0;
22 }
23 }
24 }
Notice also that it sets the onmousedown action for the grippie to a function called beginResize.
1 function beginResize(e){
2 var coords = getMousePos(e);
3 window.resizing = eventTarget(e).parentNode.firstChild; // Textarea.
4 window.resizing.style.height = px(window.resizing.offsetHeight);
5 window.start_resizer = coords[1];
6 document.body.onmouseup = endResize;
7 document.body.onmousemove = duringResize;
8 return false;
9 }
10
11 function duringResize(e){
12 var coords = getMousePos(e);
13 window.end_resizer = coords[1];
14 if (window.start_resizer == window.end_resizer) return;
15 window.height_change = window.end_resizer - window.start_resizer;
16 if (window.resizing.offsetHeight + height_change - 1 < 115) return;
17 window.resizing.style.height = px(window.resizing.offsetHeight + height_change - 1); // Need the -1 to work!
18 window.start_resizer = window.end_resizer;
19 }
20
21 function endResize(e){
22 duringResize(e);
23 document.body.onmouseup = null;
24 document.body.onmousemove = null;
25 }
The beginResize function in turn sets up a few things, including which element needs to be resized, and the functions that need to be called as it happens. These functions use another pair of functions:
1 function getMousePos(e) {
2 var posx = 0; var posy = 0;
3 if (!e) e = window.event;
4 if (e.pageX || e.pageY){
5 posx = e.pageX;
6 posy = e.pageY;
7 } else if (e.clientX || e.clientY){
8 posx = e.clientX + document.body.scrollLeft;
9 posy = e.clientY + document.body.scrollTop;
10 }
11
12 return new Array(posx, posy);
13 }
14
15 function px(val){return val + “px”;}