@mirkoschedlbauer @[Dave de Groot] OK after playing around with this for a little while here is a work around:
Instead of using a strip element I used a repeater that contained two boxes each half of the width of the screen.
You can make the repeater full width by using the stretch control:
Now the trick is to figure out which of the container boxes has been selected in the mouseIn and mouseOut event.
You can do this by examining the repeater data property. This is an array that will be configured from the Manage Items property panel in the Editor.
So let’s build the onMouseIn() function as an example. We will do this all in code from here on in!
Start by defining the mouseIn handler in our page code onReady function:
$w.onReady(() => {
$w('#box2').onMouseIn(box2_mouseIn);
});
function box2_mouseIn(event) {
}
Ok now lets get the repeater item list. Note: the repeater in the first screenshot is called #repeater2
let repeaterItems = $w('#repeater2').data;
Now we have the items list we now need to figure out which box on our repeater the mouse entered. We can do this by getting the item’s id from the event context like this:
let itemId = event.context.itemId;
Now we have the id we can figure out the index of the repeater data list by searching the repeaterItems list like this:
let repeaterIndex = repeaterItems.findIndex((item) => {
return item._id === event.context.itemId
});
repeaterIndex should be 0 or 1 and you can then use this to modify the box background color. To do this we use the $w.at() function to get the repeater scope for the box from the event context.
let $repeaterScope = $w.at(event.context);
Now all we can use this to make the boxes different colors depending on which box was entered
so our mouseIn handler looks like this:
$w.onReady(() => {
$w('#box2').onMouseIn(box2_mouseIn);
});
function box2_mouseIn(event) {
let repeaterItems = $w('#repeater2').data;
let itemId = event.context.itemId;
let repeaterIndex = repeaterItems.findIndex((item) => {
return item._id === event.context.itemId
});
let $repeaterScope = $w.at(event.context);
let boxElement = $repeaterScope('#box2');
if (repeaterIndex === 0) {
boxElement.style.backgroundColor = "red";
} else {
boxElement.style.backgroundColor = "orange";
}
}
I’ll let you figure out the mouseOut and other configuration settings!
Cheers
Steve
