Give container in repeater unique ID

Ask the community
,
1

Hi,

Is there a way to give a container a unique ID inside a repeater? I am essentially wanting to code a hover effect so when a mouse goes over the image, the image disappears, and text appears. I want each container to react individually so that the effect only happens when the mouse is over the individual container. Here is my code thus far;

export function container1_mouseIn(event) {
$w(‘#image19’).hide();
$w(‘#vectorImage3’).show(); //
$w(‘#text74’).show();
$w(‘#text66’).show();
$w(‘#text67’).show();
$w(‘#text68’).show();
$w(‘#text69’).show();
$w(‘#text70’).show();
$w(‘#text71’).show();
$w(‘#text72’).show();
$w(‘#text73’).show();
$w(‘#image15’).show();
}

export function container1_mouseOut(event) {
$w(‘#image19’).show();
$w(‘#vectorImage3’).hide(); //
$w(‘#text74’).hide();
$w(‘#text66’).hide();
$w(‘#text67’).hide();
$w(‘#text68’).hide();
$w(‘#text69’).hide();
$w(‘#text70’).hide();
$w(‘#text71’).hide();
$w(‘#text72’).hide();
$w(‘#text73’).hide();
$w(‘#image15’).hide();

Any info on giving each container its own unique ID would be amazing!

Cheers

2

You can change the id of any element on your page through the properties panel for it, so you don’t have to stick with the automatically applied default.

It is always better to change any element id to something that reflects what it is being used for etc, so that you can recall it easier in your code and ion your page too, instead of having to try to figure out where text150 or button 87 is for example.

However, just make sure that whatever you change it to is copied exactly the same in any code used for your site and it is case sensitive too.

Simply click on the element and right click on your mouse and choose properties.
https://support.wix.com/en/article/corvid-working-with-the-properties-panel

3

Hi,

I’ve tried that but unfortunately if I change it for one container, it changes for all of the containers rather than giving it it’s own ID.

I feel like there is an obvious solution and I am missing something…

Cheers

4

Hello Brayden,

I have used this animation effect on my own website that uses repeaters as well.

Here is a page that has the animation:
https://www.totallycodable.com/featured-designers

Here is a tutorial that has example code:
https://support.totallycodable.com/en/article/create-animation-on-one-repeater-item-at-a-time-using-wix-code#step-6-add-the-code-to-your-page-1

The code you used should also work, just try adding $w inside the parenthesis like this:

export function container1_mouseIn(event, $w) {     
 // your code here
}
5

Yep perfect, Brayden simply just use Nayeli’s tutorial as it is exactly what you need.

6

Thank you very much, worked perfectly!

7

Yay! :grinning: Glad to hear it worked for you!

8

$w(‘#theElement’).parent.uniqueId