[Code Tutorial] Full window site

Community resources Webflow Tips
1

Easier than I thought :wink:

html:

<div class="full-page" id="page-1">Page one goes here</div>
<div class="full-page" id="page-2">Page two goes here</div>
<div class="full-page" id="page-3">Page three goes here</div>

css:

div.full-page {
    width:100%;
}

div#page-1 {background-color:#f00;}
div#page-2 {background-color:#0f0;}
div#page-3 {background-color:#00f;}

jQuery:

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();
    
    $('.full-page').css('height',vph);
});

});

Youā€™re welcome :wink:

4 Likes
2

This is great, thanks @bartekkustra.

3

[Warning newbie question]

how are you inputing the jquery code? Iā€™ve tried embedding and using the ā€œcustom codeā€ tool but the code shows up on the page and doesnā€™t do what it needs to do. Iā€™m obviously doing this incorrectly so help on this would be much appreciated! Thanks!

4

That was just an example of what you can do with the jquery html and css. But theyā€™ve added that ability in the last update I think :wink: Go to your dashboard and ā€œCustom Codeā€ section and add the link to jQuery and your script in <script>...</script> tags.

751Ɨ503 28.3 KB

I didnā€™t test it but it should work.

5

Thank you for posting this. Unfortunately, Iā€™m unable to get it to work as well.

I added the jquery code in the custom code section with tags and then made myself a full-page class and set the width to 100% but it doesnā€™t seem to work.

Any ideas?

6

Export this site and try to implement it in your regular server. If it works - post results here. If notā€¦ post your results here :wink: Iā€™ll try this after I finish my deadline projects and if I find out what to do, Iā€™ll post it :wink:

7

Update on top - jQuery section :wink:

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();
    
    $('.full-page').css('height',vph);
});
8

Did we ever get this resolved? Am curious to learn how to make a section stay ā€˜full pageā€™ but am having difficulty with the code in the Custom Code section. Doesnā€™t seem to be adding to my headers. Is there any way to do this within the product itself?

9

Yup, first post do that. If you are having troubles doing it, find my skype in my profile and call/msg me :wink:

10

Make sure you have <script type="text/javascript">...jQuery Code Here...</script> when pasting @bartekkustraā€™s code into the Before </body> custom code field.

11

I realise this tutorial goes back a while, but I have tried implementing the code in my site and can not get it to work either, perhaps it is because I am not code savvy.

Nothing happens at all i.e. colour background does not show, which tells me I may be implementing it wrong.

Any help would be much appreciated.

12

Seems like I answered my own question by setting the body height to 100% and then the section to 100%.

This gives me the same effect as in http://www.katieplusluke.com/ which was in another forum post
Div Section 100% Height of Browser Window, which led to this tutorial / forum.

2 Likes
13

Sorry to bring this topic back from the dead, but is there a way to disable this script on mobile breakpoints? Iā€™ve tried using css vh but its just not stable enough on ios for my liking. I really want full page functionality on desktop & tablet, but want things to flow naturally on mobile.

I hope some generous soul finds time to answer this zombie request.

:smile:

14

@moreofthesame Havenā€™t tested it, but it should work. Iā€™ve also optimized it a little bit.

function makeItBig() {
    if($(window).width() < 768) {
        $('.full-page').css('height', $(window).height());
    } else {
        $('.full-page').css('height', 'auto');
    }
}

$(document).ready(function() {
    makeItBig();
    $(window).resize(function(){
        makeItBig();
    });
});
15

@bartekkustra thanks a zillionā€¦ works just as expectedā€¦

except the ā€˜<ā€™ should be a ā€˜>ā€™

love your work

:smile:

16

Oh man, sorry. Iā€™ve put wrong one ;P Iā€™m glad itā€™s working ;)
If you are looking for more of my work you can subscribe at www.barts.work. Iā€™ll post some announcements there soon ;)

1 Like
17

Maybe Iā€™m missing something, but what about just using the vh unit?

18

For your info Vh unit is not supported on some modern browsers

19

Looks like this can be done with pure HTML/CSSā€¦

Found this on another thread:

ā€œFew points to keep in mind: Body height must be set to 100%
Section height must be 100% and the position must be set to relative.
Divs within section must have an absolute position, using % units.ā€

Worked for me!

20

Yes @cjacobs627, you are a freaking legend! I couldnā€™t work this out for love nor money!