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
}
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 Text - Velo API Reference - Wix.com). 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!
Hi Rodney,
Thanks for the reply, I went to test the code and almost have it working. Had one question in the first line of code. if (itemData.availability === “available” ), what should I use to replace “itemData” with? Can’t seem to get past that part. Thansk in advance
@bskarol Hi Brian, glad you almost got it. itemData is always used when populating the repeater through its .data property. Can you paste your code to see how you’re doing it? Alternatively, I’ll paste a code sample so you can have a better idea of what I’m talking about.
import wixData from 'wix-data';
$w.onReady(function () {
$w("#repeater1").onItemReady( ($w, itemData, index) => {
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>";
}
} );
wixData.query("YourDatasetName")
.find()
.then( (results) => {
let repeaterData = results.items
$w("#repeater1").data = repeaterData
} );
} );
In this code, you use .onItemReady to populate your repeater with the results you get from the query. If you decide to use it then you just have to replace the same things I told you before and the dataset name instead of “YourDatasetName”. If you have some trouble you can paste the code so we can have a look.
Good luck!
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, your last thought could do it, if you haven’t find a solution yet, I could help you. It would be of much help if you paste your code here so we can use it as a start.
@rodney If you could help me, that would be awesome! Basically, what I’m trying to do with my code is make a little menu that, when you hover on a menu item (“#workMenu” + index), it changes from navy (#0F1227) to teal (#3C958B) and changes back on mouseOut. Then I would like to code it so that when you click on a menu option, it changes to orange (#FCB449) and stays there even on mouseOut until I click another menu option, at which point it turns navy again. I know how to set up a similar condition in a function if I were to use something like a hide/show function where if one thing is showing, it automatically hides everything else until I choose to show something else, but since I can’t figure out the “if” statement for changing text color, I can’t figure this out. I tried a variety of options, none of which worked, so I stripped it down to the basics of what I have so far. Let me know if you think of anything. Also, here is the link to the page if you want to see it:
https://www.marisaypurdy.com/menu-effects-test-page
$w.onReady( function () {
});
function workHover(index){
$w(“#workMenu”+index).html = <h5 style = "color:#3C958B"> ${$w("#workMenu"+index).text} </h5>;
}
function workUnHover(index){
$w(“#workMenu”+index).html = <h5 style = "color:#0F1227"> ${$w("#workMenu"+index).text} </h5>;
}
function workOnClick(index){
$w(“#workMenu”+index).html = <h5 style = "color:#FCB449"> ${$w("#workMenu"+index).text} </h5>;
}
//------------EXPORT FUNCTIONS: HOVER------------
//-----Work Menu 1 “Branding”-----
export function workMenu1_mouseIn(event) {
workHover(1);
}
export function workMenu1_mouseOut(event) {
workUnHover(1);
}
//-----Work Menu 2 “Typography”-----
export function workMenu2_mouseIn(event) {
workHover(2);
}
export function workMenu2_mouseOut(event) {
workUnHover(2);
}
//-----Work Menu 3 “Illustration”-----
export function workMenu3_mouseIn(event) {
workHover(3);
}
export function workMenu3_mouseOut(event) {
workUnHover(3);
}
//-----Work Menu 4 “Photography”-----
export function workMenu4_mouseIn(event) {
workHover(4);
}
export function workMenu4_mouseOut(event) {
workUnHover(4);
}
//-----Work Menu 5 “All”-----
export function workMenu5_mouseIn(event) {
workHover(5);
}
export function workMenu5_mouseOut(event) {
workUnHover(5);
}
//------------EXPORT FUNCTIONS: CLICK------------
//-----Work Menu 1 “Branding”-----
export function workMenu1_click(event) {
workOnClick(1);
}
//-----Work Menu 2 “Typography”-----
export function workMenu2_click(event) {
workOnClick(2);
}
//-----Work Menu 3 “Illustration”-----
export function workMenu3_click(event) {
workOnClick(3);
}
//-----Work Menu 4 “Photography”-----
export function workMenu4_click(event) {
workOnClick(5);
}
//-----Work Menu 5 “All”-----
export function workMenu5_click(event) {
workOnClick(5);
}
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>;
})
}
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 = “
” + value + “
”;” + value + “
”;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 .