Trying to Create a Draggable Window with Scroll Bar

Animation
1

Hi all,

I’m trying to create an interactive animation that mimics the UI elements of a desktop OS. I’d like to be able to click an icon to open a window, drag that window around, scroll through icons inside the window, and then click those icons to open new windows, etc.

The problem I’m facing is that by grouping, or creating a symbol from, the window elements I can get them to move together when dragged, but then if I drag on the scroll pill, to scroll the window’s contents, the whole group/symbol comes along for the ride (project file linked below).

There are two strategies I’ve conceived of to deal with this:

  1. Somehow parent the scroll pill to the window so that it moves with the rest of the window elements but remains outside of the group/symbol so it can be manipulated independently.

  2. Create a JS function so an On Mouse Down event on the scroll pill will lock the window in place and a second function triggered by On Mouse Up will unlock it.

Is there a built-in solution that I’m overlooking in Hype? Is there a better strategy to solve this problem? I suspect some sort of JS function is going to be involved. But, I’m a beginner with Javascript so there may be a straightforward way of tackling this and I’m just not savvy enough to know what I should be researching.

I appreciate any feedback on this. Thanks!

desktop-test.zip (221.5 KB)

2

Hmm,

I took the ScrollPill out of the group you had it in and put it in its own one. This stops it working off the other groups position allowing us to control it’s position independently

Then we used a bit of Javascript to make the Scroll pill follow the window.

The javascript is called by the drag action of the window.

desktop-Scroll.hypetemplate.zip (118.6 KB)

var sceneName = hypeDocument.currentSceneName()
var scrollPill = document.getElementById("pillGroup");
var driveWindow = document.getElementById('driveWindow');
var driveWindowRect = driveWindow.getBoundingClientRect();
    		
    scrollPill.style.top = (driveWindowRect.top + 54)+ "px";
    scrollPill.style.left = (driveWindowRect.left + 540)+ "px";

This works which surprised the hell out of me… :grinning:

1 Like
3

Thank you very much Mark! That works perfectly.

Its very insightful to see how you approached this. I had been tinkering with a bit of code using jQuery and the ‘offset’ property but hadn’t been able to get the pill following the window while also animating correctly in the timeline.

I do have one question about the first variable you define:

var sceneName = hypeDocument.currentSceneName()

I see in the project file that’s followed by this line, which is commented out:

//console.log(sceneName);

I’m just curious what these bits of code are used for? I understand everything else that you did except these two lines.

Thank you again for your help!

1 Like
4

Mark is a clever javascripter, and he was probably using those two lines to gather info. I commented both of those lines out and the script works (as far as I can tell). But I'll leave it up to Mark to explain that, as it may have a use I am unaware of. I sometimes use...

alert(myVariable)

instead of the console to get a quick display of needed info.

BTW: I like your project and would love to see the progress on it - keep us posted please, & thanks.

1 Like
5

My bad,

I had used a similar bit of code in another project. And did a copy and paste. Then adjusted to my needs.

I should have taken those two lines out after pasting but was l seeing wood for trees at the time.

@gasspence. Thanks for explaining what I would normally use those for.
I too would love to see the end project, looks interesting so far…

6

Hi Brent, I played around a bit and came up with this for a scrollable window. It could use some tweaking, but it seems to work. - I added jQuery + jQuery-UI

mac-folder.hype.zip (331.9 KB)

here it is with the upper left close button working (kinda of a cheat -- the whole button set is a div )

mac-folder.hype.zip (339.5 KB)

7

Thank you for sharing those Greg. Seeing how you’ve approached that, definitely opens up some new possibilities and strategies for how to tackle certain problems. Thank you again!

8

I was curious if there was a way to make this work on iOS?
When I tried previewing the mac-folder.hype on my iPad, I could not drag on the pill.

cheers