Highlighted

CC Animate HTML5 Canvas - Bring Button to Front on Click

New Here ,
Sep 25, 2019

Copy link to clipboard

Copied

I have two buttons on a canvas. They are slightly overlapping. When the user clicks on one button, I would like that button to be brought to the top (or in front) of the other button. 

 

So, a click on a button should always bring it to the top so the whole button is visible to the user. 

 

Thanks for any any help on this!

Views

498

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

CC Animate HTML5 Canvas - Bring Button to Front on Click

New Here ,
Sep 25, 2019

Copy link to clipboard

Copied

I have two buttons on a canvas. They are slightly overlapping. When the user clicks on one button, I would like that button to be brought to the top (or in front) of the other button. 

 

So, a click on a button should always bring it to the top so the whole button is visible to the user. 

 

Thanks for any any help on this!

Views

499

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 25, 2019 0
Adobe Community Professional ,
Sep 26, 2019

Copy link to clipboard

Copied

Hi.

 

You can use the addChild or setChildIndex method from the createjs.Container class. In this case, you're going to call one of these two methods from the buttons parent.

 

Examples:

 

addChild approach (ES5 syntax):

this.bringToFront = function(e)
{
    e.currentTarget.parent.addChild(e.currentTarget);
};

this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

 

addChild approach (ES6 syntax):

this.bringToFront = e => e.currentTarget.parent.addChild(e.currentTarget);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

 

setChildIndex approach (ES5 syntax):

this.bringToFront = function(e)
{
    e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
};

this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

 

setChildIndex approach (ES6 syntax):

this.bringToFront = e => e.currentTarget.parent.setChildIndex(e.currentTarget, e.currentTarget.parent.numChildren - 1);
this.button0.on("click", this.bringToFront);
this.button1.on("click", this.bringToFront);

 

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 26, 2019 1
New Here ,
Sep 27, 2019

Copy link to clipboard

Copied

Thank you so much!! I will try it out, and report back 🙂

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 27, 2019 0
New Here ,
Oct 15, 2019

Copy link to clipboard

Copied

Just what I needed! I used the event "mousedown" instead of "click" to instantly move to front on a mouse click. Thanks again!

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...
Oct 15, 2019 0