Have Group A's Location Dependent on Group B's Location

[bubblealex]

Hey Everyone!
I’ve been doing research around a way to guide users through a single page application and haven’t found much luck. All I want to do is display 4 cards of information to point to different places (groups) on the app. GroupFocus would work perfect for this (because you can attach it to another group) but the user can just click outside the GroupFocus and it goes away. Lame.

Does anyone know of a great way to have a group “stuck” to another group? Aka, group B’s location is dependent on group A’s location.

Appreciate the help,
Alex

[lindsay_knowcode]

Have you tried something like putting them all inside a group, each edge touching, with shapes in between to space them, if required? With the outer group fixed width? This then forces a fixed layout.

Or do I misunderstand the problem?

[cmarchan]

Second @lindsay_knowcode suggestion

[bubblealex]

I’m not quite understanding your solution.

My main issue is that if I have it overlaying my other groups, then it will be responsive differently from the lower groups.

Here’s what it looks like in the Editor:

And here’s what it looks like Live:

Since the entire application is responsive, the floating layer needs to be responsive too, so I don’t think I can make it fixed width.

Please let me know if I’m just overlooking something simple here. Thank you so much!

[cmarchan]

@bubblealex

@lindsay_knowcode suggestion was not considering the use of floating groups I think. Having said this his suggestion would require a very carefully planned layout of the page. Which if changes are needed in the future may make them very difficult to implement. The page would become less flexible.

I recall seeing plugins to handle this. Perhaps you could explore this route. I usually avoid using plugins unless absolutely needed. It seems that this function is pivotal for your app so this is why I am suggesting this.

[bubblealex]

Makes total sense. Thanks Carlos.

Do you know of any javascript/css that changes the location of a group based on the location of another group? Basically I want do the same thing a GroupFocus does but with any group.

[cmarchan]

@bubblealex That is a trick that I would love to learn

[lindsay_knowcode]

Ahh I was imagining a very different problem, clear now I see the picture. You are trying to make a “tour” type of thing. What I use is the hopscotch plugin - does the job I need quickly and easily.
https://bubble.io/plugin/hopscotch-step-by-step-tours-1531522528474x300804982411100160

There are other tour plugins, I’m sure they are good as well but I haven’t used them.

What you could do is look at the source of the hopscotch plugin (its opensource) and figure out how they got the floating groups to work nicely.

[bubblealex]

Oh this plugin looks amazing! I’ll check it out. Thanks Lindsay!

Alex