how can get div position Based on the percentage?

Question

whit this code you can get position a div based on pixel.

$('#div').position();

but how can give div position Based on the percentage?

Answer 1

Use window size.

var position = $('#div').position();
var percentLeft = position.left/$(window).width() * 100;
var percentTop = position.top/$(window).height() *100;

This code will give you the position percentage for the top and left sides.

Answer 2

This extends jQuery with a 'getWidthInPercent' function:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = (
                        parseFloat($(this).css('width'))
                    +   parseFloat($(this).css('padding-right'))    
                    +   parseFloat($(this).css('padding-left')) 
                    ) / parseFloat($(this).parent().css('width'));
        return Math.round(100*width);
    };

})(jQuery);

Used as:

$('#element').getWidthInPercent() ;

Answer 3

jQuery position() :

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

It is not used to set the position. If you want to set the position (in percentage or otherwise) you need to use .css() to change its margin (or top, left), etc..

Answer 4

I think you mean "get" instead of "give". You'd have to calculate the percentage unless it is in the CSS already.

You can always experiment.

#d {
    position: absolute;
    left: 33%;
    top: 50px;
    background-color: red;
    width: 100px; height: 100px;
}

<div id="d"></div>

alert($("#d").position().left + " " + $("#d").position().top);
alert($("#d").css("left") + " " + $("#d").css("top"));
var pcLeft = 100 * $("#d").position().left / $(window).width();
var pcTop = 100 * $("#d").position().top / $(window).width();
alert(pcLeft + " " + pcTop);

Answer 5

This solution has solved bug which @naziiiii was getting and also might help this question. check the below given link

$(function(){
 var percentLeft = '';
var percentTop = '';
   var percentLeft2 = '';
    var percentTop2 = '';

    $( "#div1" ).draggable({ 
        containment : '#container',
        tolerance: 'touch',
        stop:function(event, info){
            var position = $(this).position();
            percentLeft =  position.left/$('#container').width() * 100;
            percentTop =  position.top/$('#container').height() *100;       
        }
    });        
       $( "#div2" ).draggable({ 
        containment : '#container',
        tolerance: 'touch',
        stop:function(event, info){
            var position2 = $(this).position();
            percentLeft2 = position2.left/$('#container').width() * 100;
            percentTop2 =  position2.top/$('#container').height() *100;                             
        }
    });

   function wResize() {

         var winW = $('#container').width();
         var d = $('#div1').position();
    var d2 = $('#div2').position();      

         $('#div1').css({color:'green',
                        position: 'absolute',
                        left: percentLeft + '%',
                        top: percentTop + '%'
                        }); 
          $('#div2').css({color:'red',
                        position: 'absolute',
                        left: percentLeft2 + '%',
                        top: percentTop2 + '%'
                        });
        //$('#test2').html(percentLeft+ ' _____ '+ percentTop + 'winW : ' + winW);  
 }

 wResize();

$(window).resize(function() {
    wResize();
});
});    

http://jsfiddle.net/komal10041992/q74vxcxf/