Drag over HTML Widget issue

1

Hello everybody,

I was working on a project which required to control Hype animation timelines using a slider. There is an HTML widget on top of that slider, but the problem is that every time I drag the slider and put my cursor over the HTML widget, it locks the cursor. Sometimes, it makes the whole scene irresponsive.

I’m not sure what is causing the issue. Any suggestion is welcome. Thanks in advance!

Added a slightly edited hype project that I got from this forum:

drag_timeline.hype.zip (48.3 KB)

This video explains the issue. After 0:36 whole scene became irresponsive:

2

@jonathan

3

It looks like there was a copy of the Drag handler for the small red ball – can you remove one and see if you still hit this issue?

17%20PM
Screen Shot 2018-09-18 at 4.26.17 PM.png551×703 48.5 KB

drag_timeline.hype 2.zip (59.6 KB)

4

Using the slider, I am controlling the Main Timeline which is making the blue rectangle rotate. That’s why I have both timelines.

Seems like if I remove the Main Timeline, the scene irresponsive issue doesn’t happen. But the cursor still gets locked.

5

Maybe it helps creating a new timeline instead of using the always running main timeline? That pause action at the start may be interfering with your project.

Other then that I had no lock ups from Daniel’s version here.

6

@dr.stormer The issue is that HTML widgets (essentially iframes) have their own events and therefore when you click, mouseover, mousedown, etc, etc on top of the widget then the “pointer events” for that “iframe” kick in preventing the rest of the documents pointer events from working.

I don’t know the reason for using a HTML widget here but maybe you can use a normal rectangle element? or, if you don’t need pointer events on the widget then just check the “ignore all pointer events” checkbox in the Actions inspector for the widget.

If you do need the events and a widget then you’re gonna have to do some smart JS to change the pointer events when perhaps mousing over and mousing out of the HTML widget.

8

So, finally got it fixed by disabling the HTML widget pointer events when dragging has started:

element.style.pointerEvents = "none";

Then, enabled the HTML widget pointer events when dragging has finished:

element.style.pointerEvents = "auto";

That solved both the issues. Thank you, everybody!

1 Like
9

Ha, you beat me by 1 min with a solution!

Here’s generic code that will disable and re-enable pointer events for all iframes within the Hype document based on the drag phase. It can be added as a Run JavaScript… function chained to the On Drag handler:

	var hypeDocumentElement = hypeDocument.getElementById(hypeDocument.documentId());
	
	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
		// on start, make all iframes not respond to pointer events
		var iframes = hypeDocumentElement.getElementsByTagName("iframe");
		for(i = 0; i < iframes.length; i++) {
			iframes[i].style["pointer-events"] = "none";
		}
	} else if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd || event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseCancel) {
		// on end, set all iframes back to allowing pointer events
		var iframes = hypeDocumentElement.getElementsByTagName("iframe");
		for(i = 0; i < iframes.length; i++) {
			iframes[i].style["pointer-events"] = "auto";
		}
	}
3 Likes