Skip to main content
J
John_Locke_2013
Inspiring
July 17, 2017
Answered

Turning the visibility of a component on / off in Canvas

  • July 17, 2017
  • 2 replies
  • 1669 views

Hi,

I'm having trouble figuring out how to turn a component's visibility on or off in Canvas using Adobe Animate.

Thanks in advance!

Peter

    This topic has been closed for replies.
    Correct answer ClayUUID

    Seems HTML components ignore the visible property, even though it exists on them. I'd file a bug report on that.

    Most components have a "visible" parameter, but I can't find any way to set component parameters at runtime. That would be the preferable method. So until a way to set component parameters is unearthed, you'll have to go brute force:

    $("#myComponentName")[0].style.visibility = "hidden";

    This works because HTML components create a div element with the same ID as their stage name. $("#bla")[0] is just the jQuery equivalent of document.getElementById(). It's only available in Animate when you're using components, which automatically loads jQuery.

    visibility - CSS | MDN

    Using either style.display = "none" or the jQuery .hide() method does not work, because Animate manages that property directly, setting it immediately back to "inline" while the component is on the stage.

    2 replies

    J
    John_Locke_2013Author
    Inspiring
    July 17, 2017

    Thank you so much for this! Very much appreciated.

    C
    ClayUUIDCorrect answer
    Legend
    July 17, 2017

    Seems HTML components ignore the visible property, even though it exists on them. I'd file a bug report on that.

    Most components have a "visible" parameter, but I can't find any way to set component parameters at runtime. That would be the preferable method. So until a way to set component parameters is unearthed, you'll have to go brute force:

    $("#myComponentName")[0].style.visibility = "hidden";

    This works because HTML components create a div element with the same ID as their stage name. $("#bla")[0] is just the jQuery equivalent of document.getElementById(). It's only available in Animate when you're using components, which automatically loads jQuery.

    visibility - CSS | MDN

    Using either style.display = "none" or the jQuery .hide() method does not work, because Animate manages that property directly, setting it immediately back to "inline" while the component is on the stage.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices