Repeater + Coded Hoverbox

Discussion Ask a question
,
1

Hi! I’d like to use a Hoverbox inside a Repeater, but Wix doesn’t currently support this, so I’m trying to make my own. Specifically, I’m trying to create a “Team Page” with a photo of a team member that displays a short bio when you hover above the image.

I’ve gone about this several different ways. The way I’m currently doing it is with repeater linked to a database of employees, within that repeater a photo linked to the database, and then a button on top of that photo with the label linked to the employee’s bio in the database.

So right now the text is static- it appears on top of the photo (though the button has a built-in hover option for the background, so the background changes on mouse-over, but not the text). What I want is for the bio text to also appear upon hover.

It seems like there’s 2 options for this, I’m curious if either are possible through coding.

  1. Create an empty column in the employee database titled Empty, and have the label of the button switch between columns in the database (Empty → Bio) upon hover.
  2. Prevent the label of the button from connecting to the database until it’s hovered upon.

Any thoughts? I’ve tried a few other ways, involving opacity of the button, and hiding the button, but it seems to break the object within the repeater.

2

Both possible which one will be best for you?

1 Like
3

I think the second option (so the text field would remain blank until connected to the database upon hover) would be cleaner. Explain away!

4

Hey,
Perhaps you can try using the onMouseIn and onMouseOut of the button in the repeater like:

$w("#myRepeater").onItemReady( ($w, itemData, index) => { 
   $w("#button").onMouseIn = (event, $w) => {
      $w("#button").label = itemData.bio;
   } 
   $w("#button").onMouseOut = (event, $w) => { 
      $w("#button").label = ""; 
   }
} );

Or something around that

5

Did you manage to solve this? I’m trying to do the exact same thing: ‘Team’ repeater with image and text linked to data collection, would like a bio text to appear on hover or click on item in repeater.
Have tried to apply MouseIn/.show and MouseOut/.hide to textbox inside repeater, as well as overlaying two repeaters with show/hide applied to one of them, and parallel repeaters where one contains image and one the bio text, and the latter responds to .show/hide. Nothing works! Is my non-existent .js knowledge to blame, or can the hover effect simply not be achieved when working with repeaters?
Thank you.

6

I just managed to do this with the following:

export function “myElement”_mouseIn(event) { let fadeOptions = { “duration” : - 2000 , “delay” : 0 }; $w( " #myElement " ).hide( “fade” ); $w( " #myElement " ).show( “fade” ); } export function “myElement”_mouseOut(event) { let fadeOptions = { “duration” : - 2000 , “delay” : 0 }; $w( " #myElement " ).hide( “fade” ); $w( " #myElement " ).show( “fade” ); }

You have samples codes here: https://www.wix.com/corvid/reference/$w.Image.html#hide