Hover effect on individual items in a repeater

Ask the community
,
1

Hi yall, new at this. Using mouseIn / mouseOut to create a hover effect on a repeater, but I can’t figure out how to limit it to each item. If you check out this URL and scroll to the featured section you’ll see where I’m at, when you hover over one, it shows the effect on all the items. Ugh.

This is the little bit of code I’m working with. Container = each item in the repeater. Box = the hover elements:


export function container1_mouseIn(event) {
 // Add your code for this event here: 
    $w('#box1').show()
}

export function container1_mouseOut(event) {
 // Add your code for this event here:
    $w('#box1').hide() 
}

Thanks so much for the help!

2

Hello Werewolf,

i think you are working in wrong direction.

You should work with repeater, not with container-boxes.

  1. Insert a repeater onto your page.
  2. Connect this repeater to your database (by using a dataset).
  3. Setup your repeater.
  4. Setup your database.

When repeater works → first STEP done!

STEP-II (Overlay-Effect)

  1. Generate a transparent container-box in the repeater (ok, know i eventuelly understand your step with the container-box xD)
  2. Put some text into your container-box.
  3. Connect this text with your database (by using the same dataset).
  4. Then you will need a little bit of CODE.

You could even use your code if you optimize it.

export function repeater1_mouseIn(event) {
    $w('#box1').show('fade')
}

export function repeater1_mouseOut(event) {
    $w('#box1').hide('fade')
}

Something like this.

I did not test all this. This was all done on the fly. Just some thoughts.
Try it out !

3

Howdy! Thanks for the response. I just tried this and sadly the same thing happens. The same effect is achieved, but it just shows up on the entire repeater instead of each individual item I’m hovering over… :confused:

4

Hi! I do something similar on my site. I think you may find this post useful. And this API documentation will explain it better than me.
Basically, you’ll need to use $item instead of $w . That way the event will be limited to each individual item in the database/repeater, instead of to the specific element ID.

I haven’t tested this code, but something like this:

export function container1_mouseIn(event) {
    $w("#repeaterName").onItemReady(($item, itemData, index) => {
 if (event.context.itemId === itemData._id) {
 // #box1 is the id of all the boxes, but $item maps through each button on the repeater   
            $item("#box1").show();
        }
    })
}
5

@werewolfgf

Sorry, my fault! I thought you were looking for the same, what is showed in the example. Did not read your problem mindfuly.

But as i can see Meyer already gave you a link to a related post, where you perhaps find your solution.

Good luck and happy coding.

6

Yessss, this totally works. I have to futz with it a little more but it’ll totally do the trick. Thank you!

7

Hey again y’all - I’m working with this bit of code that LMeyer wrote up, but I’m having a little trouble with it. The hover effect is working but it’s slow and glitchy. Could anyone point me in the right direction to fix this?

This is the URL where I’m working: https://nicemannerstv.wixsite.com/nicemanners

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();
        }
    })
}
8

Hi again! This post could be helpful to you if you want to add effect options to smooth out the animation.
And here is the API for all possible effects you could mess around with.

Hopefully this helps to smooth things out!

9

This works for me in preview, but once published it doesn’t quite work. When I hover over one of the items in the repeater, all the ones I’ve hovered over previously activate too. Any ideas?

10

Hello Ally, where is your code?

11

@russian-dima It’s the code seen above!

12

I have noticed if you use the collapse and expand versus, hide and show. It is much faster.