javascript - x and y position finder JQuery JS -

i have script should find x , y position. can find x position without problem y position appears infinity, , can not figure out why. here script

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script language"javascript" type"text/javascript">  $(document).ready(function(){   $(".view_parent_furnace_boiler").droppable(); });      $(document).ready(function() {     $(".device-container").draggable(       {       grid: [10, 10],         containment: "#picture_container",         revert: 'invalid',          stop: function(){ ($(".door").height() / 100)+"%");              var elementname = $(this).attr('name');             console.log(elementname);             var elementid = $(this).attr('id');             elementid = elementid.split(",");             var parent = $(this).parent();        /*finding x , y position percentage based on container*/             var yposition = parseint($(this).css('top'))/parent.height()*100;             var xposition = parseint($(this).css('left'))/parent.width()*100;             console.log(xposition); //displays without anyproblem             console.log(yposition); //does not work (infinity             /*assigning div id variable further display , debugging purpose*/             (var k = 0; k < elementid.length; k++) {                 var device_id = elementid[0];                 var command   = elementid[1];                 var map_id    = elementid[2];             }              /*assigining values variables*/              $('#'+elementname+'-device_id').val(device_id);             $('#'+elementname+'-command').val(command);             $('#'+elementname+'-map_id').val(map_id);             $('#'+elementname+'-x_position').val(xposition);             $('#'+elementname+'-y_position').val(yposition);          },         revert: 'invalid'     }); });  </script> 

here css

<style type="text/css"> /* display boiler background picture*/ .view_parent_furnace_boiler {  position: relative;   background-position: relative;   max-width: 100%;   max-height: 100%;   padding: 0em;   margin: 0em;   border-image-width: 5% 2em 10% auto;   border: 3px solid #ccc;   background:radial-gradient(circle, black, white); } .view_parent_furnace_boiler img {   max-width: auto;   max-height: auto; } .view_parent_furnace_boiler span {   color: #000; } .btn-inhibited{   background-color:#aaa;   color:white; } .device-container {   position: absolute;  /*could relative*/   cursor: move;  } </style> 

try using jquery $(this).offset().top or $(this).position().top instead of $(this).css('top').

https://api.jquery.com/position/

https://api.jquery.com/offset/