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?
Send the number to the “javascript to bubble” element
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
I think I have narrowed this down to the code but if there is a better way, I am open to ideas.
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.
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.
Then use the conditional I already had
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) {
bubble_fn_cY(e.clientY);
}
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?
@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.
just built my own click listener then found this post. I knew this existed but couldn’t remember how they called it.
