Hey EddieS88 ,
Thanks for reaching out to us and welcome to the Buttonizer Community 🥳
Currently that's not possible directly via the interface, but if you write some JavaScript, then it is possible 🙂
Make sure to give the group the following ID attribute via the Buttonizer group-styling settings: show_when_in_screen
Then add the following JavaScript code to your site.
/**
* @param elementQuery Can be the path to the object, such as #elementId or unique .class-name
* @param groupId the element ID attribute of the Buttonizer group that should appear/hide
**/
function showButtonizerWhenElementIsVisible(elementQuery, groupId) {
const element = document.querySelector(elementQuery);
// Element on page not found
if(!element) {
console.log(`Element '${elementQuery}' not found`);
return false;
}
const group = document.querySelector(`#${groupId}`);
// Buttonizer Group not found
if(!group) {
console.log(`Group ${groupId} not found`);
return false;
}
const observer = new IntersectionObserver(
([entry]) => {
group.style.display = entry.isIntersecting ? "block" : "none";
},
{
rootMargin: "0%",
}
);
observer.observe(element);
}
Then, as last, add the following code to your site:
window.addEventListener("buttonizer_initialized", () => {
showButtonizerWhenElementIsVisible(".element-classname", "show_when_in_screen");
});
Make sure to change the .element-classname to the classname of your element, or the element ID. If you're using multiple elements on your site with the same classname, then choose for the id attribute.
Since we already have the code now, maybe we'll add it to Buttonizer in the future!
Let me know if this helps 🙂
