How do I set a buttons state to hover colour when a page loads?

Ask the community
,
1

I have a multi state list which changes when a button (red word) is selected on the left > this changes the words on the right.
When the page loads it automatically loads STRATEGY and the list; how can I code the button strategy to appear as white when page loads? The button changes to white on hover when you start using the list.

2862×2254 441 KB

This is the current code:
// API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
$w . onReady ( function () {
$w ( “#button8” ). onClick (() => {
$w ( ‘#statebox8’ ). changeState ( “State1” );
} );
$w ( “#button7” ). onClick (() => {
$w ( ‘#statebox8’ ). changeState ( “State2” );
} );
$w ( “#digitalbutt” ). onClick (() => {
$w ( ‘#statebox8’ ). changeState ( “State3” );
} );
$w ( “#customerbutton” ). onClick (() => {
$w ( ‘#statebox8’ ). changeState ( “State4” );
} );
});

2 
$w("#myElement").style.color="rgba(255,0,0,0.8)";
$w("#myElement").style.color="rgb(255,0,0)";
$w("#myElement").style.color="white";

In your case:

  1. First rename all your BUTTON-IDs and do it the right way…

  • btnStrategy

  • btnMarketing

  • btnDigital

  • btnCustomer

—> “btn” ← stands for → BUTTON

$w.onReady(function () {
    $w("#btnStrategy").onClick(() => {
        $w("#btnStrategy").style.color="white";
        $w('#statebox8').changeState("State1");
    });
    $w("#btnMarketing").onClick(() => {
        $w("#btnMarketing").style.color="white";
        $w('#statebox8').changeState("State2");
    });
        $w("#btnDigital").onClick(() => {
            $w("#btnDigital").style.color="white";
        $w('#statebox8').changeState("State3");
    });
    $w("#btnCustomer").onClick(() => {
        $w("#btnCustomer").style.color="white";
        $w('#statebox8').changeState("State4");
    });
});
3

Thank you for your help. Much appreciated! I will give this a try.

4

@info64604
Take your time :wink:
Surely some feedback would be useful for other users.
And like always → do not forget to like it, if you really liked it.

5

@russian-dima thank you for your help.
I wanted the buttons to still hover on white / off red. When the page loads, STRATEGY loads in white but once another button is selected it flicks back to red. Is this possible?

6

@info64604
Everything is possible!

This is all about → LOGIC ←

So, what excacly has to be happen, to achieve your desired function?
You have for example → 3x-Buttons.
All of them are for example → RED.
You click on one of the buttons to change clicked-button’s color and the button does it.
Now you click onto a second one and also changes the color of it for example to → blue!

Ok! Right now you have 2-buttons which have now the color → blue!
But normaly you wanted to change the color of the previous selected color back to red, right? → YES, RIGHT ! :grin:

But nowhere inside your current working code, this functionality is written down (coded).

That means you will have to expand your code.

My suggestion would be:

  1. First to set ALL-BUTTONS back to → ORIGINAL-COLOR
  2. Then mark one of the buttons with another color.

And everytime you select another button → first a → RESET_COLOR-functions runs and sets all BUTTONS to their → ORIGINAL-COLOR.
And in second step the color of the current selected-button changes to → blue.

This way, you always will have ONLY-1-BUTTON which will have a different color, compared with all buttons.

Now its on you!
Code your → resetButtonColors() - function

function resetButtonColors() {
	...here the code for this function...
}
7

@russian-dima thank you for your help. I will give it a go. :slight_smile:

8

@russian-dima
This is the code that I ended up using with a little help from a friend as I am a complete novice with code :slight_smile: which I think is what were saying above. Thank you for your help.
function resetButtons ( ) {
$w ( “#btnStrategy” ). style . color = “#CC192A” ;
$w ( “#btnMarketing” ). style . color = “#CC192A” ;
$w ( “#btnDigital” ). style . color = “#CC192A” ;
$w ( “#btnCustomer” ). style . color = “#CC192A” ;
}
$w . onReady ( function restButtonColors () {
$w ( “#btnStrategy” ). style . color = “white” ;
$w ( “#btnStrategy” ). onClick (() => {
resetButtons ();
$w ( “#btnStrategy” ). style . color = “white” ;
$w ( ‘#statebox8’ ). changeState ( “State1” );
});
$w ( “#btnMarketing” ). onClick (() => {
resetButtons ();
$w ( “#btnMarketing” ). style . color = “white” ;
$w ( ‘#statebox8’ ). changeState ( “State2” );
});
$w ( “#btnDigital” ). onClick (() => {
resetButtons ();
$w ( “#btnDigital” ). style . color = “white” ;
$w ( ‘#statebox8’ ). changeState ( “State3” );
});
$w ( “#btnCustomer” ). onClick (() => {
resetButtons ();
$w ( “#btnCustomer” ). style . color = “white” ;
$w ( ‘#statebox8’ ). changeState ( “State4” );
});
});

9

@info64604
The most important thing is → that it works for you.
Good luck with your project/site.