Multiple Elements with .setElementProperty

(Kai Sinzinger) #1

Hello Forum!

Is it possible to adress multiple elements at once wit the hypeDocument.setElementProperty function?
the function only allows one element or am I missing something?

hypeDocument.setElementProperty(element, ‘propertyName’, value, 1.0, ‘easeinout’)

could this element be a class?

Thank You

(Hans-Gerd Claßen) #2

… plus assigning more than one property -> great featurerequest :slight_smile:

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #3

I’m not sure, but I think you could do it manually. Hype is just basically manipulating DOM elements – and DOM elements can be selected by class…

Also, you could use an array of elements and then just use a loop.

(Mark Hunte) #4

The element argument has to be an object and cannot be an array of string.

You would have it iterate over the elements. Using a class as a convenience.

	var boxes = document.getElementsByClassName('boxes')// WE GET AN ARRAY OF THE CLASS OBJETCS
	var boxeLeft = 80
	var boxeWidth = hypeDocument.getElementProperty(boxes[0], 'width');// WE GET ONE OF THE OBJECTS WIDTH

	for (i = 0; i < boxes.length; i++) { //-- ITERRATE OVER EACH OBJECT

 hypeDocument.setElementProperty( boxes[i] , 'left', boxeLeft  , 1.0, 'easeinout')
 boxeLeft = boxeLeft + boxeWidth
} (12.7 KB)

(Mark Hunte) #5

I agree,

It would be great if we had some of Hype API to deal with classes .

(Kai Sinzinger) #6

thanks for replying so quickly.

my problem is I‘m very new to coding. I get a liitle bit of what you suggested. :slight_smile: Also I think I‘ve discribed my problem a little bit foggy.

To make it a bit easier to understand I‘ve prepaired a file.

Lets say I have a page with 30 case studies (one case study per Box) and in those boxes is always a text with some hover words wich are triggering the animation of one specific element within that box. So everytime I hover over a specific word it starts to animate the appropriate element.(Sometimes one word triggers two or more elements.) The behavior is kind of similar in all cases as it should scale the element.

I have 30 of those Case studies and there are always 5-t trigger-word an the appropriate elements. As the animation behavior is always the same (scale 1.5) can i write a function for that behaviour an call it to trigger a specific element) or a group of elements) with the appropriate trigger word or do I have to copy paste the hypeDocument.setElementProperty(element, ‚propertyName‘, value, 1.0, ‚easeinout‘) over and over again.

Thank you

(Kai Sinzinger) #7 (130.4 KB)

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #8

If you look at the comment at the top of every Hype JavaScript, you get the secret to your problem…

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called

Just use an event. You don’t even need to be using the “setElementProperty”. Just use multiple timelines and use the change innerHTML property.

hypeDocument.startTimelineNamed(event, hypeDocument.kDirectionForward);

So, if “button1” was pressed, the “event” variable is equal to “button1”. Then the corresponding timeline could be played. You’d just have to do that 30 times, which is crazy tedious.

Alternatively, and depending on your project, you can create an array of 30 text values. So, the inner HTML could just be changed in a similar way. That is more complicated though.

(Hans-Gerd Claßen) #9

@HerrKai give this a try … should work

//get the basename for your targets
    var destBaseName = 'id';
    //bind the events to the source     ... PLEASE ADD THIS COMMON CLASS TO YOUR SPAN-ELEMENTS -> 'ausloeser'    
    $('.ausloeser').bind( "mouseover mouseout", function(e){
    //get the event that triggered ...
    var tmpObj = (e.type ===  'mouseover') ? {scale: 2, duration: 0.3} : {scale: 1, duration: 0.3};
    //set the destId and get the element
    var destId = destBaseName +;
    var destEl = hypeDocument.getElementById(destId);
    //execute our animation        

     function animate(tmpObj)
            hypeDocument.setElementProperty(destEl, 'scaleX', tmpObj.scale, tmpObj.duration, 'easeinout');
            hypeDocument.setElementProperty(destEl, 'scaleY', tmpObj.scale, tmpObj.duration, 'easeinout'); 


(Kai Sinzinger) #10

Vielen Dank! ich bekomme leider die Datei nicht auf. Sie haben da scheinbar eine aktueller Version als ich. :stuck_out_tongue_winking_eye: Bekomme ich die trotzdem irgendwie auf. Schönen Gruß! Kai


Hi Michael, using the event in this way will return the object not a string variable so you won’t be able to use event to start a timeline. You could however use :wink:

(Kai Sinzinger) #12

sieht super aus, danke! funktioniert bei mir aber leider nicht :grin:

(Kai Sinzinger) #13 (130.9 KB)


Hi @HerrKai

Your ID’s on your rectangles and ellipses don’t match with the code.

Just change the variable “destBaseName”

var destBaseName = "id";

or rename your element ID’s in your document to “meineBox1” instead of “id1”, “meineBox2” - “id2”, etc

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #15

Yeah, the code was incomplete. Something like this…

hypeDocument.startTimelineNamed(, hypeDocument.kDirectionForward);

…should work.

(Kai Sinzinger) #16

works fine!! Thank You very much. that a big step! :grinning:

In some cases I have to trigger the elements seperately as well as in a group like in the third box. (3 seperate trigger for each element and another one wich triggers all three at once)

How do I have to change the code to make that happen or what function do I have to use?

Thank you

(Kai Sinzinger) #17

triggerBehaviour_01b (148.3 KB)

(Hans-Gerd Claßen) #18

group all elements that have to be animated at once and place the id that matches to your ‘ausloeserXXX’ to this group …

(Kai Sinzinger) #19

thanks again! thats seems to work somehow.

The problem is that the whole group/container scales and not the individual elements at once in ther place.

Am I putting the id at the wrong place. Or did I miss anything?

I‘ve tried it over and over again and now I‘m a little lost here. :grin:

Thank you

(Kai Sinzinger) #20

triggerBehaviour_01b (148.7 KB)