Jquery: программно центрировать элементы - PullRequest
Новая
       14

Jquery: программно центрировать элементы

2 голосов
/ 25 января 2011

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

Я пытаюсь сделать функцию центрирования вещей родовой, чтобы мне не приходилось переписывать центрирующий фрагмент кода.

Что бы вы сделали, чтобы упростить центрирование, С JQUERY. 

$('p').hoverIntent(function () {
    var myObject = $('#bThis')
    var Ctop = $(this).offset().top + ($(this).height() / 2) - (myObject.outerHeight() / 2)     
    var Cleft = $(this).offset().left + ($(this).width() / 2) - (myObject.outerWidth() / 2)     

    if ($('#placeB').hasClass('place')) {    
        $(this).animate({color: "#999999", backgroundColor: "#f5f5f5"}, 400)
        $('#bThis').css({'left':Cleft, 'top':Ctop}).fadeIn(200)
    }

}, function() {
        $(this).stop().animate({color: "#333", backgroundColor: "#fff"}, 200)
        $('#bThis').fadeOut(200)
});

1 Ответ

2 голосов
/ 25 января 2011

EDIT:

См. Рабочий пример здесь . 

<div id="container">
    <div id="element">
        &nbsp;
    </div>
</div>

 <style>
  #container{
    height:100px;
    width:100px;
    border:1px solid #000;
    background:#EEE;
    position:relative;
  }
  #element{
    height:50px;
    width:50px;
    border:1px solid #000;
    background:#333;
    position:relative;
  }
<style>

<script>
  function centerDiv(element, xPosFromCenter, yPosFromCenter){

    var xPos = parseInt(element.parent().css('width'))/2 -parseInt(element.css('width'))/2 - xPosFromCenter;

    var yPos = parseInt(element.parent().css('height'))/2 -parseInt(element.css('height'))/2 - yPosFromCenter;


    element.css({top: yPos, left:xPos});
  }

  $().ready(function(){
    centerDiv($('#element'), 0, 0);        
  });
<script>

Конец редактирования

Что ж, разве делегирование работы "центрирования" собственной функции не поможет? 

function centerDiv(element, parent){
  var Ctop = $(element).offset().top + ($(element).height() / 2) - (parent.outerHeight() / 2)
  var Cleft = $(element).offset().left + ($(element).width() / 2) - (parent.outerWidth() / 2) 

return {ctop: Ctop, cleft:Cleft};
}

В вашей вызывающей функции .. 

.
.
.
var obj = centerDiv($(this), $('#bThis'));
$('#bThis').css({'left':obj.cleft, 'top':obj.ctop}).fadeIn(200);
.
.
.
...