Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Measure centre point of draggable

Recommended Posts

i created a draggable bar which divides two windows. i grab a percent value for the the bar and in turn the ratio for the two windows. so when the bar is dragged to 70% of the container width, the left/top window is 70% and the bottom/right window is 30%. problem is that the bar position is measured from the left, and when the draggable reaches the far edgeod the bounds, its position is less than 100 due to the width.


i can fix this with some pixel hacking. but it gets very inelegant and hsrd to debug as the page is going to have multiple nested instances of this sliding window model.


i want to create the draggable s$ that it works like a cross-fader, thick handle, precise positioning, overlapping the bounds by half its width. Importantly, the bounds are not a fixed size.


I will provide an example in the morning.

Link to comment
Share on other sites

Thanks, that worked. Although the extra element is inconvenient.


I said I'd post my example in the morning, but I spent the week refactoring.


Here's what I got using the "X/Ypercent: -50" technique:


See the Pen YNWewV by MichaelMC (@MichaelMC) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 1/9/2017 at 11:58 PM, OSUblake said:

Use xPercent/yPercent to center a nested trigger...



Here's how I've created resizable containers in the past. It uses flexbox, so the basis is the width or height.





Hi @OSUblake

This is awesome. I'm trying to repurpose some logic in your codepen to make mine work. I'm creating a responsive layout grid. And I'm trying to create a resizable sidebar "d". The user should be able to drag the red handle to increase the width. Currently everything is working except that I can't figure how I can constraint my sidebar to a maximum width of 400 and min width of 64?


(I think I've figured out!)

Using .style.width isn't very reliable. I need to use this.x for my if condition

See the Pen YOdeLG by vennsoh (@vennsoh) on CodePen


Link to comment
Share on other sites

2 minutes ago, OSUblake said:

Clamp the actual width.


See the Pen BOMNrZ by osublake (@osublake) on CodePen



Oh wow, your code is so elegant! After testing further it seems that my code is buggy. I need to dig further and see how you did that.


Link to comment
Share on other sites

@OSUblake I spent abit more time on my responsive grid and I got to a pretty good state. However I notice some weird thing with my draggable sidebar. If you drag your browser window size from ~1024 to ~1220 and if you drag the sidebar out, you will see that the sidebar is actually growing till a max size of 400 which is what our clamp function is doing. However it's growing the size in the opposite way (right hand side instead of left) hence creating horizontal scrollbar. I tried to fix it but in vain. Any thoughts?

See the Pen yxwYBx by vennsoh (@vennsoh) on CodePen


Link to comment
Share on other sites

I honestly don't much about CSS grids, but it looks like the problem is the columns in the middle cannot shrink anymore, so it's putting the sidebar into overflow. Is there way to force the middle columns to shrink more?

  • Like 1
Link to comment
Share on other sites

@OSUblake Ah I figured it out.  My grid-column-template is having 12 columns defined but in reality it's only showing 4 columns.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.