Also trigger other repeater item when triggering a single item

Ask the community
,
1 
$item('#container').onMouseIn(()=>{
    $item('#element').show();
})
$item('container').onMouseOut(()=>{
    $item('#element').hide();
})

above code may work well when mouse movement is not so fast, but may ugly when mouse movement is fast, i mean some element will still show even mouse is no longer hovering the repeater item

i have tried :

$item('#container').onMouseIn(()=>{
    $w('#element').hide();
    $item('#element').show();
})

but not working. any help ?

2

The hide and show functions return a Promise and it will probably work better if you handle the Promise.

Here’s your code handling the Promise:

$item('#container').onMouseIn(()=>{
   $item("#element").hide("fade")
   .then( ( ) => {
      console.log("Done with fade");
      $item('#element').show();
   } );
})

I’m not sure what you are trying to accomplish. In the above example, the element will fade (hide) on mouseIn, and then show right after it’s hidden.

In any case, you probably need to handle the Promises from the hide and show to accomplish what you want.

3

I tried to create a menu with submenu, the submenu will show when hovering a menu that have submenu, here is my code

const floatOptions = {
'direction': 'top',
'duratiion': 300,
'delay': 0
}
const flipOptions = {
'duration': 300,
'delay': 0
}
const navBarMenu = [{
'_id': '0',
'mainMenuLabel': 'PRODUCTS',
'link': 'home',
'subMenu': [
{ "_id": "0", "subMenuLabel": "First submenu" },
{ "_id": "1", "subMenuLabel": "Second submenu" },
{ "_id": "2", "subMenuLabel": "Third submenu" }
]
},
{ '_id': '1', 'mainMenuLabel': 'WHY US', 'link': 'home', 'subMenu': '' },
{ '_id': '2', 'mainMenuLabel': 'WHAT WE DO', 'link': 'home', 'subMenu': '' },
{ '_id': '3', 'mainMenuLabel': 'CONTACT', 'link': 'home', 'subMenu': '' }
]
$w.onReady(function () {
$w('#navBarRepeater').data = navBarMenu;
$w('#navBarRepeater').onItemReady(($mainMenu, mainMenuData, mainMenuIndex) => {
$mainMenu('#menuLabel').text = mainMenuData.mainMenuLabel;
$mainMenu('#menuContainer').onMouseIn((event) => {
$mainMenu('#menuUnderline').show('flip', flipOptions);
if (mainMenuData.subMenu) {
$w('#subMenuRepeater').data = mainMenuData.subMenu;
$w('#subMenuRepeater').onItemReady(($subMenu, subMenuData, subMenuIndex) => {
$subMenu('#subMenuLabel').text = subMenuData.subMenuLabel;
});
$w('#subMenuColumnStrip').expand();
} else {
$w('#subMenuRepeater').data = [];
$w('#subMenuColumnStrip').collapse();
}
});
$mainMenu('#menuContainer').onMouseOut((event) => {
$mainMenu('#menuUnderline').hide('flip', flipOptions);
})
});
});

This not working as i’m expected maybe because a delay from hide and show effect/animation which make sometimes the (‘#menuUnderline’) not completely hidden, this makes a duplicate underline like in the screenshot bellow

796×179 10.4 KB

i also thinking to eliminate “onMouseOut” because i want the mainmenu keep underlined while hovering its submenu.

4

i was thinking something like

if (element.id !== event.context.itemId ){
    subElement.hide
    } else {
    subElement.show
}