центр по изменению размера тоже - PullRequest
Новая
       13

центр по изменению размера тоже

0 голосов
/ 12 апреля 2011

Это работает: 

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

.. но элемент остается в том же положении, если окно изменено, как мне его центрировать с изменением размера?

Спасибо

Ответы [ 2 ]

1 голос
/ 12 апреля 2011

Вам необходимо выполнить этот код в событии window resize . Но если размер браузера будет изменен, это событие будет огромным! Так что, в общем, неплохо создать небольшого «балансировщика». 

$(window).bind('resize', function() {
    var that = this;        

    if(!('balancer' in that) ) {
        that.balancer = setTimeout(function() {
            $('#container').center();
            delete that.balancer;
        }, 200);
    }
});

Это будет поглощать многие события, которые запускаются при изменении размера окна браузера. На самом деле, он только вызывает .center() максимум 200 мс. Возможно, вам даже следует увеличить это значение и кэшировать ссылку на узел на элемент #container.

0 голосов
/ 12 апреля 2011

РЕДАКТИРОВАТЬ ::

в процентах top и left можно поместить в центр.но это плохо ... действительно очень плохо. 

    $.fn.center = function () {
        $(this).css({'position': 'absolute',
                     'top': '40%',
                     'left': '40%'
                    });
    };

    $(function (){
        $('#container').center();
    })

Вкл. jsfiddle .

...