Get item's position after expanded on click

[babyPrince]

Test case: https://codepen.io/winteriscoming/pen/MEeReo

I'm working on following the expanded on click grid-item, which works fine with a small exception.

After click, the page scrolls properly to the expanded item if it doesn't go on a new row, and if it goes to a new row, the page scrolls to the original position (before click), but the item is actually with a new position.

My question is, how to follow the item after it moves to a new position.

[desandro]

Thanks for reporting this issue. You can get the position if the item within the grid by using Packery's internal Item API. It isn't documented, so its okay that you missed this.

$grid.on( 'click', '.grid-item', function( event ) {
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  $grid.packery('layout');
  // get Packery item from clicked element
  var item = $grid.packery( 'getItem', event.currentTarget );
  // use item position
  $htmlBody.animate({
        scrollTop: gridOffset.top + item.position.y,
        scrollLeft: gridOffset.top + item.position.x
    });
});

See demo https://codepen.io/desandro/pen/72b19dec02e7a4c6617536142ce037e1/

The North remembers!

Also, I recommend taking a look at Fizzy School - lessons in JavaScript for anyone writing jQuery

[babyPrince]

This is great, thank you!

http://www.ascii-art.de/ascii/ab/beer.txt