JQuery Move Div в центр экрана (масонство JS)

Я использую JQuery Transit и Masonry JS. В моем элементе есть кнопка, которая при нажатии на нее должна изменить позицию контейнера на фиксированную и переместить ее в центр экрана (используя JQuery Transit). Однако, при щелчке, окно перемещается в нижнюю правую часть экрана ,JQuery Move Div в центр экрана (масонство JS)

Вы можете просмотреть jsfiddle, чтобы увидеть мою проблему.

Javascript:

WebFont.load({ 
    google: { families: [ 'Signika:400,700:latin', 'Open+Sans::latin', 'Hammersmith+One::latin' ]}, 
    active: triggerMasonry, 
    inactive: triggerMasonry 
    }); 
var $container; 

function triggerMasonry() { 
    // don't proceed if $container has not been selected 
    if (!$container) { 
    return; 
    } 
    //Joocy 
    // init Masonry 
$container.imagesLoaded(function() { 
    $container.masonry({ 
    itemSelector: '.p-small', 
    "columnWidth": '.grid-size', 
    gutter:10 
    }); 
    }); 
} 

// trigger masonry on document ready 
    $container = $('#omni-content'); 
    triggerMasonry(); 
    var $cards = $('.p-small'); 
    var cardInFocus = null; 

    $cards.each(function(index, elem){ 
     var $elem = $(elem); 
     var pos = $elem.position(); 
     $(elem).data('orig-x', pos.left); 
     $(elem).data('orig-y', pos.top); 
    }); 

    var reset = function(){ 
     if(cardInFocus){ 
      $(cardInFocus).transition({x:0,y:0});}  
    }; 

    $(".o-help").click(function(e) { 
     cardInFocus = $(this).closest(".p-small"); 
     var $doc = $(document); 
     var centerX = $doc.width()/2; 
     var centerY = $doc.height()/2; 
     var $card = $(this).closest(".p-small"); 
     var widthcard = $card.width(); 
     $(".explain").css('position','fixed'); 
     $(".explain").css('width', widthcard); 
     $card.addClass('explain'); 
     var origX = $card.data('orig-x'); 
     var origY = $card.data('orig-y'); 
     $(".modal-bg").fadeIn("slow"); 
     $(this).closest(".p-small").transition({x:centerX - origX,y:centerY-origY, duration:750}); 
    }); 

    $cards.blur(function(e){ 
     reset(); 
    });

источник

2014-01-25 Iohannes

Кажется, что он работает правильно. Но в вашей текущей реализации вы перемещаете верхний левый угол контейнера в центр экрана. Вот почему вы можете думать, что он не работает. Вы хотите переместить центр контейнера в центр экрана? –

@ Евгений.Чернобривец Да, но это не работает. Он все еще не в центре, когда я его пробую – Iohannes

Это то, что вы хотите http://jsfiddle.net/JS6dX/2/? –

Проблема заключается в том, что вы движетесь левый верхний угол контейнера в центр не в центре контейнера. Вот почему вы можете думать, что оно не сосредоточено. Чтобы переместить центр контейнера, вам необходимо компенсировать половину ширины и половины высоты контейнера.

$(".o-help").click(function(e) { 
    cardInFocus = $(this).closest(".p-small"); 
    var $doc = $(document); 
    var centerX = $doc.width()/2; 
    var centerY = $doc.height()/2; 
    var destX = centerX - cardInFocus.width()/2; 
    var destY = centerY - cardInFocus.height()/2; 
    var $card = $(this).closest(".p-small"); 
    var widthcard = $card.width(); 
    $(".explain").css('position','fixed'); 
    $(".explain").css('width', widthcard); 
    $card.addClass('explain'); 
    var origX = $card.data('orig-x'); 
    var origY = $card.data('orig-y'); 
    $(".modal-bg").fadeIn("slow"); 
    $(this).closest(".p-small").transition({x:destX - origX,y:destY-origY, duration:750}); 
});

Вы можете просмотреть this fiddle проверить результат.

источник

2014-01-25 14:49:54

JQuery Move Div в центр экрана (масонство JS)

ответ

Смежные вопросы