Use the HR tag to resize the text box.

Question

I am trying to create a resizable textarea with a horizontal rule as a handle (similar to the Stackoverflow editor).

I'm trying to:

<div class="container">
    <textarea class='editor'></textarea>
</div>

and

(function ($) {
    $(function () {
        $(".editor")
            .wrap("<div class='resizable'></div>'")
            .parent()
            .append("<hr class='resizer ui-resizable-s'/>");    

        $(".resizable").resizable({
            handles: {
                s: $(".resizer").get()
            }
        });
    });
})(jQuery);

But that does not work. Nothing really happens.

How to fix it?

FYI, there is a JSfiddle that reproduces the problem.

Answer 1

Well, actually my code works if I manually insert jQuery and jQueryUI.

Probably a bug with jsFiddle.

Updated jsFiddle: updated

To be more precise, my first attempt was to add jQuery and jQuery UI using jsfiddle:

. :

Uncaught TypeError: "safari" undefined $. widget._mouseDown @jquery-ui.js: 648 ( ) @jquery-ui.js: 582jQuery.event.dispatch @jquery-compat- git.js: 4894jQuery.event.add.elemData.handle @jquery-compat- git.js: 4551 67jquery-ui.js: 656

Uncaught TypeError: "msie" undefined

:

• http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
• http://code.jquery.com/jquery-2.1.3.min.js
• http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

.