Hello Everyone Here is a workaround on how you can show a GroupFocus when a Button (or any element) is hovered. To test this, I created three elements:
Hover Button
Group Focus
Hidden Button (completely transparent, not visible on page load)
To show the GroupFocus when the Hover Button is hovered, you can set the conditional formatting on the Hidden Button to be:
“When Hover Button is hovered or GroupFocusA is hovered --> This element is visible”
Then you need two events in the workflow, with the first being ‘Do When Condition is True – Every Time’ (Hidden Button is visible) --> Element Actions --> Show ‘GroupFocusA’.
The second event needed is ‘Do When Condition is True – Every Time’ (Hidden Button isn’t visible) --> Element Actions --> Hide ‘GroupFocusA’. You can also use the same idea to Animate other elements when a button is hovered. Be careful with the workflow count though
It’s because the conditional formatting for GroupFocus elements doesn’t include the ‘this element is visible’ option, so the workaround is show/hide the GroupFocus through the workflow every time the hidden button becomes visible (which is when the hover button is hovered, in this example).
A Group could work but if you have a reusable element that’s a header, the header will need to expand the length of the Header+Group to include the Group (which would mean really large headers). Instead, each GroupFocus is always attached to its “reference element” and you don’t need to enlarge the header to fit the GroupFocus.
I have to say I have not experienced that. I made this site faketubes.com and in that I made the upload button show a group on hover. The upload is attached to the header which is a reusable element and the group doesn’t seem to make the header any bigger.
I’ll do some playing around and try and understand the use case for this.
Hi @nomads32n You can set this up by using a reusable element which contains the more icon and the groupfocus element. Then place the reusable element inside your repeating group.
Within the reusable element, instead of clicking the icon to show the groupfocus element, you can use the hidden element workaround from this thread to show the groupfocus, when the icon is hovered. That should work!
This is a great workaround for this ‘this element is visible’ not being available in GroupFocus conditions.
Just one question: where did you place the hidden button? I guess it doesn’t matter too much, but did you make it tiny and place it somewhere in a corner? Above the hover button? Just looking for best practice. Thanks.
That is so brilliant and weird. Amazing that it works. But, like the previous solution, the process has to be repeated and applied to the focus group as well, right? Otherwise, hovering over the button reveals the group, but the group once the mouse is moved over to the group. Or maybe I missed something.
I have gone through the entire thread and I have set the workflow as per the @fayewatson suggested.
In the header, I have created a Text element (case studies) and when the user clicks on it, it will display the Submenu (Group focus1), and when the user hovers on the Previous Case studies it will display another submenu (Group Focus2).
But the issue is when the user goes from one Submenu (Group Focus 1) to another Submenu (Group focus 2), Group Focus 2 gets hide
or you can say when the mouse moves from Group focus1 to Group focus 2, Group focus 2 hides.
I have made a short video on this
Try this:
Change GroupFocus2 to a group within GroupFocus1 that is hidden. Call it something like “Group Submenu”.
Create a Custom State within GroupFocus1 called something like “whichMenu”.
Show Group SubMenu when any of the menu items are hovered and set whichMenu to the appropriate state based on the menu item that is hovered.
Then within Group Submenu add 4 different groups, 1 for each sub menu, all hidden. Add a condition to each to show if whichMenu is this group’s value (1 - 4).
This will almost certainly work. The only downside is that you lose the relative positioning of the Group Focus 2, but that is a small price to pay to get this working flawlessly.
Here is a workaround on how you can show a GroupFocus when a Button (or any element) is hovered. To test this, I created three elements:
You can set this up by using a reusable element which contains the more icon and the groupfocus element. Then place the reusable element inside your repeating group.
