Allow user to resize a div or else

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

1 Like

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

1 Like

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

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

1 Like

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

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

Tomas

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

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:

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

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.

Oh those are just hover and pressed states:

Screenshot_2018-11-16_191115

Hey,

I am trying something similar. The initial example link doesn’t seem to work but it’s pretty similar to this http://spectorbooks.com/. I’ve given it a test but not seem to be working at the moment.

@raulipadding you said you had put your javascript in the wrong place? How did you change it? I wonder if that is the same with mine.

At the moment I have put the custom coder here

and my html looks like this Screenshot 2020-05-31 at 13.01.32

My CSS looks like this Screenshot 2020-05-31 at 13.02.36

Here is a link to the page. https://preview.webflow.com/preview/test-split?utm_medium=preview_link&utm_source=designer&utm_content=test-split&preview=a12f66b6ff467d6a591647f698de6897&mode=preview

Any help would be really appreciated. thanks

Remember to put the custom code in <script> </script> tags.

1 Like