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.
