JQuery UI - Why Pixel ? Why not Percentage ?

JQuery UI - Why Pixel ? Why not Percentage ?

<div dir="ltr">I am working on code where I want to zoom my div-slides , I am able to do this because i am using "percentage" in width , height , font etc style attributes.
But if I try to resize the element using JQuery UI resizable class then it disturb the "percentage" and put pixel over it.
Same thing occur with draggble and other which put final output in "pixel" format.
I would be better if you make all UI component as percentage format.
however I got the workaround to the problem,,
one can add these stop function like
<span style="font-family: courier new,monospace;">$("#div_box_id_").resizable({ </span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> handles: "all", </span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> stop: function (){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></span><span style="font-family: courier new,monospace;">  var w = ( 100 * parseFloat($(this).css("width")) / parseFloat($(this).parent().css("width")) )+ "%" ;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var h = ( 100 * parseFloat($(this).css("height")) / parseFloat($(this).parent().css("height")) )+ "%" ;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $(this).css("width" , w);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).css("height" , h);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> },</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> dragHandle: true</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"></span><span style="font-family: courier new,monospace;">});</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">$("#div_box_id_" + self.div_box_number).draggable({ </span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> opacity: 0.70,</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> stop: function (){</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $(this).css("left" , l);</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).css("top" , t);</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">});</span><br style="font-family: courier new,monospace;"><br style="font-family: courier new,monospace;" clear="all">
Any suggestions ??
--
┌───[ Narendra Sisodiya ]──────────────┐
│     <a href="http://narendra.techfandu.org">http://narendra.techfandu.org</a>
│     <a href="http://www.lug-iitd.org">http://www.lug-iitd.org</a>
└────────────[ +91-93790-75930 ]──────┘
</div>