Question

I would say that I’m great with HTML and CSS, it’s when I start to touch JavaScript that I struggle; I can understand some of it but I couldn’t write it for my life! I’m trying to learn though, any ways; I’ve put together this jQuery script with the goal to vertically center a div between a relative positioned top div, and an absolute positioned bottom div. It’s not working out for me, lol.

Because I’m trying to learn how to work with jQuery and create my own scripts, I’d like to try and get this working. However, if there is a better way to accomplish my goal, I would greatly appreciate your input in that way as well!

<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>

.headcontent is the top div.

.midcontent is the middle div that I’d like to center.

.footer is the bottom div.

Answer 1

Here’s your code, tidied into something that will run :

$(function() {
    function vertical_height() {
        var doc_height = $(document).height();
        var head_height = $(".headcontent").height();
        //var mid_height = $(".midcontent").height();//not used
        var foot_height = $(".footer").height();
        var pos_height = head_height + foot_height;
        var neg_height = (head_height - foot_height) / 2;
        var fin_height = doc_height - (pos_height - neg_height);
        $('.midcontent').css({
            "marginTop": "-" + fin_height + "px",
            "marginBottom": "-" + fin_height + "px"
        });
    }
    $(window).resize(vertical_height).trigger('resize');
});

Now you can concentrate on getting the algorithm right.

As it stands, combining and simplifying expressions, I get :

var fin_height = doc_height - head_height*3/2 - foot_height*3/2;

which doesn’t look right to me but I could be wrong.

EDIT

To avoid overlap, try this version :

var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
    var w = $$.w.height(),
        h = $$.h.outerHeight(true),
        m = $$.m.outerHeight(),
        f = $$.f.outerHeight(true),
        fin_height = Math.max(0, (w - h - m - f) / 2);
    $$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
    $$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');

DEMO

Notes

• position:absolute removed from the footer’s CSS
• jQuery objects now cached in $$ to give the resize handler less work to do.
• Calculation now based on window height not document height.
• The three divs now measured with .outerHeight(false) to include vertical padding and borders.
• Overlap is prevented by Math.max(0, ...), which ensures fin-height can’t go negative.
• The statement $$.h.text(fin_height); is for debugging and can be removed.

EDIT 2

The following code will “debounce” the resize event.

Replace :

$(window).on('resize', vertical_height).trigger('resize');

with :

var do_resize;
$(window).on('resize', function(){
  clearTimeout(do_resize);
  do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');