jquerycssgoogle-chromejquery-datajquery-attributes

Picking and calling original css with data() and attr() works in Firefox, but not in Opera and Chrome?

I want to be able to reset draggable div to it's original position after dragging (jquery ui draggable()) on some event in jquery. I did this:

$('#nav').draggable();

$('#nav').data({'x': $("#nav").css('left'), 'y': $("#nav").css('top')});

$("#c").click(function () {
    $('#nav').animate({'left': parseInt($("#nav").data('x')) - 15, 'top': parseInt($("#nav").data('y')) - 14}, {duration : 500});
});

and it works even in older Firefox but not in newest Opera and Chrome. I tried to replace data() with attr() and it's still the same.

How can this be achieved in a more cross-browser manner?

edit: here is this code in action: http://jsfiddle.net/MVCA6/

Solution

  • In chrome i HAve seen result using 

    console.log($("#nav").data('x'));

    It return auto;

    In mozilla it gives

    447px

    Possibly this may be the reason why it is not working in chrome.But if you assign left and top property in #nav in css as

    left:447px;top:352px

    It works fine. SEE DEMO HERE

    For more detail you can also take help from HERE