Hello.
I was wondering if anyone else experienced this weird problem:
I am using a very simple show and hide code to show and hide an element by hovering over another element. The purpose is to show a large image of a group of people and by hovering over each face, the name of that person shows above it. For that I created a round box over each face and gave it 100% opacity. All the names are hidden on load.
All works fine till I add more than 14 elements like this. When there are more than 14 elements, the elements gets completely relocated on the screen. It seems that they shift way downwards.
In the editor, each element shows exactly where they should. However in the preview and in the published site they shift.
Any suggestions?
Thank you.
With all those elements set up as simply show and hide, they are still taking up room on that website page.
You might be better off using collapse and expand with all the hidden elements set up as collapsed on load instead too.
This way all the elements in the collapsed state don’t take up any room on the website page and will only expand when needed.
So this might solve your issue with having all those overlapping elements that are simply hidden from view and yet still taking up room on the website page and then having to be moved around when you view the website on different size browser windows.
See here for example.
https://support.wix.com/en/article/aligning-your-site-to-display-correctly-on-different-browsers
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size
Remember too, that if you are using onMouseIn, then you will need to use onMouseOut so that the element is collapsed again when the mouse is moved away from the element.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
Plus, also note that onMouse will not work on mobile devices, so if you are still wanting this feature to work on mobiles, then you are going to have to use form factor for mobile devices and have the mobile code set up for onClick instead.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick
I think you have more problems than just that…you’ll have to test this approach across different screen sizes and resolutions and adjust based on the live site. And I would be wary of using any strips for this, as you’ll need positions to be absolute, and not relative. It’ll take some tinkering and I don’t know if it’ll be reliable without HTML.