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.
