Is it possible now, to center an item (box, text, menu…) vertically on the page?
I really don’t understand why Lightbox is the only element you can do this??
Hi Is pin to screen option answer your needs?
Hello Erez, unfortunately no, as pin to screen has only offset in pixels and not percentage, which is completely useless in today’s multi-resolution world. Something that is offset 300 px on a laptop looks pretty good, but on a 4K workstation it looks completely wrong if you’re trying to get something centered vertically, like f.ex. in my case a “ENTER WEBSITE” text on my landing page. This is so fundamental in website design, I don’t understand why this is not possible in WIX! And furthermore, I don’t understand why it is possible in Lightbox but nothing else, which means you have the capability to implement it, but choose not to…I am completely baffled!
If you want to center some element on screen just left click it an drag it into the center of the screen. A pink line will appear perpendicular to the element when in the center of the screen to let you know it’s the center.
For text you also need to click edit text and set justify from default left to center.
Mike, what you are describing is not pinning to center vertically, it works to a certain extent horizontally (x-axis) but not vertically (y-axis). When the pink lines appear, you see that a coordinate x,y appears next to the object. This is just the vertical center of the current browser screen you are working on with its resolution, so if you resize your browser window vertically, and center your object again with the pink lines, it is a completely different y-coordinate on the page.
Did not realize you were looking to pin it, looks like that is not possible…
@jmk005 I think this might be possible by using getBoundingRect() and setting your $w(‘#youritemhere’).style.position(X, Y) based on that window’s parameters by running a simple calculation to get the absolute center. Given that the item is not a lightbox, but instead an element on that page it should load much faster.
The only issue I can think of here is that this item would only appear at the window’s center at the moment the function is triggered, in which case you might be able to tell it to automatically hide/collapse on viewportLeave(). There might be some way to get the function to refresh as you scroll, though I’m not sure how much impact this would have on the performance of your page.
Hope this helps.
@jmk005 Actually, it just occurred to me it might be easier to forbid scrolling while your element is displayed which should be easier and have much better performance than refreshing the function. Here are some handy resources that might work.
@skmedia I will check this out, I don’t actually know how to work with Wix Code but I will try. How am I to implement this function that you talk about, is it wix code function or java or something else?
This is a landing page so scrolling is not necessary.
@skmedia Ok I see now that this is a WIX code, could you show me how you would do this? I think I understand the logic but I don’t know how to do the calculation and getting it into X,Y?
@jmk005 Hmm, unfortunately it looks like the Wix API for style doesn’t include position yet, not sure why.
The only viable alternative you might be able to pull off then would be to send the window’s height to a fullscreen iFrame.
import wixWindow from 'wix-window';
$w.onReady(function() {
if (wixWindow.formFactor === "Desktop") {
wixWindow.getBoundingRect()
.then( (windowSizeInfo) => {
let windowHeight = windowSizeInfo.window.height;
let windowWidth = windowSizeInfo.window.width;
let documentHeight = windowSizeInfo.document.height;
let documentWidth = windowSizeInfo.document.width;
let scrollX = windowSizeInfo.scroll.x;
let scrollY = windowSizeInfo.scroll.y;
var responsiveY = windowHeight/2;
$w("#iframe".postMessage("responsiveY");
} );
}
} );
From there you would have to write an HTML script that places the div you want displayed using that Y variable. Not sure if it will work for you or not, but it might be worth a try. HtmlComponent - Velo API Reference - Wix.com
@skmedia Thank you for the effort, I understand this in theory but I don’t know how to write that script inside the iframe. I am not that experienced in html/java coding. You wouldn’t be able to try this out on a wix page and show me?
@jmk005 Sorry but at the moment I’m having my own coding issues to resolve first. I would suggest you play around with the design a bit and find a solution that might be a little different than what you would wish but still performs and looks good. Maybe a stretched box element at the top of the page right underneath the header that is collapsed on load.
You could create a button to expand it and scrolls to (0,0) which would be very light on resources while still looking polished. Good luck!
1 Like