Hi ! I am trying to create, on the index page, a Title section to appers at the very start of the page. This is actually pretty commun and a lot of base wix template have one like that. BUT, i also want the height of the strip to adjust automatically to the size of the screen that the user have.
I know it is possible to do in Javascript, i wonder if i can set it by myself with wix code or if i have to wait Wix to make the feature availble ?
No new yet !! I tried many things but I just can’t figure out how to insert it in Wix code. Right now the first section of my website is only half my screen when I use a bigger screen it is annoying me so much!
Is a moderator have to see this post to make it as a feature that people can vote for ?
I found something but the main problem is we can’t to set the height of the strip when the web page is running (in programing mode). We can set that only in designing mode.
But we can get the parameters of the current window. Use this code:
import wixWindow from ‘wix-window’;
( Put this line befeore this: $w.onReady(function () {… )
Use these code inside of the this: “$w.onReady(function() {”
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;
$w('#testText').text = windowHeight.toString();
});
If you put the “testText” to your website, than its vaule sets by the height of the current window. Unfortunetly this isn’t interactive. When the user change his size of window (viewport) the valu of the testText dosn’t change.
Comment: I’d like to set the height of the strip like you, because I’d like to make a similar page like you. But I don’t give up! If I found something, I’ll share with you. Please, if you found something, share with me!
Yeah i know, the post will be 1 year old next month and we still don’t have any news about that… I am not expectig the feature to come out right away, but I was at least expecting an answer from the Wix team…
Simply amazing, works like a charm! Thanks man, you are a legend.
@Sam Brown - Add a text element to a container and paste his code in the onReady() function. Just make sure to get the reference to the text element correct.
The image from the stripe ajust itself but I don’t know why the text doesn’t ajust by itself.
I cannot align the text as I would like neither go out of the pine stripe line as he did.
Is it possible to have the page code of this page https://www.wixproisrael.com/demo1 so we can try to understand better how you did it please ? It is exactly the kind of effect I was looking for monthswith wix.
Create a text element and position it inside a strip (make sure this text element is called “text1”)
Hope this helps.
Calum
If anyone can now help me evolve this further it would be great! Basically I want to do the above code i.e. set the strip to view port size, however minus 130 pixels for my floating header .
For those who are not code guru’s but enjoy learning it (much like myself). By using the code below you can dynamically set the height of strips.
Add a text box element to the strip and bound it to the top and bottom (click and drag the height to bound to the strips upper and bottom edges).
The code below is explained as:
h1 = Style of text, i.e. in this case Header1, so if you change this style to match your strip your can make the text seem invisible.
When you don’t want to set the height of the strip to the full page (maybe you have a floating header like me…) calculate the percentage to set the strip height. My header is made of two 65px high strips and also takes into account a scroll strip which acts as a viewport enter / leave for me of 15px.
Take the 1080 screen size minus the 145 and this gives us the number of pixels our strip should fill. Work this out as a percentage of 1080 and enter as the height. Mine was 86.57. Works a treat.
