Multiple Elements with .setElementProperty

21

if you want to be able to adress more than one element individually switch your workflow from ids to classes.
Every targetelement = same class and then iterate thru …

22

sounds very simple but I have absolutely no clue on how to do that.
What do I have to change in the script in 01b 3 to switch to classes?

23

may I suggest just using timelines if you are not happy with the coding.

Hans (above) is suggesting that you use javascript to loop through all the elements that have a class (for example ‘group’) and apply an action to those targeted elements.

For simplicity I would perhaps create timelines for each element and animate the scale property and then another timeline for the groups. Then depending on what word you have ‘moused over’ this would play the appropriate timeline.

1 Like
24

than I would have to work with approx. 150 - 170 timelines. :slight_smile:

why wouln‘t I work with the script if that simplifies it.

Is it at all possible to manage the task via script (ids and classes at the same time)?

25

Fair enough. I was just going on your example :smile:

Of course it's possible but you have to be able to create the script in the first place :wink:

perhaps someone will help with this.

1 Like
26

yeah, the example is just to show the problem :smile: and its full of Blindtext (Lorem ipsum) :wink:

27 
//get the basename for your targets
    var destBaseName = 'yourClassNamePrefix';
    
    //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: 1.8, duration: 0.3} : {scale: 1, duration: 0.3};
    
    //set the destId and get the element
    var destClass = destBaseName + e.target.id.slice(9);
    var destEls = document.getElementsByClassName(destClass);
    
    //execute our animation        
    animate(tmpObj);

     function animate(tmpObj)
     {
     var l = destEls.length;
     while(l--)
     {
            hypeDocument.setElementProperty(destEls[l], 'scaleX', tmpObj.scale, tmpObj.duration, 'easeinout');
            hypeDocument.setElementProperty(destEls[l], 'scaleY', tmpObj.scale, tmpObj.duration, 'easeinout'); 
            }
            return;    
     }

        });
1 Like
28

:tada: //// SUCCESS //// You made my day!!! :tada:

Everything works fine :slight_smile:
Extra großes Dankeschön an Herrn Claßen für das script und die Mühe!!! :+1:

1 Like
29

da nich für :wink:

1 Like