Streaming live at 10am (PST)

Allow user to resize a div or else


#1

Hi, how can we have a page divided into 2 areas so that users can drag the border in between the two areas. This HTML5 example works ok on Chrome: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize

When we tried on Webflow on Chrome, the result was a box with drag able corner only.

Best Regards,
Tomas


#2

Something like this perhaps? You’ll need flexbox and some custom code.


#3

Exactly like that!

Is it for sale? The custom code you have.

We should also have an option for user to change the division vertical or horizontal.

Tomas


#4

That’s all the custom code needed.

  // Resizable panel (Desktop/Tablet)
  $.getScript('https://cdn.jsdelivr.net/gh/RickStrahl/jquery-resizable/src/jquery-resizable.js', function() {
    $('.panel-left').resizable({
      handleSelector: ".splitter",
      resizeWidth: true,
      resizeHeight: false,
      resizeWidthFrom: 'right',
      resizeHeightFrom: 'bottom',
      onDragEnd: function() { $(window).trigger('resize'); },
      touchActionNone: true,
    });
  });

You’ll need panel-left and splitter elements


#5

Structure of the elements

Screenshot_2018-11-13_201125

searchpane is flex

Screenshot_2018-11-13_201128

panel-left has a min-width

Screenshot_2018-11-13_201105


#6

Nice :smiley: Will need to give it a test soon… Thanks. I’ll report back when tested.

Tomas


#7

got CSS like this…

and HTML here…

I can see some differences to your code which could explain why not yet working. Must get back soon again.

Tomas

PS: not asking to test-edit it but if you want, the page is the one in the folder of the pages tree: https://preview.webflow.com/preview/zv-2016?utm_source=zv-2016&preview=c4faa3f5bb32f18114f729c3c3060375


#8

Actually, it works now!

Javascript was at wrong place and something else which I cannot figure out what - but it works now! Great :slight_smile:


#9

Do you have a published URL for us to look at the final product?


#10

Here, it’s a rough test but you can see the functionality: https://app.zoanvisuals.fi/cos/cos-enter-page It does not though remember the dragged position but resets to default when re-clicked. I was still not able to feed in the “style” parameter on that splitter div.


#11

Oh those are just hover and pressed states:

Screenshot_2018-11-16_191115