you might have noticed that wordpress comes with a tinymce editor. the textarea editor allows you to enlarge or reduce the space downwards with a small handle on the bottom left. What if you want to enlarge it or reduce it upwards?
Let us create a new handle on the topright outside of the wordpress tinymce editor. Let’s say we have a div with id (my_resize) outside of the wp_editor.
jQuery(window).load(function () { // make my notes area draggable jQuery('#comment_resize').toggle(); var isMouseDown = false; var old_y = 0; var new_y = 0; var maxheight = jQuery(window).height() * 0.8; var minheight = jQuery(window).height() * 0.1; var currentheight = 0; jQuery('#my_resize').mousedown(function(e) { currentheight = parseInt(jQuery("#comment_ifr").css('height')); e.preventDefault(); isMouseDown = true; old_y = e.pageY; }); jQuery(document).mousemove(function(e) { if (isMouseDown) { new_y = e.pageY; diff = old_y - new_y; ht = currentheight+diff; // set a max and min for the height ht = (ht > maxheight) ? maxheight : ht; ht = (ht < minheight) ? minheight : ht; jQuery("#comment_ifr").css('height', ht); } }); jQuery(document).mouseup(function(e) { isMouseDown = false; }); });
suggested css:
#my_resize { background: url("/wp-includes/js/tinymce/themes/advanced/img/icons.gif") repeat scroll -800px 0 transparent; cursor: n-resize; display: block; float: right; margin-right:-15px; margin-top:-15px; height: 20px; width: 20px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }