JQuery Rotate and Isotope

JavaScript
1

Hi there,

I’ve been playing around with a JQuery plugin called Isotope which can be used to filter, sort and generally arrange objects according to your liking as well as a huge range of other things. So, I decided I would add a little of my own code which would rotate the object on mouseover and then return it to its original position.

Problem is, when you first load the page the objects stack on top of each other which pins it down to a positioning conflict. Next when you resize the window the objects jump back into uniform place again. However, on mouseover of any of the objects they will again (slowly due to a transform of 0.6s) stack upon one another.

I understand that there is a conflict between my code and the Isotope plugin since it essentially works off the same logic, using positioning to figure out where each object is currently and then acting accordingly. But…how to fix it so that I can still have my rotate function alongside the isotope plugin?

One clue may come from the fact that on load the Isotope plugin sets each object to “left:0; top:0;” via the style property on each element but other than that I’m stumped!

http://www.andrewcourtney.co.uk/demoenvironment/isotope/test.html

Any thoughts?

Cheers,

Shoxt3r

2

Perhaps the simplest solution would be to simply apply the transform within the CSS with a :hover state on the element? Since I’m at work at the moment I can’t try this out but will give it a go later. Any thoughts as to whether that would work or not though? :slight_smile:

3

Well I can confirm it doesn’t work :frowning: Seems that the code overrides the transform because of all of the other effects it does. Even adding a left and top of 0px doesn’t solve things as it fights against the code and glitches…hmm.

Any ideas how to combat this?