Change the colour of text inside a repeater instance on mouse-in and mouse-out (hover)

Ask the community
,
1

Hi,

I’m hoping someone can help point me in the right direction here. I’m sure this is simple, and i’m just thinking of it being more complex than it is.

I have a repeater (#repeater), inside this there is a container (#container1) and inside the container are two text elements (#text1 and #text2).

The repeater is connected to a dataset (#dataset) and it loads multiple instances form the DB fine (everything seems to be working how it should with the repeater).

I basically want to change the colour of the two text elements when I hover over a specific repeater instance.

I’ve had a good read of;

I can’t seem to figure this one out.

On #container1 i’ve set up onMouseIn and onMouseOut events;

export function container1_mouseIn(event, $w) {
// const html = $w('#campTitle').html;
// $w('#text1').html = "<span style='color:#3D9BE9'>"+html+"</style>";
}
export function container1_mouseOut(event, $w) {
// $w('#text1').html.replace(/3D9BE9/i, '000000');
}

I’ve only targeted #text1 for debugging purposes. I can see that the span is getting added, but the colour of the text isn’t changing.

This also seems like a super hacky approach, given i’ll need to now add an if clause to onMouseIn to check the span doesn’t exists before adding it.

if I try $w(‘#text1’).style I get a warning; ‘style’ does not exist on ‘#text1’.

Any guidance would be awesome as i’ve been smashign my head against a brick wall on this one for a few hours.

Cheers.

2

Hello Jamie

you can do that using .html as you first check how does the html value of the text look like then you change the color in it. that would as follows for the campTitle :

export function container1_mouseIn(event, $w) {
    $w("#campTitle").html = '<p class="p1" style="font-size:26px"><span style="color:#3D9BE9;"><span style="font-size:26px"><span style="font-style:normal">' + $w("#campTitle").text +'</span></span></span></p>'
}

export function container1_mouseOut(event, $w) {
    $w("#campTitle").html = '<p class="p1" style="font-size:26px"><span style="color:#000000;"><span style="font-size:26px"><span style="font-style:normal">' + $w("#campTitle").text +'</span></span></span></p>'
}

Best!
Massa

3

Thanks Massa, that work much better than what I had. I just thought I could use the documented $w.Style API which could save me having to construct or embed HTML in my JS, which could break in the future. Thanks again!!!

4

Hello,
I have a repeater with 6 containers and each container has a text element connected to an item of a dataset. Is it possible to only change the color of the text element in that one container where my mouse is hovering on, instead of changing the color of the text element in all 6 containers? Also, if I use $w(“#txtItem”).text in $w(“#txtItem”).html as in Massa’s solution, it returns the placeholder value while hovering on the text element. How can I make it remain the assigned value connected to the dataset?
Thanks,
JC

5

Please add your question as a new post rather than bumping up an old thread from 2018, along with any code that you have used on your own page in a code block and any screenshots that might help.

Also, make use of the related posts box on this very forum page and the search option to find previous forum posts that can help with this.

https://www.wix.com/corvid/forum/community-discussion/change-text-color-in-a-text-box-on-a-repeater-using-conditional-statement
https://www.wix.com/corvid/forum/community-discussion/how-can-i-change-repeater-item-background-color-based-on-click
https://www.wix.com/corvid/forum/community-discussion/using-foritems-changing-elements-inside-repeater
https://www.wix.com/corvid/forum/community-discussion/mousein-event-within-a-repeater

I would also suggest that you have a read in the Wix API Reference for Repeater and how to code for items in each container with the forEachItem(), forItems(), and onItemReady() functions in code.
https://www.wix.com/corvid/reference/$w.Repeater.html

Plus, take a look at this example to see how to do it on a page using the global (outside) actions and the inline (inside) actions
https://www.wix.com/corvid/forum/tips-tutorials-examples/example-input-repeaters

Finally, as for your question about using .text and .html, you can see more about that in the Wix API Reference as well here.
https://www.wix.com/corvid/reference/$w.Text.html

https://www.wix.com/corvid/reference/$w.Text.html#text
Sets or gets the plain-text contents of a text element.
Set a text element’s plain-text content

$w("#textElement").text = "Text Value";

Sets or gets the contents of a text element using standard HTML.
Set a text element’s HTML content

$w("#textElement").html = "<b>Bold Text</b>";