Does Velo's .hide() also collapse or move location?

Ask the community
,
1

On two pages of my site, I don’t have scrolling available. On these pages I want to show/hide the header when the mousein or mouseout events happen for the header section. I wrote simple code to do this… mousein-> .show(), mouseout-> .hide(). However once I called .hide() upon mouseout, I stopped receiving mouse in events for the element.

Should I be changing “display” or something else, instead of using .hide() perhaps ?

Many thanks!
Michael

2

For header you can use predefined settings like sticky header (see: Wix Editor: Customizing Your Site Header | Help Center | Wix.com )

But if you want to use Velo or you need to use. First of all no .hide() function doesn’t move elements positions. It’s only hiding the element think like opacity 0.

What you can do is. Inside your header add a Strip and change your header background opacity to 0. With this when mouse in header show strip and when mouse out hide strip. With this your header will be there but it will not be visible but your strip will be hidden when mouse goes out.

1920×1080 106 KB

3

Apparently the header behaves differently than other elements. I found that I had to use the rest of the page instead.

4

There are possibilities to show and hide headers.

Using STRIPs like mentioned by “Enes” can surely be a solution, but this will reduce usable site-space, because header always in place.

If you really want to hide header, take a look onto this very old example.

https://russian-dima.wixsite.com/meinewebsite

https://russian-dima.wixsite.com/meinewebsite/header

You will have to hide all children-elements of the HEADER-SECTION.

Maybe in the meanwhile there are also new possibilities to create such a function (old code).

5

Thank you Velo Ninja. If we put the “strips” into the header, they have the same problem as any other part of the header. Once the header is hidden or collapsed, it doesn’t receive mousein events.

The code you sent works to hide or show, but we still have the problem that we cannot get a mousein event to trigger the expand function.

6

Please always answer to the right post-part, to keep the post clear and structured.

Also show your current working not working CODE.
A SOLUTION can be found faster if the HELPER see your current working (not working) CODE.

Show your code in a CODE-BLOCK/SNIPET, with a good structured formatting.

Is your code placed inside MASTERPAGE ???

7

Thank you Velo Ninja. If we put the “strips” into the header, they have the same problem as any other part of the header. Once the header is hidden or collapsed, it doesn’t receive mousein events.

The code you sent works to hide or show, but we still have the problem that we cannot get a mousein event to trigger the expand function.

Here is working code, placed only on the two pages that need it, not in masterpage.js:

var ctrls = 1 ;
var animation = ‘zoom’ ;
var showHdr = 1 ;
var hdrFxOptions =
{ “duration” : 500 ,
“delay” : 0
};
var hdrLogs = 1 ;

export function chessEmbed_mouseIn ( event ) {
if ( hdrLogs ) console . log ( “html in” );
$w ( ‘#headerSection’ ). hide ( animation , hdrFxOptions );
}

export function chessEmbed_mouseOut ( event ) {
if ( hdrLogs ) console . log ( “html out” );
$w ( ‘#headerSection’ ). show ( animation , hdrFxOptions );
}

It works because I use the other part of the page to detect the mousein/out events, instead of the header.