I am currently utilizing Jquery Transit and Masonry JS within my project. Within a specific div, there is a button which, when clicked, is intended to change the container's position to fixed and center it on the screen using Jquery Transit. However, upon clicking the button, the container instead moves to the bottom right corner of the screen.
If you'd like to observe the issue firsthand, please refer to this jsfiddle link.
Here is the relevant javascript code snippet:
WebFont.load({
google: { families: [ 'Signika:400,700:latin', 'Open+Sans::latin', 'Hammersmith+One::latin' ]},
active: triggerMasonry,
inactive: triggerMasonry
});
var $container;
function triggerMasonry() {
// Only proceed if $container has been selected
if ( !$container ) {
return;
}
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.p-small',
"columnWidth": '.grid-size',
gutter:10
});
});
}
// Trigger masonry once document is 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();
});