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 ?
I found this on internet
$(function() { $("#id") .width($(window).width()).height($(window).height()); });
How did he do to have a paragraph that auto ajust by the screen size ?
https://www.wixproisrael.com/demo1
Can someone post the code please ?
Solved and explained.
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.
$w.onReady(function () { var style1 = "vh;height:" + 86.57 + "vh"; //change 86.57 to whatever you calc $w("#text1").html = "<" + "h1" + " style=" + style1 + ">" + $w("#text1").text + "</" + "h1" + ">"; });
Hope this helps others.
Guys and girls, Copy and paste the below code into your code for PAGE - note it is onReady so should be at the top of all code.
$w.onReady(function () { //TODO: write your page related code here... var style1 = "vh;height:" + 100 + "vh"; $w("#text1").html = "<" + "h1" + " style=" + style1 + ">" + $w("#text1").text + "</" + "h1" + ">"; });
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.
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.
Basically this is possible by using html text within the strip (on the top)
And set the text height according to the screen height.
Try it yourself.
var style1 = "vh;height:" + 100 + "vh"; $w("#text1").html = "<" + "h1" + " style=" + style1 + ">" + $w("#text1").text + "</" + "h1" + ">";
You can see an example of this in Link - this is a little demo I made
https://www.wixproisrael.com/demo1
It would be great if there is grid, so that full site is responsive. :)
I don't know why Wix don't enable this...site would look so much cleaner with this option. :/
Hello,
(I can't to speak English well, sorry)
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.
I found this codes here, if you want to read more: https://www.wix.com/code/reference/wix-window.html#WindowSizeInfo
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!
Zoli
I have been looking to do this for a while too!
I would like to know how to do this as well. Help anyone?
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 ?
No idea
Wix, help please!
This would be a great interactive feature. Any news?