Keep button border once clicked

Ask the community
,
1

I have a color selection in a repeater (connected from a datasheet) with a linked button on top where I want the border to stay visible once the button is clicked (like it does so when hovering over it [please see yellow icon for reference]).
I was able to single out the clicked button (and change the border color) but can’t manage that the border stays visible… any ideas? Thanks in advance.

800×647 97 KB

805×627 97.2 KB

$w . onReady ( function () {
$w ( “#button1” ). onClick ( ( event ) => {
const data = $w ( “#repeater2” ). data ;
let clickedItemData = data . find ( item => item . _id === event . context . itemId );
let newdatax = clickedItemData . title ;

let  $item  =  $w . at ( event . context ); 
$item ( "#button1" ). style . borderColor  =  "red" ; 
//$item("#button1").style.backgroundColor = `red`; 

console . log ( newdatax ); 
console . log ( clickedItemData );

} );
} );

2

Try this one…

$w.onReady( function () {
   const data = $w("#repeater2").data;
   $w("#button1").onClick((event)=> {
      let clickedItemData = data.find(item => item._id === event.context.itemId);
      let newdatax = clickedItemData.title; console.log(newdatax);
      let $item = $w.at(event.context);
      $item("#button1").style.borderColor = "red";
      //$item("#button1").style.backgroundColor = `red`;
      console.log(clickedItemData);
   });
});

If it does not work —> try → https://www.wix.com/velo/reference/$w/button/onmouseout
You want to fix the new border(color) after you leave the button.

3

Thanks for your feedback but it didn’t work and the linked onmouseout function is also not a viable solution. I currently found another workaround where I just swap the icons to a “clicked” version. I’m still looking for a better and leaner solution though.

4

You could try adding an outlined circle shape directly on top of the button, which appears when the button is pressed.

The code would be something like this in the onReady

$w("#yourRepeater").onItemReady(($item, itemData) => {
    $item("#yourButton").onClick((event) => {
            
        const itemClicked = event.context.itemId;

        if (itemData._id === itemClicked) {
            $item("#outlinedCircle").show();
        } else {
            $item("#outlinedCircle").hide();
        }
    });
})
5

Hi @infocutiesocks

Can you tell me what isn’t working about Velo-Ninja’s answer?

Is it doing nothing?
is it keeping the border evrywhere?
Does it give any error?

If we can figure out what is wrong we might find a solution wich might help other people aswel.

Kind regards,
kristof

6

Thanks for your reply. Works great and is way leaner than replacing the background images :slight_smile:

7

@volkaertskristof
Velo-Ninja’s answer and the stated code is nearly identical to mine and it just didn’t do anything. The borders kept popping up only when hovering over it but wouldn’t stay once the button is clicked. The mentioned “onmouseout”-function is also not practical as I need the button to stay “clicked”, regardless of where the mouse is. Hope this clarifies things.