Could anyone give me some tips on CORVID code?

CODE-NINJA · December 13, 2020, 9:35am

@catsloveyt
We can not see the current used CODE, so i assume anybody will be able to help you. How does your actual code look like?

And please use CODE-TAGs.

catsloveyt · December 13, 2020, 9:37am

@russian-dima I’m sorry, you’re talking to someone who doesn’t know any code terminology. That button isn’t displayed on my page.

Here’s my code. The menu won’t close.

$w.onReady(() => {
$w( ‘#MenuButton’ ).onMouseIn(() => {
const menu = $w( ‘#Menu’ );
if (menu.hidden) { menu.show() } else { menu.hide() }
})

$w( ‘Menu’ ).onMouseOut(() => {
$w( ‘Menu’ ).hide();
})
})

catsloveyt · December 13, 2020, 9:42am

@yisrael-wix You’re telling someone who doesn’t know ANYTHING about coding to go into a 111 line-long page of code while not knowing any of the terminology instead of asking someone.

I don’t know who taught you but that’s definitely not going to help me learn.

yisrael-wix · December 13, 2020, 9:44am

@catsloveyt You are right, you need more background material. To learn about programming with Corvid, read the following articles that will help you start working with Corvid:

About Corvid by Wix - what Corvid is and what features it has.
Getting Started with Corvid by Wix - step-by-step tutorial on how to start using Corvid.
Onboarding to Corvid by Wix - introduction to Corvid with short tutorials.

catsloveyt · December 13, 2020, 9:46am

@yisrael-wix Ok, thank you. That’ll definitely help.

CODE-NINJA · December 13, 2020, 9:49am

@catsloveyt
Ok xDDDD. You understand no Code-Terminology, that’s ok, but take a look at this PICTURE, please…

Do you recognize something?

You have the menu directly infront of your eyes
Click on that button (when writing a CODE-PART) this will open the CODE-TAG.
And then your CODE will look like this one…

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => { 
        $w('#Menu').show();
    })

    $w('Menu').onMouseOut(() => {
        $w('Menu').hide();
    })
})

Much better for my eyes (much better readable).

And this happens, when i try to copy and paste your way of code-writing and put it into a CODE-SNIPET…

$w.onReady(() => {$w('#MenuButton').onMouseIn(() => {     $w('#Menu').show();})$w('Menu').onMouseOut(() => {    $w('Menu').hide();})})

Do you recognize something?

Which one of these codes is more & better readable?

You make the same mistakes, again and again.

Look:
One part of your code uses…

$w('#MenuButton').onMouseIn(() => { 
        $w('#Menu').show();
    })

Another part uses…

$w('Menu').onMouseOut(() => {
        $w('Menu').hide();
    })

What is different ?

I thought, that i already explained you here…

the difference, between ‘#someID’ and ‘someID’ (this is not equal).

Take one more time a closer look onto my example.
Attention to —> #

catsloveyt · December 13, 2020, 9:56am

@russian-dima That’s what I’ve been telling you; I know literally nothing. But I actually pasted the wrong code, I’m sorry. I updated the last post.

But to my understanding, the last bit of code would make sense? Here’s what I think’s happening.

Does this not mean that when the cursor goes into the area of the button it opens the menu?

$w('#MenuButton').onMouseIn(() => { 
        $w('#Menu').show();
    })

And does this not mean that when my cursor leaves the menu (onMouseOut) is hides the menu?? What have I missed

$w('Menu').onMouseOut(() => {
        $w('Menu').hide();
    })

CODE-NINJA · December 13, 2020, 10:13am

@catsloveyt
Yes it does, but you do not see a little thing.

You do not distinguish between …

$w('#Menu').show();

…and …

$w('Menu').hide();

What is different?

When you use —> $w(‘#Menu’).hide() that means you call the ELEMENT by his ID. The ID of the called ELEMENT is —> Menu (is the ID of your element = Menu)? Or is it “menuButton”?

Did you declare a constant called Menu ???

I think you are mixing exactly this 2 things.

const Menu = '#MenuButton'   //<<<<------- this here is the ID of your Button-element


$w.onReady(() => {
    $w(Menu).onMouseIn(() => { 
        $w(Menu).show();
    })

    $w(Menu).onMouseOut(() => {
        $w(Menu).hide();
    })
})

If the first code-example do not work, then try this one…

const Menu = '#MenuButton'   //<<<<------- this here is the ID of your Button-element

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => { 
        $w(Menu).show();
    })

    $w('#MenuButton').onMouseOut(() => {
        $w(Menu).hide();
    })
})

And if this also did not work for you, then try this one…

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => { 
        $w('#MenuButton').show();
    })

    $w('#MenuButton').onMouseOut(() => {
        $w('#MenuButton').hide();
    })
})

But attention!!! In this example, the BUTTON (‘#MenuButton’) will be hidden and shown itself (not the belonging box).

You want to hide and show a box when hovering over a button!

That means:

const Menu = '#MenuButton'   //<<<<------- this here is the ID of your Button-element
const Box = '#MenuBox'   //<<<<------- this here is the ID of your Box-element

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => { 
        $w(Box).show();
    })

    $w('#MenuButton').onMouseOut(() => {
        $w(Box).hide();
    })
})

or…

const Menu = '#MenuButton'   //<<<<------- this here is the ID of your Button-element
const Box = '#MenuBox'   //<<<<------- this here is the ID of your Box-element

$w.onReady(() => {
    $w(Menu).onMouseIn(() => { 
        $w(Box).show();
    })

    $w(Menu).onMouseOut(() => {
        $w(Box).hide();
    })
})

catsloveyt · December 13, 2020, 10:27am

@russian-dima Ok, I DON’T need to know how to make the button disappear right now. I’m looking for the MENU to be closed when the cursor leaves it.

