8

Example of the divider

The center divider can be dragged to resize the left and right divs. It appears that dragging the divider will change the CSS width value as a percentage, but I don't know what's causing that value to change.

I'd like to create something similar to this, where a divider can be dragged to resize the left and right divs, and any content inside those divs will be fitted. How can this be done?

Potential compatibility issue to avoid: Eventually, I'd also like to make it responsive on mobile screens using @media to hide the right div while the left is visible, and hide the left div when the right is visible.

davidtgq
  • 3,780
  • 10
  • 43
  • 80
  • I'm using chrome. When I mouseover the divider a box pops up in the corner that says `javascript:void(0)`. So it looks like this divider is controlled by Javascript. – Polyov Aug 16 '16 at 19:59
  • 1
    @Polyov Do you know what that `javascript:void(0)` does? – davidtgq Aug 16 '16 at 20:04
  • It doesn't really mean or do anything. You can see [this question](http://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean) for more info on the practice. But it's a good indicator that JS is at play. – Polyov Aug 16 '16 at 22:07
  • @Polyov How can I find the JS that's associated with it? – davidtgq Aug 16 '16 at 23:27
  • You can use a dom inspector to find the event handlers that are bound to it. – Polyov Aug 17 '16 at 11:14
  • Does this answer your question? [Best way to do a split pane in HTML](https://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html) – Chris Xue Jun 28 '22 at 01:45

1 Answers1

1

Using JQuery UI is probably the esiest way to achieve this. Here is a example of how you could start with that: A full page layout with resizable panes using jQuery UI

Also, look int the CSS resize property: http://www.w3schools.com/cssref/css3_pr_resize.asp

I don't think it's exactly what you want but you could combine it with some css to achieve a similar effect without JavaScript.

Community
  • 1
  • 1
QuinnFreedman
  • 2,242
  • 2
  • 25
  • 42
  • 1
    As of this comment writing, the `resize` property isn't widely supported. Check the current support here: https://caniuse.com/#feat=css-resize – Stephan May 18 '18 at 20:34