Anyone have ideas on how to get this Javascript working with an HTML element?

Need help Plugins
1

Need help running JavaScript for an item in an RG. I have a Javascript function that changes the inline styling of an element in HTML on hover; I’m not doing CSS because I need it to be inline.

However, I’m finding I can’t get this to run inside Bubble. I’ve tried using the Javascript to Bubble action with the Toolbox plugin:
image

Anyone have a suggestion?

Here’s the desired result:

image

Here’s sample HTML with the “non-Bubble” Javascript that works fine outside of Bubble:

<div id="changeBox" onmouseover="color(this,'blue')" onmouseout="color(this,'red')" style="width: 150px; height: 150px;background-color: white; border: 4px solid black; transition:0.5s;">
</div>

<script>
function color(x,y){ x.style.backgroundColor = y;
}</script>

2

Any reason why you don’t do it the easy Bubbly way like this?

Screenshot 2021-09-08 at 15.08.45
Screenshot 2021-09-08 at 15.08.451136×684 41.5 KB

3

Great question, @lindsay_knowcode. This is part of a content builder I’m designing, which basically lets users create a list of objects (headers, paragraphs, call to action buttons, etc.) and change settings for those objects dynamically (e.g., button radius, color, position). This can’t be done with current Bubble.

I WISH Bubble’s native elements let me set all of these easily dynamically, but they don’t. Hoping the new responsive engine/editor will, but who knows when those will be released to GA. :frowning:

4

ahhh I see. Got it.

5

@julienallard1, any thoughts? Found your examples quite helpful over in the thread on saving input content using HTML.

6

document.getElementByID(“elementID”).style.backgroundColor = color

Have you tried this approach?

7

Thanks for the reply, @jared.gibb. Tried to get that to work, but no luck. Wonder if I’m doing something wrong.

8

Try this

<script>
let css = document.createElement('style');
css.type = 'text/css';
css.innerHTML = '#rgitem { background-color : red;}'

document.getElementByTagName('head')[0].appendChild(css);

</script>

I use this method a lot with 1 certain plugin I work on.

image
image828×191 63.6 KB

2 Likes
9

@jared.gibb , thanks for the response! Haven’t had a chance to test this yet but will let you know once I do. Looks promising, so appreciate the share.

10

You need to write that JQuery function like this… and then call it.

function color(x) {
    $('#rgitem').css("background-color", x);
}
color('red');

or change it using JS as @jarad mention, although don’t copy and paste what he typed since it won’t like those double quotes! :wink: Also it needs to be getElementById and not getElementByID as like this… (it’s case sensitive)

document.getElementById("rgitem").style.backgroundColor = "red"

2 Likes