Forum Academy Marketplace Showcase Pricing Features

Y mouse coordinates, javascript to bubble, position group focus

Hi All,
I am trying to get the mouse Y coordinates when I click on a RE and use that to transform a group focus to above or below the RE reference element by adding or removing classes.

But the problem I have is getting the value to the “javascript to bubble” element

Using the run java script function I have this code run whenI click on the RE, but there must be something wrong with the code or I cant get clientY from a workflow?
Greenshot 2022-08-06 02.30.08

Send the number to the “javascript to bubble” element
Greenshot 2022-08-06 02.03.49

Set a condition on the group focus to read the value of the “javascript to bubble” element and set classes. the class will either set the GF above or below the reference element
Greenshot 2022-08-06 02.03.09

I think I have narrowed this down to the code but if there is a better way, I am open to ideas.

Any guidance is appreciated.
Thank you :slight_smile:

I don’t know if this will help you out, but I did something similar using Bubble’s Mouse & Keyboard Interactions plugin. Take a look at the following link and under the workflows tab, the event is highlighted red that shows how you can move a the group focus. Let me know if you have any questions.

EDITOR: Bsi-forum-app | Bubble Editor

In the demo, right click on one of the light blue rectangles to see it in action. I apologize for the UI, but I was just testing out a theory.

1 Like

:man_facepalming: just built my own click listener then found this post. I knew this existed but couldn’t remember how they called it.


Hi @jdiaz, thank you for your suggestion.

This works well.
I add the Bubble plugin “Mouse and Keyboard interactions”
In the work flow that shows the popover/groupfocus I set a number state on the element of the Y coordinates.
Greenshot 2022-08-08 15.01.03

Then use the conditional I already had
Greenshot 2022-08-08 15.01.32

The only thing that worries me is the uncertain future of the plugin.


@dean2 - I understand your worries related to the plugin. If you want to go the pure code route, I looked at your code, but I didn’t see the event listener. So try doing the following if you want to avoid using the plugin:

Add a on page load workflow and add a Run Javascript action with the following

let screenLog = document.querySelector('#popover');
document.addEventListener('mousemove', logKey);

function logKey(e) {

Now, whenever the mouse is moved within the reusable element, your Javascript to Bubble value will be updated automatically. When you click within it, you wont even need to run Javascript in the workflow as the JS to Bubble element will automatically be updated. If you go back to the page that I shared earlier, you will see the working example of the code.