Allow user to resize a div or else

Design help Animations & Interactions
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: W3Schools Tryit Editor

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

Best Regards,
Tomas

1 Like
2

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

1 Like
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

1 Like
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…

image
image498Ă—708 43.3 KB

and HTML here…

image
image1216Ă—752 111 KB

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: Webflow - ZV 2016

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

12

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

Screenshot 2020-05-31 at 13.03.36
Screenshot 2020-05-31 at 13.03.36925Ă—333 33.2 KB

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

13

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

1 Like