▼
Streaming live at 10am (PST)

[Code Tutorial] Full window site

#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

Filling the page
Help with keeping footer out of frame until scroll down?
Filling the page
Filling the page
Need help getting link block to stay at bottom of section
#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.

Pasted image751x503 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

[Tutorial] How to make hero section always fill browser window
#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.

#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 ;)

#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!