Change color font on a repeater based on the page you are at

Ask the community
,
1

Hello Guys, thanks in advance for any help you can provide.

Quick explanation so you can understand what I want to do. I have my Dynamic page Set up with an index to multiple video tutorials, once you access to one of the videos (Item page) the Index (List of videos) stays on the left of the page. In there all good, now, what I want to do, is on the Repeater (My index on the left is a repeater) to change the color of based on the item I am at right now, so the users can have a visual of what page they are looking at.

Thanks you, hopefully somebody will be able to help me out.

2

So far that is what I have right now, I am not an expert programming, but looking at some codes in the Forum and online I got that. But it does nothing.

My repeater only have a buttons because is the index of my DataBase, I am trying to change the color of the text in the button if the text is the same as the Title (It should be always the same because the Text in the button and the Title I have for the video is retrieve from the Data base)

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        $w("#repeater1").forEachItem(($w, itemData, index) => {
 if ($w("#button19").text === $w("#title").text) {
                 $w("#button19").html = "<p style='font-size: 18px; font-style: museo; text-align: right; color: #BAA663;'></p>";
             } else {
                  $w("#button19").html = "<p style='font-size: 18px; font-style: museo; text-align: right; color: #000000;'></p>";
             }
         });
     });
});
3

Hey @rhitservicesllc ,

Buttons don’t have an html property, only text elements do. You can set the text of a button using the label property, but you won’t be able to use HTML.

Instead of using a button, you can use a text element , which has an html property. You can use a text element to imitate a button by using the onClick() event handler, which allows you to perform an action when a visitor clicks the text.

Also, when you set the html for your text, besides for the styles, you need to include the actual text to be displayed. You can save the text of your element in a variable, and then place it in the HTML using template literals .

So your code would look something like this (I also changed your global scope selectors to repeated item scope selectors):

$w.onReady(function () {
  $w("#repeater1").forEachItem(($item, itemData, index) => {
    let currentText = $item("#yourText").text;
    if (currentText === $w("#title").text) {
        $item("#yourText").html = `<p style='font-size: 18px; font-style: museo; text-align: right; color: #BAA663;'>${currentText}</p>`;
    } else {
      $item("#yourText").html = `<p style='font-size: 18px; font-style: museo; text-align: right; color: #000000;'>${currentText}</p>`;
    }
  });
});

HTH,
Tova

4

Got it, the problem is that the text in the button and the action that the button does is handled by the Data Base. My repeater is connected to database and I am getting title and action from there. How should I do then?

Thank you for Responding Tova!

5

@talyaro ^^^

6

Hi @rhitservicesllc ,
It’s not recommended to define page element properties both with code and by connecting to database collection via a dataset/connector, so you are right to be concerned. It’s best to stick to one method or the other.

Since you need to set the HTML with code, I would recommend defining the properties of all repeater elements with code. You can do that by querying the database collection, setting the repeater’s data with the result, and setting the values for specific repeater element properties using the onItemReady() event handler. You can replace the button link with an onClick() event on your text element.

So your code might look something like this:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#repeater1").onItemReady(($item, itemData, index) => {
    // Handle the HTML
    if (itemData.title === $w("#title").text) {
      $item("#yourText").html = `<p style='font-size: 18px; font-style: museo; text-align: right; color: #BAA663;'>${itemData.title}</p>`;
    } else {
      $item("#yourText").html = `<p style='font-size: 18px; font-style: museo; text-align: right; color: #000000;'>${itemData.title}</p>`;
    }
    
    // Here assign other repeater elements instead of     
    // connecting via dataset to the database collection
    // For example, $item("#image").src = itemData.image;
        
    // When the text is clicked, navigate to the corresponding 
    // dynamic item page 
    $item('#yourText').onClick(() => {
      wixLocation.to(itemData["link-your-collection-title"]);
    });
});

    wixData.query("YourCollection")
        .find()
        .then((results) => {
            $w('#repeater1').data = results.items;
            console.log(results);
        })
        .catch((error) => {
            console.log(error);
        });
});
7

that worked, I still need to work in the html. But the fuctionality is working. I really appreciate your help.