Hovers on repeater are slow/sticky

Ask the community
,
1

Hey y’all, hoping someone can help me figure out the issue here. If you check out my ‘featured section’ at nicemannerstv.wixsite.com/nicemanners, you’ll see that there’s a split second delay on the hovers, and also if you move your mouse too fast the mouseOut doesn’t seem to work.

This is the code I’m working with:

export function container1_mouseIn(event) {
 
    $w("#repeater1").onItemReady(($item, itemData, index) => {
 if (event.context.itemId === itemData._id) {
            $item("#box1").show();
        }
    })
}

export function container1_mouseOut(event) {
    $w("#repeater1").onItemReady(($item, itemData, index) => {
 if (event.context.itemId === itemData._id) {
            $item("#box1").hide();
        }
    })
}

Repeater = repeater
Container = each cell of the repeater
Box = the hover effect

Thanks!

2

I had the same problem I while back, but I used event listeners in code instead of the stub-function that you use (thru Prop Panel). They got registered more than once (although unique) and also executed more than once (thus the delay).
Are you sure you are not mixing this stub function with it´s event listeners counter part (so you also have more than 1)?

3

Werewolf GF, it’s better not to put any .onReady method ($w.onReady, dataset,onReady, repeater.onItemready) inside mouse event listeners.
because the repeater may be ready before the user hovers over the item.
You should for Giri’s advice.

4

My fault, dude — looks like I gave you the wrong advice in your other post! That’s the code I’ve used on my site but looks like I’ve been handling it incorrectly.

I tested this new code on my site (and removed the mouseIn events I had before in the Properties panel) and it seems to work quicker. I hope it works for you!

$w.onReady(function () {
    $w("#container1").onMouseIn((event) => {
 let $item = $w.at(event.context);
        $item("#testBox").show();
    });
    $w("#container1").onMouseOut((event) => {
 let $item = $w.at(event.context);
        $item("#testBox").hide();
    });
})

@J. D. , @Giri Zano , I’m wondering is this the “right” way to do it?

5

oh man thank you so much for this!! don’t worry at all, I’m such a newbie beginner at this so I appreciate any help I can get!

6

PS this updated version works and it’s beautiful

7

@werewolfgf Awesome! I’m glad it’s working for you!
You could help out the community by indicating a good response with the “Mark as Best Answer" function. This makes it easier for other members to spot a solution if they have similar problems.
Good luck with your site!

8

@lmeyer Looks good.

9

I am trying to follow the example but can’t get it to function properly.

Here is what I have originally:
$w ( ‘#statebox8’ ). onMouseIn (() => {
$w ( ‘#statebox8’ ). changeState ( “bottom” );
})

$w ( '#statebox8' ). onMouseOut (() => { 
    $w ( '#statebox8' ). changeState ( "top" ); 
})

How should it look to function like the example?
—thank you,

10

here is how it functions on my site: https://www.workforceservicecenter.com/fallsfabricatinghr

any help would be grateful.

11

I am having the same issue and can’t seem to get the code to work.
Here is what I currently have for code:
$w . onReady ( function () {

//General Support 
$w ( '#statebox8' ). onMouseIn (() => { 
    $w ( '#statebox8' ). changeState ( "bottom" ); 
}) 
        
        $w ( '#statebox8' ). onMouseOut (() => { 
    $w ( '#statebox8' ). changeState ( "top" )  
})