How to set focus on button?

When I go to set the focus on my button, as part of a workflow, my button is not available – only my text input.

Is that possible with bubble?

This is what I see when I try to modify the example Todo app:

Link to my test Todo clone:

http://todomvcpedro.bubbleapps.io

1 Like

Right now only available on input, but maybe new plugin can do the job, @jarrad ? TAB will switch to the next button or input.

1 Like

Setting the focus would be the wrong term in the case of a button. I think what your after here is scrollTo.

2 Likes

i want to show that when you next hit Enter or <Space>, you will be engaging this particular item, which happens to be a button.

i think i just thought of a possible workaround – just change the color of the button? maybe to something other than the hover color.

or set the outside border color of the button somehow. [Update: ok, i think the blue border is just css. so i think it’s just being able to set focus.]

e.g. tab around this page to see the blue border showing which button/text-link is active:

2 Likes

Need that too :wink:

2 Likes

Usually an element like a button is to perform an action so rather than set the focus you would trigger the action since whatever the user is doing is more than likely going to be disrupted anyway. However staying within bubble i would scroll to then animate with a shake or pop animation but changing a border or button color is just as good. If your willing to set an id on the button you can also use the Plug Bubble plugin and put this in a custom code block,

document.getElementById('YOURID').focus()

1 Like

This is great, thanks.
PS: love the plugins Ripple Effect and OffLine Alert, very great products.

1 Like

rock on, the “Plug Bubble” plugin custom code block pretty much works.

i didn’t manage to set the border in quite the way i planned, but i have’t tried that hard yet. i definitely can affect things on the page, like the buttons attributes (e.g. text color, etc.), so i imagine i’ll be able to do what i need to, more or less.

to explain to others what I did:

  1. enabled element IDs on the properties panel – go to your open in the editor, Settings > ‘Expose the option to add an ID attribute to HTML elements’

  1. double-click the element you want to focus and set an ‘ID Attribute’ ('element id in HTML/dom/javascript terms) for it

  1. install the ‘plug bubble’ plugin

  2. Modify your workflow, add a new action, choose Plugins > Plug Bubble Custom Block, enter your javascript code. in my case, i tested by changing the color of the text on my button to red:

document.getElementById("testbutton").style.color='red';

that’s it.

thanks @jarrad and @JohnMark !

2 Likes

It’s team work :slight_smile:

thanks @JohnMark too – i should have mentioned you first time around, but was distracted trying to do too many things at once. :slight_smile:

2 Likes

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