CODEWITHSUNDEEP
javascriptjquerycsspluginspositioning
Nathan
Nathan

Reputation: 12010

How do I center a div in the middle of the page using jQuery and keep it centered when window is re-sized?

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

Upvotes: 2

Views: 2246

Answers (3)

mazlix
mazlix

Reputation: 6313

-----------------This works---------------------

CSS

       .box{
    width:200px;
    top:-5px; 

    position:relative;
    background:#444;
}
.inner {
    height:0px;
    width:0px;
    background:#444;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    position:relative;
}

.outer { height:200px; width:400px; border:2px dotted red; }

HTML

<div class="outer">
<div class="inner">
    <div class="box">
        wpfw efuiweh fuiwehf weuifh weuifh fuihwe fuihwefuiweh uwehf iuwehf uiwefhweuifh weuifhwe fuiweh fuiwehfuiwefh uiwefh weuifh weuifh weuifhwe uifh weuifhwefuiweh fuiweh fuiwehf iweufh weuih
    </div>
</div>
</div>

jQuery

$(function(){
    $(".box").css('top',-($(".box").height()/2));
    $(".box").css('left',-($(".box").width()/2));
});

Please let me know if that doesn't do what you want it to. You can even see on http://jsfiddle.net/mazlix/m4Ttk/2/ that resizing the inner our outer divs will still keep it centered.

Upvotes: 1

Expert
Expert

Reputation: 1

for fixed-size fits example http://jsfiddle.net/expert/vh2vy/5/

Upvotes: 0

kieran
kieran

Reputation: 2312

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

Upvotes: 4

Related Questions