customizing wordpress wp_editor handles

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
    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'));
        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;
height: 20px;
width: 20px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);

Author: bpeh

Bernard Peh is a great passioner of web technologies and one of the co-founder of Website Design and Reviews. He works with experienced web designers and developers everyday, developing and designing commercial websites. He specialises mainly in SEO and PHP programming.