d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

a

Velo by Wix: Imitating Hover Event on Repeater Container

Motivation

We have a $w.Repeater component with items of users’ cards. When we point with the mouse cursor over some item, we want to change the background color of this item to light blue color #CCE4F7, and when the cursor moves off of the item, we want to return the initial white color.

For this, we’re going to use two other events that provide repeater API:

  • onMouseIn() runs when the mouse pointer is moved onto the element.
  • onMouseOut() runs when the mouse pointer is moved off of the element.

Also, repeater items don’t have property style.backgroundColor for changing the background color of an element. But we can use background.src property for changing the background image. So in this way, we’re going to use a one-pixel image.

Here is a one-pixel image.

Event Handlers

To start with, set handlers to onMouse{In/Out} events. We will use one function for two events by repeaters containers. We declare the handler function above and pass the function’s name as an argument to container methods.

Please pay attention’ we don’t nest any containers item into the repeater for adding handlers. Like here:

We set globally our handler on all #container1 with $w() selector. And it works well!

Imitate Hover

We use one function for two events. Therefore, we need to listen to which type of event is going. We’re expecting two event types:

  1. event.type === "mouseenter" when onMouseIn() is running.
  2. event.type === "mouseleave" when onMouseOut() is running.

Let’s see the code:

The object event always will be consistent with the current container item, which we point the mouse cursor. And we can change the background.src property of the container by event.target.

Great! It works: DEMO.

One Pixel Image

We used the direct link to the one-pixel image. The size of this image is only 70 bytes. For example, if the link of this image has 82 chars length, it’s 82 bytes. The link takes up more memory than the image. ¯_(ツ)_/¯

data:URL

Data URLs are a protocol that allows embedded small files inline in documents as a string. It means we can convert a one-pixel PNG image to a string and pass it to background.src.

We can create needed images by 1×1 PNG generator #cce4f7ff.

The data:URL image is a little longer than the direct link for this image. And other reason to use data:URL with the small image we don’t send HTTP request for fetching this image.

Resources

Posts

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this