CODEWITHSUNDEEP
javascriptjqueryhtmlcss
whyu
whyu

Reputation: 35

div .height() changes after resize without telling it to

I am writing a function in jQuery to Center an element vertically. I have it run on load... the code is as follows:

JQuery

var $window_height;
function Centerize(content) {
    content.css('margin-top', (($window_height - content.height())/2))
};

$(function(){
    $window_height = $(window).height();
    Centerize($('#welcome'));

    $(window).on('resize',function(){
        $window_height = $(window).height();
        Centerize($('#welcome'));
        });
})

The problem is that somehow on resize, my div height magically becomes different (60px shorter). Meaning, the first time it loads, it centers. On resize, The height is smaller, and therefore margin-top becomes larger, and the entire div is pushed down.

I've checked using console logs on $('#welcome').height().

The original value is 432px. After resize, the value becomes 361px, and it remains that value even after I maximize Chrome. Any ideas?

SCSS:

#welcome {
    margin: 0 auto;
    background-color: #DB9E36;
    border-radius: 30px;
    width: 800px;
    padding: 30px 50px;
    text-align: center;

    div {
        margin: 50px auto;
        background-color: #FFE34E;
        width: 300px;
        height: 50px;
        border-radius: 5px;
        a {
            display: inline-block;
            text-decoration: none;
            font-family: 'Quicksand', sans-serif;
            font-weight: bold;
            color: #FFFAD5;
            background-color: #BD4932;
            width: 100px;
            margin: 10px 10px;
            padding: 5px 0;
        }
    }
}

Upvotes: 1

Views: 1363

Answers (3)

Lasha
Lasha

Reputation: 581

First of all, do you absolutely need to use jQuery/JavaScript to achieve vertical center? It can easily be achieved via CSS by using the top: 50%; margin-top:-100px approach, where "100" would be half the height of your content. Demo: http://jsfiddle.net/lasha/dGcsB/

If you'd like to use jQuery, you can apply similar CSS dynamically, like what you tried to achieve with your code. Demo: http://jsfiddle.net/lasha/dGcsB/1/

As an added bonus, you can apply a similar technique to center an element within a parent container whose height dynamically changes: http://jsfiddle.net/lasha/dGcsB/2/

Enjoy the code samples. :)

EDIT: Oh, and to briefly explain what causes the height stuff to happen, is that in Chrome, for example, the 'ready' event is fired before the DOM has finished calculating the final dimensions of each element, so when you try to get the height or width of an element right on load, the browser may not have the most up to take info. This, as of this moment, is more of a Chrome thing, and Firefox doesn't usually have this issue.

Upvotes: 1

i--
i--

Reputation: 4360

I'd guess this has to do with images being inside your #welcome div. Try replacing:

$(function(){
    $window_height = ...

with

$(window).on('load', function () {
   $window_height = ...

that should give images time to fully load.

Upvotes: 1

erikrunia
erikrunia

Reputation: 2383

have you tried setting the height of the welcome element? resizing the browser will probably resize that element as its height is not defined.

#welcome {
    margin: 0 auto;
    background-color: #DB9E36;
    border-radius: 30px;
    width: 800px;
    padding: 30px 50px;
    text-align: center;
    height:200px;
    ...

at least see if that makes any difference in the behavior you're seeing

Upvotes: 0

Related Questions