Close/hide everything on Overlay

  1. 4 months ago

    Hi, is there a way to create a button that can be set to hide everything on the Overlay layer? Right now I have several pop ups with "CLOSE" buttons. It would be great if there was a universal way to have a single button close/hide the Overlay layer once shown without having to create so many individual Close buttons. Please help.
    Thank you!

  2. Is there any way I can get a reply to this? Hope to hear from you soon.

  3. Angelo S

    Mar 6 Administrator

    You can do it with a Run Javascript action with the following line of code:

    $(".SCOverlay").hide();
  4. Angelo thanks for this reply, sorry I'm just responding now (for some reason I'm no longer receiving notifications from forum replies).

    Please forgive me, I'm not sure how to add this JS action on a button. Is this something you can explain to me?

  5. Angelo S

    Mar 11 Administrator

    Just add a "Run Javascript" action in the Tap event of the button, and place that code inside the action (double-click it in the actions panel or click "code" in the action properties to show up the code editor)

  6. Hey Angelo, thanks for this!

    I've tried this out and it works, however it permanently hides the overlay after the button has been tapped now -- so the hide/show aspect of the overlay doesn't seem to work now. Any ideas?

  7. Angelo S

    Mar 11 Administrator

    to show the overlay again, just use another Run Javascript action, but using this code instead:

    $(".SCOverlay").show();
  8. Angelo, you're amazing.

    That works well – but there is a small animation I have built that lives on the overlay layer. It's a "scan" effect, so when the user taps the middle of any page it shows the hidden "scan" animation" and reveals little glossary items that the user can then tap onto to reveal corresponding, hidden content on the overlay.

    So this animation needs to be viewable at all times and the hide JS script permanently hides it. If I run the show JS script on another button it doesn't re-show the animation. Also, a "show object" action that is attached to playing that animation after the JS hide overlay script has run doesn't show that animation either.

    In short, there is this one animation that is on the overlay and needs to be viewable at any time throughout the book regardless of the JS hide/show overlay scripts.

    Hopefully this makes sense.

  9. Angelo S

    Mar 11 Administrator

    Hello Olive,
    of course the code I gave you hides/show the whole overlay. You need to think about another solution if you need to show/hide only some objects on the overlay.
    For example you may add a CSS class (in the inspector panel) on the objects you wish to show/hide and show/hide those objects instead of the whole overlay. If your class is named "auto-hide-show", you can use

    $(".auto-hide-show").hide();

    and

    $(".auto-hide-show").show();

    instead of

    $(".SCOverlay").hide();

    and

    $(".SCOverlay").show();
  10. Angelo, thanks for the reply.

    I've tried applying those CSS classes to my overlay animation I always want to be shown (so this would be the only object on the overlay that would stay shown once a button with the $(".SCOverlay").hide(); JS script is tapped -- It doesn't work.

    This is obviously something I am not qualified to figure out code wise. I'm wondering if there is maybe something I'm doing wrong with the CSS class on my animation.

    Any other ideas?

  11. Angelo S

    Mar 12 Administrator

    Hello Olive, as I said, you should use

    $(".auto-hide-show").hide();

    and

    $(".auto-hide-show").show();

    instead of

    $(".SCOverlay").hide();

    and

    $(".SCOverlay").show();
  12. hey Angelo,

    Again, I appreciate the support. I've been able to get the open overlay/close overlay buttons to work great with the JS lines added. However, I've tried adding the $(".auto-hide-show").hide(); and the $(".auto-hide-show").show(); to the overlay animation I want excluded from the overlay auto-hide/auto-show and I still can't get it to work. Just to be clear I always want this overlay animation to be shown (never hidden) while keeping two buttons that can both show and hide everything else on the overlay.

    Here is a screenshot of the CSS class added to the animation:
    -image-

    I also tried running it as JS action:
    -image-

    Anything you're seeing here that I'm doing wrong?

  13. Angelo S

    Mar 12 Administrator

    Hello Olive,
    the code that I gave you allows to hide and show objects with the auto-hide-show class. You need to apply that class to the items that you want to hide/show. Just leave objects that have to be always show without the class.
    Just to be clear, you can't use this together with the $(".SCOverlay").hide();, since that would hide everything on the overlay anyway

  14. I think this makes sense to me.
    So if I understand you correctly I can't have an animation layer on the Overlay and always have it shown while still applying the $(".SCOverlay").hide(); and $(".SCOverlay").show(); to everything else?

  15. Angelo S

    Mar 12 Administrator

    Exactly. $(".SCOverlay").hide(); hides everything inside the overlay anyway.

 

or Sign Up to reply!