Button and menu a drag down using light box, not able to close the light box on mouse hover. Also, light box doesn't appear on all pages.

Ask the community
,
1

On the Page tab, i have the following code
import wixWindow from ‘wix-window’;

export function button6_mouseIn(event) {
//Add your code for this event here:
wixWindow.openLightbox(“Services”);
}
export function button6_mouseOut(event) {
//Add your code for this event here:
wixWindow.lightbox.close();
}
export function button7_mouseIn(event) {
//Add your code for this event here:
wixWindow.openLightbox(“Technologies”);
}
export function button7_mouseOut(event) {
//Add your code for this event here:
wixWindow.lightbox.close();
}
Tried multiple options seeing the threads like

  1. Moving the close() to the light box page

  2. Adding the code on respective page where light box is associated.
    But, these don’t seem to work for me.
    Request your help.

Thanks
Sudarshan

2

The first point will be that once you move the mouse over the button and a lightbox appears with the onMouseIn event handler function, think about how a lightbox appears and works on your page…

The lightbox will appear with an overlay around it and the user will not be able to access the button again on your page to activate the button again to close the lightbox with the onMouseOut event handler function.

So you would be easier making the buttons on your page to simply open the lightbox by onClick - onMouseIn will only work on desktop devices, it won’t work on mobile devices.

Then simply use the lightboxes own close and/or x button, as well the option of clicking on the overlay, to be able to close the lightbox.

You can use code to close the lightbox instead with your own button, however to do this you need to remove the lightboxes own close and x buttons.

3

Thanks for your response.
So, do you mean to say that i will not be able to use the button and the mouse hover in and out to show/hide a lightbox.
Providing my website for your reference -
https://www.calburgi.com/

4

You can use onMouseIn on the button for the opening of the lightbox and this will work fine on desktop devices.

You will need to use the lightboxes own close or x buttons to close the lightbox or add your own through the use of code on the lightbox itself.

You can’t use the onMouseOut with the button to close the lightbox on the page as the button will be hidden by the lightbox and its overlay.

As onMouse won’t work with mobile devices, you can use the Wix Window API and the formFactor to do code for a certain type of device only.

https://www.wix.com/corvid/reference/wix-window.html#formFactor

https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only