Hey. I’m trying to figure out why this bit of JS isn’t publishing a value to the JS to Bubble element.
I’m able to run it inside of a HTML element with a button using onclick()
As you can see, I need to be able to detect when a horizontal scrollbar appears, then put a custom state on the page.
Thanks in advance.
From your script, there are three variables declared, but there isn’t any return value. So you need to add a statement “return {the value you want to get};” in order to get the value.
Hope this help. Let me know if there is any question, I can try my best to help you.
Thanks @samsonlcl That makes sense.
So if I wanted to return a value of, let’s say “true” on the condition that the horizontal scrollbar appears, either on page load or as a result of a user adding new fields to the repeating group, what would that look like?
This is what I was using to retrieve the “true” or “false” values from the button in the test HTML.
I apologize, I’m only vaguely familiar with JS.
Hi @matthewbuilds! 
This is because your are not publishing them in your JavascriptToBubble element 
I created a page in my editor to help people to understand the plugin. Take a look here to see how it works.
Hope it helps!
Hi @rpetribu Thanks for the help. I think I get the general idea of how it’s supposed to work. I believe what @samsonlcl was saying was that my JS isn’t set up to pass a value, unless I’m mistaken.
I ran a copy of your JS and it works fine. But there must be something wrong with mine, right?
This is what I came up with after trying to replicate your code structure. And it’s still not working.
Hi @matthewbuilds ! Great 
Do you have two JavascriptToBubble elements in your editor, to receive the variables?
Can you share their images??
@rpetribu I’d be happy to.
This is the only JavascriptToBubble element I have on the page. My thinking was I only needed one element to pass a value if the horizontal scrolling appeared. It doesn’t matter if it isn’t there, only that it is. I hope that makes sense.
The problem is that, looking to your javascript code, you will always be passing two variables.
The first one called “hs” and the second one called “vs”. As this action takes just a split of a second to happen, your JavascriptToBubble will store always the last received variable (“vs”).
Did you fallow?
You need to elements in your editor. One for each variable.
Or, you can pass them as a list (but it is simple to have two elements)
Other problem that I saw is that you JavascriptToBubble element is “Text” type, and your variables are “Numbers”. You need to change it too!
Ok so I removed the second variable “vs” so that way I only have one JavascriptToBubble element needed.
I also changed the JavascriptToBubble element to Number but it’s still not showing anything in the text element I have on the page.
This is what I have in the text element.
Of course, the most important thing is to be able to set a custom state once the JavascriptToBubble element realizes the horizontal scrolling appears.
Did I miss anything? I really appreciate your help.
This is odd…
Can you insert the line below in your JS code to see if hs value is showned in your browser’s console?
console.log (vs);
I did it for hs because I removed the vs. This is what the console log gave me. I also ran it for vs just in case and got the same error.
I don’t know how to define the repeating group as a “div” when it already has an ID for “rgcolumns,” or if that matters. Also, the HTML element I ran this test on works just fine for detecting the scroll, as I showed earlier in this thread. It just seems to be this particular method for some reason.
What is “scrollWidth” and “clientWidth” ?
They’re JS properties for detecting an element’s width relative to the page’s width. The formula used in this JS is to calculate when an element exceeds page width, thereby creating a horizontal scrollbar on the element (instead of the page in this case). That’s my understanding of it. And it seems to work outside of using the JavascriptToBubble
Ow. I see…
Just a pause here: You can do what you want using just Bubble.
Take a look here in my editor. I made this example for other member.
See this link in your phone.
Is that what you want?
If the screen gets smaller than the repeating group, you will see a horizontal scrollbar.
You ca do this with any type of repeating groups…
If I misunderstood, we go back to Javascript
I guess it would help if I explained how the app works and why JS is the only answer, unfortunately.
There is a horizontal rg inside of a vertical full list. It doesn’t actually expand the full width of the page. But it does create a horizontal scrollbar based on the amount of cells in the horizontal rg and how wide the page is, which is what I want to happen.
This is the only setup that works for my situation. If I could do it another way, believe me, I would.
All I need to do is detect when that scrollbar appears and set a state on the page. If I can do that, then I’m good.
Sorry for this late reply. Here is a simple case to apply the logic and hope you understand the return value better.
If I call the function myValue with two parameter inside (money and incre), first the parameter money to pass to old, incre will pass to incre. It runs through each code (run the if condition to see if true or not), if the condition is true, then the function myValue will give you the value of old+incre (since this case the incre = 100, which is > 50, so it return the result of 150). So, by using console.log(), you can see the value of 150.
Hope you understand what I am saying.
Samson @ Plugin Developer
Plugin Page
Plugin Forum
Yeah, that seems to make sense. The problem is, I don’t know how to apply that to my situation and I’m not familiar enough with JS to spend more time racking my brain trying to figure it out.
Both of you have been very helpful and I really appreciate your time. At this point, time is an issue, and I’d rather have someone do it for me. Whoever is feeling generous at the moment 
I feel like I’ve at least got most of the code required to get it done, anyway.
