изменение размера и центрирование фиксированной позиции div с помощью jquery - PullRequest
Новая
       10

изменение размера и центрирование фиксированной позиции div с помощью jquery

1 голос
/ 02 мая 2011

У меня есть фиксированная позиция div с фиксированной высотой / шириной.

div позиционируется с использованием

position: fixed;

left = 50%;поле слева = - (ширина / 2) вершина = 50%;margin-top: = - (ширина / 2)

Элемент div имеет черный фон.

Что я хочу сделать, это при нажатии кнопки рассчитать размер нового содержимого (скрытый элемент dom)

Исчезает содержимое элемента div, анимирует его изменение размера до нового размера содержимого (оставаясь в центре).

Добавляет новое содержимое в.

Какой самый простой способ сделать это с помощью jQuery?

Ответы [ 2 ]

0 голосов
/ 02 мая 2011

Попробуйте: http://jsfiddle.net/EpzDM/

Это работает, но я не сомневаюсь, что JavaScript можно улучшить.

JavaScript: 

var $box = $('#box');
var $boxInner = $box.find(' > div');

var fixIt = function() {
    var newWidth = 300;
    var newHeight = 150;

    $boxInner.fadeOut(function() {
        $box.animate({
            marginLeft: -newWidth/2,
            marginTop: -newHeight/2,
            width: newWidth,
            height: newHeight
        }, 500, function() {
            $boxInner.fadeIn();
        });
    });
};

$(window).resize(function() {
    $box.css({
        marginLeft: -$box.width()/2,
        marginTop: -$box.height()/2
    });
}).resize();

$('<button>Clicky!</button>').appendTo(document.body).click(fixIt).css({
    position: 'fixed',
    top: 0,
    left: 0
});

CSS: 

#box {
    width: 200px;
    height: 100px;
    background: #ccc;
    position: fixed;
    left: 50%;
    top: 50%
}

HTML: 

<div id="box">
    <div>
        <p>Contents of div</p>
        <p>Contents of div</p>
        <p>Contents of div</p>
    </div>
</div>
0 голосов
/ 02 мая 2011

Вы можете сделать это также 

this=$('#yourDiv');

    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");

Это из одного из моих приложений, попробуйте и он должен центрироваться

рефакторинг, если вам нужна какая-либо настройка. 

function centerPopup() {

    var windowWidth = document.body.clientWidth;
    var windowHeight = document.body.clientHeight;
    var popupHeight = $('#popupplaceholder').height();
    var popupWidth = $('#popupplaceholder').width();
        if (popupWidth > windowWidth) {
        popupWidth = (windowWidth) * (0.9);
    }
    if (popupHeight > windowHeight) {
        popupHeight = (windowHeight) * (0.9);
    }
    //centering
    var objControl = document.getElementById("yourDIV");
    if (objControl != null) {
        if (objControl.offsetParent != null) {
            var left = (objControl.offsetParent.clientWidth / 2) - (objControl.clientWidth / 2) + objControl.offsetParent.scrollLeft;
            var top = (objControl.offsetParent.clientHeight / 2) - (objControl.clientHeight / 2) + objControl.offsetParent.scrollTop;
            $('#yourDIV').css({
                "position": "absolute",
                "top": top,
                "left": left
            });
        }
    }
}
...