How to apply conditional styling on button text

Ask the community
,
1

Hi all,

Situation:
I created a custom navigation bar, with a repeater that is connected to a dataset, which shows buttons for the different dynamic pages. When I am on one of these dynamic pages, I want this button to appear in a different color and with a bolded text.

Problem:
I’ve got the conditional styling of the button color working (see code below), but I can’t manage to style the button text conditionally.

According to the documentation:
The following styles can be used with buttons:

Does anyone know of any other solution/workaround to tackle this problem?
Any help is highly appreciated!

$w.onReady(function () {
    //To load page before running the code
    $w("#continentDataset").onReady(function () {
	//To load the Continent dataset's data before running the following code
       	 $w("#continentItem").onReady(function () {
 	    //To load the Current Continent data before running the following code
 	    let currentContinent = $w("#continentItem").getCurrentItem();
            $w("#continentRepeater").onItemReady(($item, itemData, index) => {
 		let button = $item("#continentButton");
 		let buttonStyle = button.style;
 		let buttonTitle = itemData.title;

		if (buttonTitle === currentContinent.title ) {
                    buttonStyle.backgroundColor = "#B0CCF3";
                    //buttonStyle.fontWeight = '900' // This doesn't work
                } else {
                    buttonStyle.backgroundColor = "#FFFFFF";
                }
           })
        })
    })
});
2

There’s no way to do this within Wix. You can add another button in the repeater. And use show() and hide(). Name one button ‘hover’ and design it as you like. Then use this code:

if (buttonTitle === currentContinent.title ) {
    $w("#hover").show();
    } else {
    $w("#hover").hide();
    }
3

Hi :raised_hand_with_fingers_splayed:

You can change the button style using the Button Style API , you can also mix this API with other functions like onMouseIn() and onMouseOut() functions to create a custom hover effect like the one you can create in the editor, so when you hover the mouse over the button its color or background color get changed.

Hope this helps~!
Ahmad

4

Thanks Quin, this workaround should be able to work for me.