JQuery устанавливает элемент в середине другого - PullRequest
Новая
       7

JQuery устанавливает элемент в середине другого

2 голосов
/ 30 января 2012

Привет, у меня есть несколько таких элементов: 

<div id="one">content</div>
<div id="two">content</div>

и соответствующее количество элементов (без родителя, они идут сразу после тега body), которые имеют: 

position: absolute;

и с таким идентификатором: 

id="helper-one" refers to id="one"

Теперь я хочу разместить вторую группу элементов точно в середине (по вертикали и по горизонтали) указанных элементов, как я могу это сделать?

Я пытался со смещением: 

    var one_offset = $("#one").offset();

    $("#helper-one").offset({ top: one_offset.top, right: one_offset.right, left:one_offset.left, bottom: one_offset.bottom})

, но он устанавливал положение только для верхнего и левого расположения позиционирования помощника в верхнем левом углу элемента, а не в его центре

1 Ответ

4 голосов
/ 30 января 2012 
jQuery.fn.center = function (obj) {
  var loc = obj.offset();
  this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
  this.css("left",(obj.outerWidth() - this.outerWidth())  / 2 + loc.left+ 'px');
  return this;
}

Звоните как $("#helper-one").center($("#one"));

ps: вы даже можете пропустить аргумент obj, проанализировав id исходного элемента 

jQuery.fn.center = function () {
  var obj = $('#' + this.attr('id').split('-')[1]), loc = obj.offset();
  this.css("top",(obj.outerHeight() - this.outerHeight()) / 2 + loc.top + 'px');
  this.css("left",(obj.outerWidth() - this.outerWidth())  / 2 + loc.left+ 'px');
  return this;
}

$(document).ready(function(){
   $("#helper-one").center();       
});
...