[Code Tutorial] Full window site

bartekkustra · September 25, 2013, 10:42am

Easier than I thought

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

pingram3541 · August 23, 2013, 2:52pm

This is great, thanks @bartekkustra.

Randy · August 26, 2013, 4:58pm

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

bartekkustra · July 5, 2019, 6:20am

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 Go to your dashboard and “Custom Code” section and add the link to jQuery and your script in <script>...</script> tags.

I didn’t test it but it should work.

ddeadserious · August 26, 2013, 8:09pm

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?

bartekkustra · August 27, 2013, 5:02am

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

bartekkustra · September 25, 2013, 10:42am

Update on top - jQuery section

$(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);
});

David_Haber · October 17, 2013, 6:44pm

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?

bartekkustra · October 17, 2013, 7:03pm

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

thesergie · January 6, 2014, 6:11pm

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

rcapozzi · June 27, 2014, 5:59am

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.

rcapozzi · June 27, 2014, 6:28am

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.

moreofthesame · January 5, 2015, 11:13am

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.

bartekkustra · January 5, 2015, 11:30am

@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();
    });
});

moreofthesame · January 5, 2015, 1:20pm

@bartekkustra thanks a zillion… works just as expected…

except the ‘<’ should be a ‘>’

love your work

bartekkustra · December 3, 2018, 11:59pm

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

joshh · January 10, 2015, 10:47am

Maybe I’m missing something, but what about just using the vh unit?

topelovely · January 10, 2015, 11:06am

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

cjacobs627 · January 28, 2016, 7:19am

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!

Bitstrap_Tech · April 17, 2016, 7:45pm

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