3

I need to receive the elements left and top property in the middle of the CSS transition. Currently I use jQuery position method and it seem to be working to some point.

I have made 2 examples to show my problem more clearly:

1) Here is NON-working example where position of element is printed to console. The correct position is received till the elements transition is changed to its original position. After the first change in transform value, the position is not updated anymore. jsFiddle link: http://jsfiddle.net/PCWDa/8/

2) Here is WORKING example with only difference in the way position of the element is reported to us: position is outed to input (type=text) elements value. jsFiddle link: http://jsfiddle.net/PCWDa/9/

Conclusion: the jQuerys position() method appears not to receive the correct position when dom elements properties does not receive any updates (like updating value of text element etc).

Bug? This could be bug in jQuery, css or browser itself? Are there any workarounds to get first example working - to get correct position in the middle of transition at any time without making changes to dom element properties like in second example.

jsFiddle code:

To get example 1 code, change variable working to false and to get example 2 , to true.

css

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-transition: all 5000ms ease;
}
.box_moved{
    -webkit-transform: translateX(300px);
}

html

<div class="box"></div>
<input type="text" class="val">

javascript

var direction = false;
var working = false; 

window.forward = function(){$('.box').addClass('box_moved')}
window.backward = function(){$('.box').removeClass('box_moved')}

window.swap = function(){
if( direction = !direction )
        forward()
    else
        backward();
}

window.getlocation = function(){
    if(working)
        $('.val').val( $('.box').position().left );
    else
        console.log($('.box').position().left);
    }

window.setInterval("swap()",3000);
window.setInterval("getlocation()",200);
Tauri28
  • 839
  • 1
  • 18
  • 29
  • Problem here: `if( direction = !direction )`. Has to be a comparison not an assignment. Warning here `window.setInterval("swap()",3000);`. You're triggering `eval`, use function as reference, not as string. – elclanrs Apr 24 '13 at 08:08
  • Did you even read my post before commenting? The point is not in example code but how to get correct position and for the record, my example code is fine. if( direction = !direction ) is comparison AND assignment. – Tauri28 Apr 24 '13 at 08:12
  • Mmmm, that code just feels messy IMO. It's up to you to make it clearer and get people interested in answering. That `if` statement looks like a mistake and the `eval` issue is there... – elclanrs Apr 24 '13 at 08:18
  • It might be your use of `translateX` ; when using `position: absolute` with the `left` property, it does seem to work ([JSFiddle](http://jsfiddle.net/PCWDa/10/)). – MarcoK Apr 24 '13 at 08:26
  • @elclanrs The code is correct and clear enough. I can pass string as first parameter of setInterval method although it is not recommended but it is good enough for example code. If statement might look like a mistake to you but it is not - you can only blame your lack of knowledge in javascript syntax. – Tauri28 Apr 24 '13 at 08:30
  • @MarcoK Interesting observation. I will study it more throughally. – Tauri28 Apr 24 '13 at 08:36
  • 1
    Check here, this seems to be related: http://stackoverflow.com/questions/9016307/force-reflow-in-css-transitions-in-bootstrap – elclanrs Apr 24 '13 at 08:42
  • @elclanrs This seems to be on topic. I found [this](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/) page through the link you gave me and for now I managed to come up with solution shown in [here](http://jsfiddle.net/PCWDa/12/). I call ` $('.box').css('visibility' , 'hidden').css('visibility' , 'visible');` every time before I try to get position of element. – Tauri28 Apr 24 '13 at 09:08

0 Answers0