Hi all, I am trying to figure out how to change a font color of text that gets displayed in a repeater from a dataset. In my dataset, I have a column ("Availability") that contains the text "available" in some rows and "not available" in other rows. If the word "available" appears, I want the text to change to red. Any help would be awesome!
Ex. if (Availability column in dataset displays "available" ) {
change text color to red
} else {
change text color to green
}
This is an old post and is being closed. If you have further questions please open up a new thread with your own issue.
Please read the Community Guidelines.
Hi
I want to change the text color only 1 word inside the textbox.
[abcdefg"Availability"hijklm]
This code can change color only this text
["Availability"]
Please tell me the code can change color only 1 word.
Thank you
$w.onReady(function () { if ($w("#text44").text === "Abailability") { let value = $w("#text44").text; $w("#text44").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #D12020;'>" + value + "</p>"; } else { let value = $w("#text44").text; $w("#text44").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #30B21A;'>" + value + "</p>"; } })
*UPDATE*
I spent a few weeks trying to figure out how to solve this problem above and I finally got this to work. For those who are interested in seeing how I did it, I wanted to code my own menu with different menu items (workMenu + index) that, when hovered over, change from navy to teal, and when clicked, change to orange. The part I was struggling with that I just figured out how to write is when a menu item is clicked (for example, #workMenu1) and is orange, how do I get #workMenu1 to stay orange on mouse in and out until I click a different menu item (for example, #workMenu2) in which case #workMenu2 turns orange and #workMenu1 goes back to the default navy and hover actions.
Here is a link to my test page if you want to see it work:
https://www.marisaypurdy.com/menu-test-page
Here is my code:
function HoverMenu(index){ let $menu = $w("#workMenu" + index) let $orange = `<h5 style = "color:#FCB449"> ${$w("#workMenu" + index).text} </h5>` let $teal = `<h5 style = "color:#3C958B"> ${$w("#workMenu" + index).text} </h5>` let $navy = `<h5 style = "color:#0F1227"> ${$w("#workMenu" + index).text} </h5>`
//--To keep a "clicked" menu item orange-- if ($menu.html=== $orange) { $menu.html= $orange; } else { $menu.html= $teal; } } function UnHoverMenu(index){ let $menu = $w("#workMenu" + index) let $orange = `<h5 style = "color:#FCB449"> ${$w("#workMenu" + index).text} </h5>` let $teal = `<h5 style = "color:#3C958B"> ${$w("#workMenu" + index).text} </h5>` let $navy = `<h5 style = "color:#0F1227"> ${$w("#workMenu" + index).text} </h5>`
//--To keep a "clicked" menu item orange-- if ($menu.html=== $orange) { $menu.html= $orange } else { $menu.html= $navy; } }
function OnClickMenu(index){ let $menu = $w("#workMenu" + index) let $orange = `<h5 style = "color:#FCB449"> ${$w("#workMenu" + index).text} </h5>` let $teal = `<h5 style = "color:#3C958B"> ${$w("#workMenu" + index).text} </h5>` let $navy = `<h5 style = "color:#0F1227"> ${$w("#workMenu" + index).text} </h5>` $menu.html = $orange; // --To make sure only 1 "clicked" orange menu item at a time:
[1,2,3] .filter(idx => idx !== index) .forEach(idx => { $w('#workMenu' + idx).html= `<h5 style = "color:#0F1227"> ${$w("#workMenu" + idx).text} </h5>`; }) }
What if you wanted the condition to be the current color? I am trying to create what is essentially a menu. I have a code that changes the default text color from a navy blue color to a teal color on MouseIn and MouseOut so that the user can see that the text is clickable. But then, when the text is clicked, I want it to turn orange and stay orange because the content in the dataset will change depending on which menu item is clicked. So far, with the code, the text stays orange if the mouse stays on it, but because of my mouseOut function, as soon as you take the mouse away, it goes back to the default navy blue color instead of staying in the new click color.
Is there a way to create a condition that would fix this? Maybe in the mouseOut function, if the text color is teal, change it to navy on mouse out, but if the text color is orange, don't change it back to navy, keep it as orange? I have no idea how to call on the style element of color like that.
Hi bskarol, you could change the html properties of the text element. Something like this:
if (itemData.availability === "available") { let value = $w("#textElement").text; $w("#textElement").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #D12020;'>" + value + "</p>"; } else { let value = $w("#textElement").text; $w("#textElement").html = "<p style='font-size: 25px; font-style: avenir; text-align: right; color: #30B21A;'>" + value + "</p>"; }
I understand that when using html tags the text is replaced, that is why in the code above you will see that the text is held in a variable (let value), so then it can be used on the html tag.
I assume that you are populating the repeater through code using its data property, that is why I used itemData to access the 'availability' row in your database.
In the code above you should replace the #textElement with your id, and the html tag should include all the attributes you want (these are the ones you can modify https://www.wix.com/code/reference/$w.Text.html#formatting-text). I used the basic ones, and for the color attribute I think you could simply use the words 'red' and 'green' but if you want a much more personalized tone you can search the hex code for the color you want and use it https://htmlcolorcodes.com/. In case you are not familiar, the hex code is the 6digit code that starts with the hashtag.
Hope this helps!