What is a JSFiddle to resize 4 areas of code content?

Question

This question is about jsFiddle itself; in particular, how the dimensions of the sites change.

jsFiddle uses 4 independently resizable regions, and they have a border between them with this graph within the borders:

These resizing knobs make iframes scroll if necessary; its spot. I searched for jQueryUI Resizable , thinking what it was. No ...

I really only know jQueryUI. Is this another library they use to film this? Can you identify and / or associate me with what they use to resize?

Answer 1

JSFiddle uses CodeMirror along with a layout plugin called LayoutCM.js . You can break up the code to figure out how to handle it, but essentially the drag event updates the width and height of the panels (in percent). A jQuery solution might be to use the jQuery Splitter Plugin .