Dynamic Offset of GroupFocus

boston85719 · 2024-08-31T06:41:48.275Z

There is a forum post on this already, but it is not in a Tip format and I still regularly get questions on how to do it. Originally post linked at bottom. Thank you @jmalmeida for the instructions on how to do this.

Step 1. Put elements on the page. Need Groupfocus and a reference Element, plus a Javascript to Bubble element as well as an HTML element.

Step 2. Add IDs to the groupfocus and reference element

Screen Shot 2024-08-31 at 1.29.18 PM344×769 30.6 KB

Screen Shot 2024-08-31 at 1.29.33 PM342×776 30.2 KB

Step 3: Add suffix to Bubble to Javascript Element…Note can have two on the same page, one for left and one for top. Make sure Publish Value is checked and the Value type set to Number

Screen Shot 2024-08-31 at 1.30.15 PM339×774 34 KB

Screen Shot 2024-08-31 at 1.30.58 PM

Step 4: Add the run javascript action to your workflows. You can do this however you need it…but the reference element must already be loaded on the page since the values needed is the location (from left of screen and top of screen) the reference element is located. This obviously can change as the user may interact with the page, so it might be best to run this javascript action before showing the groupfocus element in the same action series. In my example I used a button.

Screen Shot 2024-08-31 at 1.33.39 PM730×482 34.5 KB

Screen Shot 2024-08-31 at 1.33.33 PM736×491 34.7 KB

var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_left(reference.left);

var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_top(reference.top);

Step 5: setup HTML
Screen Shot 2024-08-31 at 1.34.50 PM

In the screen shot above the use of formatted as text for the top value is used as a simple demonstration of how we can change the offset dynamically based on other values…in this example that is the selected custom state value, but in other cases it may be the position of the reference element from top of screen versus the total screen height (I’m not going into details on how to set that up).

Screen Shot 2024-08-31 at 1.36.40 PM691×362 32.6 KB

Screen Shot 2024-08-31 at 1.36.30 PM696×306 26.6 KB

Again, the screen shots are for simple demonstration of how to setup dynamically the top value based on other parameters, but the point is you can change it by doing the simple math of the JS Top’s value minus or plus some value you want to use…if you want the groupfocus to sit directly above the reference element…you need to subtract the height of the groupfocus, but can not reference the element height value exposed by Bubble since that is 0 until it is visible on screen, so use a fixed height groupfocus and hard code the value.

Red element below screenshots is my groupfocus element, with 3 different offset top values based on inline conditionals of the HTML.

Screen Shot 2024-08-31 at 1.38.58 PM

One thing to know is that the offset left and top values are based on position from the left of screen and top of screen and not the distance from the reference element, since the position of the groupfocus is basically a fixed position according to the page left and top.

Custom CSS Groupfocus Offset New Responsive Engine

You’ll need the Toolbox plugin. Add ids to the reference element (reference) and to the groupfocus (groupfocus). Add JavascripToBubble element and enter ‘left’ as suffix, type ‘number’ In the workflow where you show the groupfocus, add first a Run Javascript action (it has to run before you show the groupfocus) with the following code: var element = document.getElementById('reference'); var reference = element.getBoundingClientRect(); bubble_fn_left(reference.left + YourDynamicOffset); In the …

boston85719 · 2024-08-31T06:43:46.798Z

@Xtine and @Rallis you both asked me about this yesterday in separate threads, and lucky for you both, I was doing exactly this in a client app yesterday, so figured I’d give a more visual step by step.