Don E Posted April 15, 2016 Share Posted April 15, 2016 Hello, I am trying to understand the following code that's in the link below as to how to calculate the new Top position of an element that's been rotated with CSS.. Please see this link to get a better picture of what I am referring to: http://jsfiddle.net/Y8d6k/ I can't seem to find where in the code, mostly jQuery(not too familiar) the actual caculation is taking place? This is where I got the jsfiddle link form: http://stackoverflow.com/questions/11229040/how-to-get-the-position-of-element-transformed-with-css-rotate Thank you in advance! Link to comment Share on other sites More sharing options...
musicman Posted April 15, 2016 Share Posted April 15, 2016 (edited) Hi, The getPositionData is a function to store an element data of its dimension and offset. A function has been added to #slider so when #slider value has changed, it will get a value and then set the rotation CSS with this value as angle. It will also get the rotated element new data with getPositionData() and display the data (top, left and slider value). The last lines are to store first (original) element's data and display the data. Personally I think the script is too complex (?) could be more simpler. Does it "calculate" the new position? when the element rotated, does it just display the new top value with elem.top? the elem.top is to show element distance from the top limit of the page. and as for the 'position', the calculation should start with parametric equation to find element's corner (x,y) coordinate? Edited April 15, 2016 by musicman Link to comment Share on other sites More sharing options...
justsomeguy Posted April 15, 2016 Share Posted April 15, 2016 It looks like that code gets the top position from jQuery's offset function. Link to comment Share on other sites More sharing options...
Don E Posted April 15, 2016 Author Share Posted April 15, 2016 Yes after looking into the offset function at jQuery docs, it does get the new top position from the offset function. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now