Copy link to clipboard
Copied
Hi,
I have an interactive estate map on a HTML 5 canvas and require some code formatted.
I have 27 buttons on the map that I have named lot50 - lot77
Once the buttons are clicked they need to go the the corresponding web address www.webadress.com/lot-50 if button lot50 is clicked.
Can anyone format the loop add the event listener and create the web function for me as everytime I try is seems to break the output.
Any help appreciated.
Copy link to clipboard
Copied
Hi.
One easy way would be to have your buttons named like the pages you want to load.
For example:
lot50 ----- lot50.html
lot51 ----- lot51.html
lot52 ----- lot52.html
Then you can place all buttons inside of a single container and add a single click event listener to the container and get the name of the instance that has been clicked through the target event property. Like this:
// ES6+ syntax
// ES5 syntax
I hope this helps.
Regards,
JC
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Hi JC,
Has something changed with Animate? When I output the files now the buttons link to https://heritagehills.com.au/null
var root = this;
root.changeLocation = function (e)
{
parent.window.location.href = "https://heritagehills.com.au/" + e.target.name;
};
root.buttons.on("click", root.changeLocation);
is there an easy way I can add this.name="lotnumber" to each button
Thanks for your help
Copy link to clipboard
Copied
Hi.
This is happening because in the previous release of Animate CC the name value given in the Properties panel wasn't being assigned to the instances in the published output.
But it has been fixed in the latest release: version 20.0.1 (build 19255).
Please update your software and it should work.
Regards,
JC
Copy link to clipboard
Copied
Thanks JC,
I suspected as much. 20.0.1 isnt available yet so have rolled back to 19 and it has resolved the issue.
Many thanks
Drew