CODEWITHSUNDEEP
jquerycssfullscreencentering
Robbie Fikes
Robbie Fikes

Reputation: 409

How come the content isn't centered vertically unless the browser window size is manually changed?

I am having trouble with my page, the content doesnt get centered unless the window size is moved? http://www.robertfikesiv.com/work3.html

I copied the code from http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

The jsfiddle works fine https://jsfiddle.net/e4ymr9gd/

HTML

<div class="fullscreen background" style="background-image:url('http://www.robertfikesiv.com/images/work/slider/keys.jpg');" data-img-width="1920" data-img-height="1080">
    <div class="content-a">
        <div class="content-b">
            <h1>KEYS TO SUCCESS</h1>
            <h3>Digial Design Intern</h3>
            <a href="#"><div id="c">LEARN MORE</div></a>
        </div>
    </div>
</div>

CSS

.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%\9 !important;
}

/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height:100%;
overflow:hidden;
}

/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}

jQuery

/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
    var h = $('body').height();
    // set .fullscreen height
    $(".content-b").each(function(i){
        if($(this).innerHeight() <= h){
            $(this).closest(".fullscreen").addClass("not-overflow");
        }
    });
}
$(window).resize(fullscreenFix);
fullscreenFix();

/* resize background images */
function backgroundResize(){
    var windowH = $(window).height();
    $(".background").each(function(i){
        var path = $(this);
        // variables
        var contW = path.width();
        var contH = path.height();
        var imgW = path.attr("data-img-width");
        var imgH = path.attr("data-img-height");
        var ratio = imgW / imgH;
        // overflowing difference
        var diff = parseFloat(path.attr("data-diff"));
        diff = diff ? diff : 0;
        // remaining height to have fullscreen image only on parallax
        var remainingH = 0;
        if(path.hasClass("parallax")){
            var maxH = contH > windowH ? contH : windowH;
            remainingH = windowH - contH;
        }
        // set img values depending on cont
        imgH = contH + remainingH + diff;
        imgW = imgH * ratio;
        // fix when too large
        if(contW > imgW){
            imgW = contW;
            imgH = imgW / ratio;
        }
        //
        path.data("resized-imgW", imgW);
        path.data("resized-imgH", imgH);
        path.css("background-size", imgW + "px " + imgH + "px");
    });
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();

Is there a way to fix this bug?

Upvotes: 0

Views: 103

Answers (2)

Eevee
Eevee

Reputation: 48566

FYI, unless you need to support old versions of IE, this is all built into CSS now. You don't need any JavaScript whatsoever.

Center a background and make it fill an element (browser support):

background-position: 50% 50%;
background-size: cover;

Center a single child element vertically and horizontally (browser support):

display: flex;
justify-content: center;
align-items: center;

At the very least, it might be nice to only fall back to the JS solution if you detect that the browser doesn't support the CSS. (For what it's worth, I block scripts by default, so your minimit example was just a blank white page — because it's white text on a white background before JS kicks in. If I hadn't known better I would've just left and never looked at it again.)

jsbin: http://jsbin.com/jubuvizadi/1/edit?html,css,js,output

Upvotes: 1

Barmar
Barmar

Reputation: 781761

You have to do the initial calls after the DOM is loaded, so use $(document).ready()

$(window).resize(function() {
    fullscreenfix();
    backgroundResize();
}).focus(backgroundResize);
$(document).ready(function() {
    fullscreenfix();
    backgroundResize();
});

Upvotes: 0

Related Questions