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
Kai
… plus assigning more than one property -> great featurerequest 
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.
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
}
props.hype.zip (12.7 KB)
I agree,
It would be great if we had some of Hype API to deal with classes .
thanks for replying so quickly.
my problem is I‘m very new to coding. I get a liitle bit of what you suggested. 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
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.
@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 + e.target.id.slice(9);
var destEl = hypeDocument.getElementById(destId);
//execute our animation
animate(tmpObj);
function animate(tmpObj)
{
hypeDocument.setElementProperty(destEl, 'scaleX', tmpObj.scale, tmpObj.duration, 'easeinout');
hypeDocument.setElementProperty(destEl, 'scaleY', tmpObj.scale, tmpObj.duration, 'easeinout');
return;
}
});Vielen Dank! ich bekomme leider die Datei nicht auf. Sie haben da scheinbar eine aktueller Version als ich. 
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 event.target.id 
sieht super aus, danke! funktioniert bei mir aber leider nicht 
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
Yeah, the code was incomplete. Something like this...
hypeDocument.startTimelineNamed(element.id, hypeDocument.kDirectionForward);
...should work.
works fine!! Thank You very much. that a big step! 
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
group all elements that have to be animated at once and place the id that matches to your ‘ausloeserXXX’ to this group …
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.
Thank you
Kai