Hi guys! I surf around forum and google search that nothing much to help us custom a hover to a repeater. Some where says it doesn’t work (actually it doesn’t work in default tools not in code) :3 :3 I thought that would be amazing! DA** IT.
After 2 hours setting up and make a research myself ( I have nothing about API but copying and try to understand API reference from this forum - I am a newbie to API).
NOW I WILL SHARE MAIN TIPS - HOW TO CREATE A REPEATER HOVER
OK! we have 2 main steps to do this.
- Custom Hover
- Coding to run it
first of all, we must know these words: “repeater”, “container” of element. Surely, you know which part is the word show in element. Newbie usually ask this one.
- Step 1 (Custom Hover)
a. Connect your repeater to your database collection and it run smoothly (trying to find yourself how to do this). left click at “container” to choose “view properties” in menu. click to add function like this and enter to create function.
b. Create a “box” and put it into “container” of repeater. Checking it out! And surely that it appear in all item like a part of individual item. Resize the “box” to cover all of “container”. (The tip is just making a small “box” and put it in to “container” then make it larger)
NOTE: You must arrange the “box” layer in front of all information in “container” .
c. Putting all “text”, “line”, “image”, bla.bla in the “box” and decorate it as you wish (you attach and custom how your hover is into the box). Make animation Opacity to the “box” if you like.
d. At the “box” element, make a left click and choose “view properties”. then, a window open with choices, click at “hidden on load” to hide it . After that, click “onMouseOut” and enter like this to add function.
- Step 2 (coding):
NOTE: the process of the hover happening is when you move your mouse in “container” the hover appears, the hover covers the “container” as well as. So, when you move your mouse out, that time you move out hover not “container”. Then check the code like this.
export function container3_mouseIn (event) {
let $repeaterData = $w.at(event.context);
$repeaterData(‘#container3’).show();
}
export function box6_mouseOut (event) {
let $repeaterData = $w.at(event.context);
$repeaterData(‘#box6’).hide();
}
CAUTION! (‘#container3’) and (‘#box6’) must be used ’ in code.
- Most important! Remember this just work for “repeater” not “Gallery”. Actually, it’s quite lags and stuck in real site if you move your mouse too fast between two items.
Sincerely
Good luck and yummy !LoL