Clone elements an distribute evenly

Using JavaScript with Hype
1

HI all,
I´m playing around with the hypeDocument.cloneElement - extension. Works pretty fine for me, I can adress the clones, give them class names, change color etc. ... just one issue:

given:

  • an area represented by a square and a single bar (cloneOriginal)

my objective:

  • clone the bar n-times and distribute cloneOriginal in between the area evenly (as you see, it´s gonna be a bar chart... :wink: )

Distribution is done by calculating the gap between the bars.

... and it works NEARLY perfectly. But the distribution is not ABSOLUTELY exact. I guess, it´s a math calculating thing, since the gaps differ slightly in width...

Distribution is correct, if I use Math.round or Math.floor for calculating the gap, but then the bars don´t fit inside the area...

Any idea?

Best regards, Kalle

Distribution without using Math.floo or Math.round

image
image881×212 2.53 KB

Distribution using Math.floo or Math.round

image
image881×213 3.6 KB

cloneDistribute.zip (46.5 KB)

2

Yes, even though I wrote it, the math can sometime be tricky because its subjective to each project.

I think if you have a base width of 417 and 100 elements then the simple math would be to divide 417 * 100 which would give you 4.17

This would seem to be what you need to add the new start point.

I think because you are trying to add the gap of 2 px you are getting 4.19.
4.19 cannot go into 417 px one hundred times.

Just divide the main width and add that number to the new start point
i.e

window.startLeft += flaecheWidth/ anzBalken

Screenshot 2022-07-23 at 17.13.04
Screenshot 2022-07-23 at 17.13.041920×486 104 KB

3

Thanks a lot, Mark! Hmmm... :thinking: not sure... did you only change the window.startLeft += flaecheWidth/ anzBalken - part? And there´s still a small gap at the right edge... it doesn´t fit exactly, does it?

4

So you want it rdge to edge. ?
Also does the base width have to be 417px

5

Hei Mark, for a better understanding - could you please post your version of the Hype file? Thanks in advance.

6

you'll need decimal points for positions. this can not be done with style.left instead try transform.translateX .... a guess didn't have a closer look :slight_smile:

... and i can remeber that @MaxZieb's documentLoader also enables real cloning ... so that the resulting element is a Hype-Element ... though at loadtime of the doc, not afterwards

edit ... found the samplefile:
petal.hype.zip (27,4 KB)

3 Likes
7

Thanks, Hans-Gerd. I´ll give it a try!