The button to open the box is #MenuButton
The box (Menu in this case) is #Menu

Can you please complete the code for me really quick? It’s 3AM I really just need this to be done.

CODE-NINJA · December 13, 2020, 10:31am

@catsloveyt

const Menu = '#MenuButton' 
const Box = '#Menu'
//---------------------------------------------------
$w.onReady(() => {
    $w(Menu).onMouseIn(() => {$w(Box).show();})
    $w(Menu).onMouseOut(() => {$w(Box).hide();})
})

or …

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => {$w('#Menu').show();})
    $w('#MenuButton').onMouseOut(() => {$w('#Menu').hide();})
})

catsloveyt · December 13, 2020, 10:36am

@russian-dima The box disappears as soon as my mouse leaves the button.

CODE-NINJA · December 13, 2020, 10:41am

@catsloveyt
Exactly!
You leave the Button = you close the box!

catsloveyt · December 13, 2020, 10:43am

@russian-dima … This entire time i’ve been saying I need the BUTTON TO STAY and the BOX to go away when my cursor leaves it. The button stays how it is!

EDIT: When the cursor leaves the BOX i want the BOX to close I only want the button to open the menu

catsloveyt · December 13, 2020, 10:51am

Maybe i’m not explaining it right. The problem is that when my cursor leaves the button (and enters the menu) the menu disappears, leaving only the button.

CODE-NINJA · December 13, 2020, 10:57am

@catsloveyt
Yes, that is correct! ABSOLUT CORRECT!

What you want is, that when entering the BOX (you also want to let the box OPENED). But in your CODE, this part is NOT CODED!

Here is what you have right now (take a look at the bottom-example…
https://www.media-junkie.com/simple-megamenu

And this is the code, you want…

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => {$w('#Menu').show();})

//missed CODE-Part--------------------(delay-time after leaving the button)
    
    $w('#MenuButton').onMouseOut(() => {
        setTimeout(()=>{
            $w('#Menu').hide();
        },350)
    })
        
    
//missed CODE-PART--------------------
    $w('#Menu').onMouseIn(() => {$w('#Menu').show();})
})

That means, now you have 350 Milliseconds to enter the BOX after leaving your BUTTON, before the BOX closes again.

If you are fast enough, you reach the BOX and activates it again.
Are you to slow, the BOX will close!

EDIT: But also this will not work!

You will need one more step, to get it to work!

catsloveyt · December 13, 2020, 11:09am

@russian-dima Ok, I’ll just set the milliseconds higher. How would someone get out of the menu and stay on the same page before the timer goes up?

CODE-NINJA · December 13, 2020, 11:17am

@catsloveyt
Do a IF-ELSE-QUERY!

If my CURSER is still hovering over the BOX (after i have leaved) my Button (and started the countdown-timer to close the box), when count-down is fullfilled…

then doing WHAT ???

—> CLOSING THE BOX ???
else ??? ----> leaving the BOX OPENED ???

For this you have to create a curser-state, which will show you the current state of the curser.

var curserSTATE (curserSTATE = 1 ----> hovered over Button or Box)
                (curserSTATE = 0 ----> leaved Button or Box)

If-else-query

if (   ) {   }
else {   }

missed code part

if ( cursorSTATE === 1  ) { do not close my BOX  }
else { close my BOX }

Now put all together and complete your code.
You have now the knowledge to be able to complete it.

EDIT: Additional info:
The HEADER-MENU (Link-Collection) on my example-site, is working exactly with the same principle.

catsloveyt · December 13, 2020, 11:22am

@russian-dima I’ll resume this in the morning. Thank you so much for your help. Have a great day!

catsloveyt · December 13, 2020, 8:46pm

@russian-dima The code works well, I just need one last line that makes the Menu close if my cursor leaves the MenuButton WITHOUT touching the menu. Could you please re-paste my snippet of code with something that hides the Menu after 100 milliseconds of my curser leaving the MenuButton?

$w.onReady(() => {
    $w('#MenuButton').onMouseIn(() => {$w('#Menu').show();})
 
 
        $w('#Menu').onMouseIn(() => {setTimeout(()=>{$w('#Menu').hide();},10000)})
        $w ('#Menu').onMouseOut(() => {setTimeout(()=>{$w('#Menu').hide();},100)})
 
 
    $w('#Menu').onMouseIn(() => {$w('#Menu').show();})
})

CODE-NINJA · December 14, 2020, 7:01pm

@catsloveyt

This is what you were searching for…

var STATE

$w.onReady(() => {
 //When entering the BUTTON ---> BOX is showing emidiately.
    $w('#MenuButton').onMouseIn(() => {
       $w('#Menu').show()
 // Setting the STATE to 1 (1=active or better sayed hovered-over)
       STATE = 1
    }) 
 
    $w ('#MenuButton').onMouseOut(() => {STATE = 0
      setTimeout(()=>{
 if (STATE === 0) {$w('#Menu').hide();}
        },300)
    })
 
    $w('#Menu').onMouseIn(() => {STATE = 1})
 
    $w('#Menu').onMouseOut(() => {STATE = 0
        setTimeout(()=>{
 if (STATE === 0) {$w('#Menu').hide();}
        },500)
    })  
})

Just COPY&PASTE this whole CODE, and replace your CODE with this one.

Topic		Replies	Views
Code for Mega Menu Ask the community code , question	5	263	January 30, 2022
Mega Menu hides on MouseOut and not on all pages Ask the community code , question	4	587	June 4, 2020
Mega Menu Code Ask the community code , question	8	1482	April 7, 2022
Menu Hover Feature Ask the community	7	334	January 24, 2022
This does not make sense Ask the community code , question	6	210	April 13, 2020

Could anyone give me some tips on CORVID code?

Related topics