CODEWITHSUNDEEP
jqueryjquery-masonryjquery-isotope
Emmett
Emmett

Reputation: 14327

Keep element in the same position after resizing it using jQuery Isotope

I'm planning to use the jQuery Isotope plugin similarly to the official "Elements Complete" Isotope demo, in which clicking on any element makes it larger.

In the demo, when an element expands, it generally expands down and to the right (i.e. anchored by its top left corner). But click on any element in the two rightmost columns: it floats down and all the way to the left, since there isn't any room for it to expand rightward.

Ideally, for my application, an element on the right would expand to the left when clicked, thus staying in approximately the same position.

Basically, I'm looking for suggestions on how to optimize for maintaining element position after a reLayout. (Maintaining the order of elements isn't important for my application.)

Upvotes: 4

Views: 1029

Answers (1)

Graham Morley
Graham Morley

Reputation: 450

Give each element a number, and sort by number. If the page is 10 elements wide, 8 9 and 10 would wrap around. when one is clicked to resize, give it the number 7 and resort by number.

Let's say you took 10 and made it a 7, then sorted by number, now you'd have 1 2 3 4 5 6 7 7BIG 8 9 on a row

As far as I know, you can't cause jquery to resize to the left, rather than the right, unless you hack it with css padding or something like that..

Good luck

Upvotes: 1

Related Questions