jQuery Isotope center expanded element

Asked Jun 04 '13 at 16:33

Active Jun 04 '13 at 18:23

Viewed 204 times

I am using Isotope to layout a grid of blocks using the 'masonryHorizontal' layout mode. On click the selected box expands and re-adjusts the layout. What I want is to scroll the window so the expanded box is centered in the window horizontally. I have this working so that it scrolls to the expanded box, but it's not centered horizontally.

In my click function, I have the following:

setTimeout(function() {
var itemPosition = $this.parent().data('isotope-item-position');
    $('#page').scrollTo({ top:itemPosition.y, left:itemPosition.x}, 500);
}, 800);

I know I have to adjust the itemPosition.x, but can't seem to calculate the correct center. Any help is appreciated.

Edit: Here is a screenshot to reference

Need to center the expanded block

edited Jun 04 '13 at 18:23

asked Jun 04 '13 at 16:33

downtomike

maybe you use css to make $('#page') center, and just scrollTo({ top:itemPosition.y}). – Stiger Jun 04 '13 at 17:14
I'm not sure what you mean. I don't think CSS alone will take care of this. – downtomike Jun 04 '13 at 18:24
last night, i thinks your website just scroll up and down, but it seems not like that. Can you make a fiddle? – Stiger Jun 05 '13 at 02:03

jQuery Isotope center expanded element

0 Answers0