18

I need to build a page that looks like Mac Mail or an Outlook Inbox. where the one page has a top panel and a bottom panel, and there is a divider in between that you can use to re-size, to either make a panel higher or shorter.

What's the standard jQuery/CSS technique for accomplishing this? I've never done this before so I am interested in your suggestions or any surprises that you might have encountered before.

saluce
  • 13,035
  • 3
  • 50
  • 67
TheExit
  • 5,220
  • 12
  • 37
  • 49

3 Answers3

23

There are a few jQuery plugins that can do something like this. I think this jQuery Splitter plugin is what you are looking for though.

Brandon
  • 68,708
  • 30
  • 194
  • 223
  • This relies on an old version of JQuery. I tried with 1.8.2 and it throws exceptions due to curCSS being removed in 1.8.0. All examples on the splitter site are built against JQuery 1.3 – Russell Giddings Oct 28 '12 at 13:14
  • The jquery.Splitter plugin relies on $.browser, which has been deprecated since 1.3 and removed entirely in 1.9. – Aaron Blenkush Mar 11 '13 at 18:45
8

jQuery UI offers this as a plugin. Very simple and it really works well. I always use it. Here is the link with instructions:

http://docs.jquery.com/UI/Resizable

tucaz
  • 6,524
  • 6
  • 37
  • 60
5

I believe something like this will serve your needs: http://w-shadow.com/blog/2008/10/23/javascript-splitters-and-resizable-panels/

There are several plugins referenced that mimic that UI.

clifgriffin
  • 2,008
  • 3
  • 21
  • 41