Help with Responsive layout and functions

1

All:

I have a layout for a responsive site.
iPhone Vertical
iPhone Horizontal
iPad vertical
iPad Horizontal.

I have a drag drop function that allows me to drag a small icon onto a spot in the layout and start a timeline.

if (event.hypeGesturePhase == "end" ){
 hypeDocument.continueTimelineNamed('ShowCard', false)
}

This works fine on one layout but then I need to recreate it for each layout and that seems inefficient and it also causes trouble with unique id’s for the pieces.

I am certain that this is a quick simple fix but I am having brain lock…long night building animations :wink:

Thanks
Nick

2

Are you able to post the project…

3

No I can’t put the actual project but I just recreated the event in this attached document.
I think this is a bug in my other project because this works fine now.
drag grey squares to the colored rectangles

Nick

drag launch test.zip (35.3 KB)

4

If you give the elements a class name then you can test for that and use it.

We name the Timelines firstCall, secondCall and thirdCall ( notice the consistent camel hump syntax)
We then give each element the same class names respectively.

And in a single JS function

     var thisElement = element.className.split(" ")[1];
 
	
	if (event.hypeGesturePhase == "end" ){
	 hypeDocument.continueTimelineNamed(thisElement, false)
	}

drag launch test_vMH.zip (40.6 KB)

2 Likes
5

Thanks Mark!!
You are the Javascript God! :wink:

2 Likes
6

You can actually change the line

var thisElement = element.className.split(" ")[1];

to

var thisElement = element.classList[1];

2 Likes