Highlighted

Create a loop to add event listener to go to url html5

New Here ,
Sep 16, 2019

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.

Views

115

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Create a loop to add event listener to go to url html5

New Here ,
Sep 16, 2019

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.

Views

116

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 16, 2019 0
Adobe Community Professional ,
Sep 17, 2019

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

const root = this;
root.changeLocation = e => window.location.href = e.target.name + ".html";
root.buttons.on("click"root.changeLocation);

 

// ES5 syntax

var root = this;

root.changeLocation = function(e)
{
    window.location.href = e.target.name + ".html";
};

root.buttons.on("click"root.changeLocation);

 

 

I hope this helps.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
New Here ,
Sep 17, 2019

Copy link to clipboard

Copied

Perfect Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2019 0
New Here ,
Dec 09, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 09, 2019 0
Adobe Community Professional ,
Dec 10, 2019

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
New Here ,
Dec 10, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0