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.

DEMO: https://bsi-forum-app.bubbleapps.io/version-test/test_swipe?debug_mode=true
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.

Hi jdiaz,
Your very helpful, as you can see from my first post I don’t know any JS.
I tried your example and it works, but it works over the entire page.
I need it to set the value onclick of the reference element, and not the popover element, otherwise moving my mouse sets a new value and can make the popover change position while using it.
I tried changing the query selector value to #reference and the event listener to onclick but it didn’t work for me.
Also there are a few of the same RE on the page at the same time to the script needs to be in the RE i believe?

The desired effect I am trying to achieve is something similar to the popover on the ones on Trending Color Palettes - Coolors

Greenshot 2022-08-22 19.01.48


@dean2 - if the plugin works pretty well and they Bubble is going to maintain it for the foreseeable future, while not just go with that solution? Worry about the coding part when you have to.

This topic was automatically closed after 70 days. New replies are no longer allowed.