Jquery Move Div to Center of Screen (Masonry JS)

Question

I am using Jquery Transit and Masonry JS. There is a button in my div that, when clicked on, should change the containers position to fixed and move it to the center of the screen (using Jquery Transit).However, on click, the box moves to the bottom right of the screen.

You can view the jsfiddle to see my issue.

The 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();
    });

Seems like it works properly. But in your current implementation you move top left corner of container to the center of the screen. That is why you may think that it is not working. You want to move center of container to center of the screen? — Yevgeniy.Chernobrivets, Jan 25 '14 at 14:37
@Yevgeniy.Chernobrivets Yeah, but that's not working out. It still is off center when I try it out — Iohannes, Jan 25 '14 at 14:40
@Yevgeniy.Chernobrivets Yup, works almost exactly how I want it. Some of the containers are a little to the right, but that's fine. Thanks! — Iohannes, Jan 25 '14 at 14:45

score 1 · Accepted Answer · answered Jan 25 '14 at 14:49

The problem is that you are moving top left corner of the container to the center not center of the container. That is why you may think that it is not centered. To move center of the container you need to compensate half of width and half of height of container.

$(".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});
});

You can view this fiddle to check the result.

Jquery Move Div to Center of Screen (Masonry JS)

1 Answers1