MouseIn MouseOut Box Only Works Sometimes

Ask the community
,
1

Hello everyone,

I think this question has been asked before, but i tried a few suggested approaches but still cannot get it to work unfortunately, therefore asking again for myself more specifically.

I’m trying to have a dropdown box on the menu the pops out when you hover over it, and stays when you navigate onto the dropdown box. Right now, strangely, the popout box only works when i scroll very quickly into it. Example video below:

Here is the code that ive used for the site code and the home page code… It is the same for both. Do you see any errors or have any idea how to fix this? THANK YOU

export function Learnaboutbitcoin_mouseIn(event) {
$w( ‘#MegaMenu’ ).show();
}

export function Learnaboutbitcoin_mouseOut(event) {
$w( ‘#MegaMenu’ ).hide();
}

export function MegaMenu_mouseIn(event) {
$w( ‘#MegaMenu’ ).show();
}

export function MegaMenu_mouseOut(event) {
$w( ‘#MegaMenu’ ).hide();
}

2

Hello this is normal that it sometimes do not work.
When you take a look at your code…
your first part

export function Learnaboutbitcoin_mouseIn(event) {
$w('#MegaMenu').show();  
}

export function Learnaboutbitcoin_mouseOut(event) {
$w('#MegaMenu').hide();  
}

When you leave the menu your code imediately close the “MegaMenu”.
You will have to add a little time-delay, to solve this issue.

Here you can see an example…
https://russian-dima.wixsite.com/meinewebsite/custom-menu-1

Although you leave an element it does not close immediately, because it has a little time-delay, before the command is fired up to hide the leaved element.

Use —> setTimeout-command to achieve your aim and get a smoother/softer button action.

This code can only work, if there is NO SPACE between the elements!

export function Learnaboutbitcoin_mouseIn(event) {
$w('#MegaMenu').show();  
}

export function Learnaboutbitcoin_mouseOut(event) {
$w('#MegaMenu').hide();  
}

export function MegaMenu_mouseIn(event) {
$w('#MegaMenu').show();
}

export function MegaMenu_mouseOut(event) {
$w('#MegaMenu').hide();
}
3

It’s very simple solution;
Can you comment or remove below mentioned from your code and check;

exportfunction Learnaboutbitcoin_mouseOut(event) {$w('#MegaMenu').hide();  }

Hope it solves the problem! :slight_smile:

4

original-code-part:

export function Learnaboutbitcoin_mouseIn(event) {
$w('#MegaMenu').show();  
}

corrected code-part:

exportfunction Learnaboutbitcoin_mouseOut(event) {$w('#MegaMenu').hide();  }

@Muthu, please check it one more time, if it works.
(exportfunction) ← sure ?

This should return an error.

5

@russian-dima
Yes that was correct logic.
Why should we hide if it come out from that place. ?
However we are hiding when user come out from mega menu.
Why we should hide twice for single element ?

6

@muthu

I think, i know what you mean, you just would to delete a part of code? (remove the “hiding” command of the first element, right?

I assume this would cause other problems, you can make a selftest :grin:.
Tell me than if something has changed?

The PROBLEM are the SPACES between each of the ELEMENTS .

7

Dear ER Muthu,

Do you mean simply remove that code? I end up with this but it doesnt work now

exportfunction Learnaboutbitcoin_mouseIn(event)
{$w( ‘#MegaMenu’ ).show();}

exportfunction MegaMenu_mouseIn(event)
{$w( ‘#MegaMenu’ ).show();}

exportfunction MegaMenu_mouseOut(event)
{$w( ‘#MegaMenu’ ).hide();}

8

@russian-dima
It will not cause any problems

Because, when user mouseout from top menu we no need to hide or make delay.
It will automatically close when user come out from that mega menu.
More over delaying cause the problem.
If we set 2 second delay. User will moveout immediately from the top menu. Them user still sees the mega menu which is bit annoying.
So that :slight_smile:

9

@thaddeusong92
Are you facing same problem still ?

10

Try the russian-dima method

11

What problem you are facing now ?
Same ? Or different one ?

12

@thaddeusong92 you need to remove from both code and in element.
Have you deleted from element ?

13

Different, now the box doesnt load out at all.

14

@muthu

Take a look at this one …:grin:
https://russian-dima.wixsite.com/meinewebsite/navigation-menu

  1. First one —> without delay.
  2. All others with delay.

Even if there is just 1-pixel of space between the main-menu and sub-menu in the first menu-example, it will immediatelly close the sub-menu. It will even close the menu immediatelly if there is absolutely no SPACE.
But the other 3 Menues have spaces between main and sub-menu.

If you deactivate the “hide-function”() you will get another issue.
Menu will NOT CLOSE UNTIL the SUBMENU had his MOUSE-IN-EVENT.

What would be your solution for this?

15

GOT IT. It works now. I removed the element as well and its great now. Thank you Muthu and Russian Dima!

@russian-dima @Er.Muthu K

16

@thaddeusong92
Menu works also, when doing the following…?

  1. Mouse-over the white mainbutton-text —> " Learnaboutbitcoin"
  2. The big sub-menu appears.
  3. Now do NOT move into the direction of the big SUB-MENU.
  4. Leave this main-text-menu into the upper right direction.

What happened?
MegaMenu did not close?

17

@thaddeusong92
Good to here;
I hope I gave “bestAnswer” :slight_smile:

18

@russian-dima Hi I am having the same problem, there was no space between the 2 elements.

  • Mouse in button → the box opened
  • Mouse move to the box → it stays for a while then disappear when I move the mouse (still in the box)
    If I move the mouse super slow, then the box can stay. Do you know what is the problem?

Thanks