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;
https://www.wix.com/code/reference/$w.Repeater.html
http://www.wix.com/code/reference/$w.Text.html
http://www.wix.com/code/reference/$w.Style.html
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.
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