Question

Does anyone know of any jQuery Script that will keep a div centered in the middle and when the window is re-sized, it will also keep it centered? I am building a lightbox plugin and I need it to stay in the middle. I tried using CSS but it doesn’t work.

Also I need it to stay in the middle when another box is opened that has a bigger width and height. Here’s the page with examples on it:

http://wowbox.yolasite.com/

Open the image first, and then open the div, and you’ll see what I mean. The div is not centered. But then when you close and re-open the div it is centered because of the .center() that happens when you click on a WowBox link. I just need it to always be centered, and never mess up like that.

Here is the code I’m currently using to center it:

  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
  }

I want to make it where when the window re-sizes, it will stay centered. I also want to make it where when the width of the box gets wider and the height gets taller, it will re-center. Right now it doesn’t work right.

Could anyone help with this?

Thanks in advance,

Nathan

Answer 1

Try that along with the example code you already have. For clarification:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

$(document).ready(function(){
   $('.element').center();
   window.onresize = function(event) {
        $('.element').center();
    }
});