Click page only to make background color change

Hi, is this possible some other way. I do not have option to click the page for example index to make workflow action.

1 Like

Hello :smiley:, welcome to the Bubble Forum. I don’t quite understand your question, are you looking to initiate a bubble workflow that will change the background color of your page when the user clicks on it?

If that is the case, you can create a group that is large enough which can act as your page background and you can initiate a workflow that will change the background color of that group when a user clicks on it.

Do you want to change the background Image on Click? You can do that with Custom States. When this group is pressed…

Thanks for both of your suggestions.
I’m not sure if either will work, here I make gif to explain what I would like to achieve.
The idea is to cycle through the colors but not when another element inside the page is tapped (clicked). It’s okay if the color does not have a transition time.

@duke.severn you know how?

@hye and welcome to Bubble! <pls someone have gotten the joke :wink:

@syedibrahim1388 is on the right track if you want a Bubble-only solution. You make a content group and add the WF to it, place everything in the group, essentially creating a “main-page” that you can click. Caveat, this is a little complicated because of the way that Bubble allows event bubbling down the child tree through any element that doesn’t have a workflow. So you would essentially need to add a workflow (either empty or a real one) to every DOM element that isn’t the “main-page” that you set up. Your cursor would also show up as a pointer on the whole page. Not exactly optimal.

If you want a JS to Bubble solution this is how I would do it:

Firstly, install Toolbox plugin, next, create an html element on your page and add this code to it.

<script>
$('.main-page').on('click', function(clicketty) {
    if (clicketty.target.classList.contains('bubble-r-line') || clicketty.target.classList.contains('main-page')) {
        bubble_fn_setcolor();
    } else {return;}
});
</script>

This snippet will make sure that you’re clicking on items containing a class name of either .main-page or bubble-r-line. I am assuming it covers all use cases, because of the way Bubble renders out the DOM. But that’s purely an assumption and If you find another, make sure to post back here, I’d love to hear about it!

Then, set up your bubble_fn_setcolor in a JS to Bubble, tick “trigger event”, and go to the workflow to set it up like so:

Kazam_screenshot_00070

I just did mine with conditionals and a state on the index, if you really care you can check out this editor.

This is the result:

Peek%202019-09-06%2019-48

4 Likes

Thanks this is working but I have an extra question now, I am keeping my mainpage reusable elements in a group that I would like the background of to be clickable, can this be achieved? here another gif to explain,

Trade you question for question:

What tool are you using to make those interactive mockups?

The second question is really easy to answer:

Just add a workflow event to that group, on click? Same workflow you’re using to change the color.

This has the same problem as clicking directly on the screen. All inside elements will trigger it too.


https://principleformac.com/
https://www.dropbox.com/s/q41iz5yj3mdef82/Principle.dmg?dl=0

Right then:

Add an id to the group you want to be clickable (if you don’t know how, look at this vid).
On page load run this javascript with the toolbox plugin

//keep the hashtag in the element name, replace the rest
$('#element_name_that_you_just_invented').addClass('clickable');

and add this to your if conditional in the snippet:

|| clicketty.target.classList.contains('clickable')

Or whatever nomenclature you prefer. Should work, let me know.

Yep that’s it thanks!

I found that running the javascript on page load didn’t work, I think bubble add and remove class after, I use do when: page load entire.

Good show.

Your opening line :sweat_smile:

1 Like

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