Button design change when pressed on-hold and goes back to the original design when released

Ask the community
, ,
1

Hi,
Im trying to design a button that changes when i click and hold and change again when released.
I tried to make 2 different buttons that can show and hide each other when clicked but not click and hold.

export function clickme1_click(event)
{ $w(“#clickme2”).show();
$w(“#clickme1”).hide(); }

export function clickme2_click(event)
{ $w(“#clickme1”).show();
$w(“#clickme2”).hide(); }

Can someone help me out?
https://distressed23clo.wixsite.com/my-site

2

Hello @Hussain,

Unfortunately, at the moment, Wix only supports onClick and onDblClick event handlers, however, if you’re advanced enough, you can use a custom element with vanilla JavaScript, which happens to have the solution to your problem.

You can add an event listener to listen to JavaScript’s onmousedown and mouseup events, and run your code accordingly.

Hope this helps~!
Ahmad

2 Likes
3

Hello Ahmad.
I came up with an idea of adding something like a timer on when the next action will start
For example:

When (“clickme1”) is clicked once, (“clickme2”) shows up and hides (“clickme1”) like the example in the link i sent
THEN after like 0.05 seconds
(“clickme1”) shows up and (“clickme2”) hides

Something like this: W3Schools Tryit Editor

I dont know if you understand the concept but there you go!

4

I do understand (hopefully), let’s assume we have two buttons

// Declare constants for buttons
/**@type {$w.Button}*/
const btn1 = $w('#button1');
/**@type {$w.Button}*/
const btn2 = $w('#button2');

const timer = {
     /**A variable to store the timer*/
     func: null,
     /**
     * The duration of the timer in ms
     *@type {number}
     */
     duration: 500,
     /**A function to renew the timer*/
     start: () => {
          this.func = setTimeout(() => {
               btn2.hide();
               btn1.show();
          }, this.duration);
     },
     /**A function to clear the timer*/
     clear: () => {
          if (this.func) {
               clearTimeout(this.func);
               this.func = null;
          }
     }
}

// Set the event handlers

/**
* This event handler does the following 
* 1) Hides <code>btn1</code> and shows  <code>btn2</code> when <code>btn1</code> is clicked.
* 2) Set a timer to reverse the action after a specified amount of time.
*/
btn1.onClick(() => {
     btn1.hide();
     btn2.show();
     timer.start(); // Start the timer
})

/**
* This event handler does the following 
* 1) Clear the timer.
* 2) Manually reverse the actions of the timer.
*/
btn2.onClick(() => {
     // Clear the timer
     timer.clear();

     // Reverse the actions
     btn2.hide();
     btn1.show();
})

I’m still not sure what you want to do but, to efficiently achieve similar results to what you mentioned, you must adapt this example to your needs. Feel free to mention me whenever you need any help, and I’ll do my best to assist you.