8

does any one know if there is an example available for sliding panels in jquery? If so, can someone send me a link? This is what I want to accomplish.

On my main screen I want to have three divisions. One right column that covers half the screen and then the left column divided in two rows. I want to expand and/or shrink the right column and/or left column and/or the top row in the left column and/or the bottom row in the left column. Think og it as an IDE with the left side of the coding area and right side as project explorer and the properties. The coder would like to see any three of the sections at once or would like to expand each working area.

I am looking for a jquery solution for such! Thanks

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221
  • Sooo... you want to reinvent frames in jQuery? – SpliFF Jan 29 '12 at 01:02
  • Also found [jQWidgets splitter](http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm?%28arctic%29#demos/jqxsplitter/defaultfunctionality.htm), but it costs money for commercial use. – dma_k Mar 31 '15 at 09:44

2 Answers2

10

Sounds like the way jsfiddle.net works

This is available as a plugin. http://docs.jquery.com/UI/Resizable

You could also use the jQuery splitter plugin: http://www.methvin.com/splitter/

Also see (2011): http://jcubic.wordpress.com/2011/03/06/jquery-splitter-split-container/

Flexigrid is a new (2012) option: http://flexigrid.info/

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
  • Have you got a link to a demo showing how to implement divided panels using UI Resizable? I see that it only helps to implement resizeable widgets, but not splits. – dma_k Mar 31 '15 at 09:43
10

The most robust solution for this is to use the jQuery layout plugin. You can find it here: http://layout.jquery-dev.net/

PriorityMark
  • 3,247
  • 16
  • 22