центральный объект с переменной шириной, используя jQuery - PullRequest
Новая
       32

центральный объект с переменной шириной, используя jQuery

3 голосов
/ 17 июня 2011

Необходимо центрировать объект, ширина которого изменяется в зависимости от окна браузера. Обычно я бы использовал css с верхним и левым положением, равным 50%, с отрицательным полем, равным половине ширины и высоты, но, очевидно, это не соответствовало бы этой потребности.

Я думал, что моя функция jQuery будет работать ... но не bueno. я что-то упустил в CSS?

Спасибо!

http://jsfiddle.net/danielredwood/EbkLg/2/

Вот CSS 

#t {
        width:25%;
        height:25%; 
        background:red;
    }

JavaScript 

$(window).resize(function(){
     resizenow();
});
function resizenow() {
    var browserwidth = $(window).width();
    var browserheight = $(window).height();
    $('#t').css('left', (browserwidth - $(this).width())/2).css('top', (browserheight - $(this).height())/2);
});

Ответы [ 6 ]

2 голосов
/ 17 июня 2011

В вашем JSFiddle, который вы связали, вы используете $(this).width(): 

$('#t').css('left', ((browserwidth - $(this).width())/2))
.css('top', ((browserheight - $(this).height())/2));

Но когда вызывается функция resizenow (), this == window.Если вы замените $(this) на $("#t"), то все будет работать нормально, так как этот JSFiddle показывает: http://jsfiddle.net/jackfranklin/F2tR3/1/

В функции css() jQuery значение this не установлено для элемента, для которогостиль (ы), который вы меняете, поэтому ваш исходный код не работает.

2 голосов
/ 17 июня 2011

Как-то так? 

 $(document).ready(function(){  

var browserwidth = $(window).width();
var browserheight = $(window).height();
var x=browserwidth/4;
$('#t').css({'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2  + 'px'});

$(window).resize(function(){

  var browserwidth = $(window).width();
  var x=browserwidth/4;
  var browserheight = $(window).height();

   $('#t').css({'width' : x, 'height' : x,  'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2  + 'px'});
   });


#t {
width: 500px;
height: 500px;
position: relative;
    background:red;
 }


               });

Или, если вы не хотите, чтобы это был квадрат, просто не устанавливайте ширину и высоту в jquery, используйте процент в css.

1 голос
/ 17 июня 2011

Это способ анализа значения левого и верхнего значений, которые вы пытаетесь установить. Если вы сломаете их так, это сработает: 

var widthDelta = $(window).width() - $('#t').width();
var heightDelta = $(window).height() - $('#t').height();
$('#t').css('left', widthDelta / 2).css('top', heightDelta / 2);

Я не проанализировал, что именно пошло не так, - я просто искал что-то, что сработало первым - мне придется взглянуть на это поближе, чтобы понять, в чем конкретно проблема.

1 голос
/ 17 июня 2011

jQuery width() и height() возвращает значение пикселя без единицы измерения в соответствии с документацией jQuery .

Но когда вы подключаете его обратно к расчету для jQuery css(), вам нужно добавить метку единиц измерения «px».

EDIT:

Если ваши расчеты основаны на процентах, то все неправильно, поскольку width() и height() являются значениями пикселей. В любом случае вам все равно нужно добавить единицы измерения: «px» или «%» в jQuery css().

.

EDIT2:

css(), по-видимому, по умолчанию использует пиксели, но если OP использует проценты, то потребуется '%'.

0 голосов
/ 17 июня 2011

Это будет горизонтальное центрирование красного div, и его ширина и высота будут динамически изменяться в зависимости от размера окна браузера; 

<div style="position:absolute;display:block;left:0;right:0;top:0;bottom:0;">
<div style="width:25%;height:25%;background:red;display:block;margin:auto;"></div>
</div>

Теперь вертикальное центрирование - немного более сложная история ...

0 голосов
/ 17 июня 2011

Попробуйте добавить положение: исправлено в вашем CSS.Это будет означать, что любое положение, которое вы укажете для элемента, будет относиться к фактическому окну, а не к документу.

Не уверен, что это исправит это, но должно.

...