Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Close Button for Elements?

Home Forums Support Close Button for Elements?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1537259
    Reflective

    Hey guys

    is there any way to add a close button for an element that I added via hook? In my specific case I added a block element above header.

    for my readers I wanna add an X button top right to dismiss it and not show anymore.

    You can see my element on the private link provided

    #1537420
    David
    Staff
    Customer Support

    Hi there,

    tricky one – and this is very experimental – so it may not work lol

    1. Edit your elements Container Block and give it an ID/HTML Anchor in Advanced setting of:

    dismissible-banner

    2. Add another button to your container for the dismiss button. Give this an ID/HTML Anchor of:

    dismiss

    3. Now add a HTML Block after the Container, and add this Script and styles code:

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        let dismissed = sessionStorage.getItem("dismissed");
        let dismissBanner = document.getElementById("dismissible-banner");
        let dismissButton = document.getElementById("dismiss");
        if(dismissed){
            dismissBanner.parentNode.removeChild(dismissBanner);
        } else {
            dismissBanner.classList.add("show");
        }
        dismissButton.addEventListener("click", function(){
            sessionStorage.setItem("dismissed", true);
            dismissBanner.parentNode.removeChild(dismissBanner);
        });
    });
    </script>
    <style>
    #dismissible-banner {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }
    
    #dismissible-banner.show {
        transition: all 0.3s ease-in;
        transition-delay: 1s;
        max-height: 500px;
        opacity: 1;
        pointer-events: auto;
    }
    </style>

    On initial load the height of the banner is set to 0 and after a 1s delay it transitions to full height. Once the dismiss button is clicked it adds a dismissed variable to the browsers sessionStorage – which will remove the actual Element from the HTML. If a user starts a new session ( ie. closes the browser and revists the site ) then the banner will be re-displayed.

    The purpose of the transition is purely there to minimise Content Layout Shift that can’t be avoided when the banner has been dismissed.

    #1541430
    Reflective

    Thx for the input.

    It’s a bit too much too manage in the long run, especially when working with multiple elements.

    For now I would leave it as feature request for the elements module 🙂

    #1542182
    David
    Staff
    Customer Support

    Sorry i thought you were after a solution for your current site ?

    I am not a feature like that would be possible, as the JS and CSS required to make this happen will vary from one design to another – hence it is better a custom solution is provided like the one above. It may be something we look at in the GenerateBlocks plugin…

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.