Assigned width in percentage but want to get it in pixels

.width() gets "...the current computed width" of the element that is used on, per the jQuery width documentation: http://api.jquery.com/width/, so the return value from $('#heatMapBar').width() is in pixels, not percent. I would suggest using developers tool to check the width, it may be that in #heatMapBar's current context, its width is 100px.

If you look here: http://jsfiddle.net/NkQXa/1/ you will see that #test is set to width:50%;, but it alerts the actual pixel width.

There can be a problem with multiple divs having percentage width:

<div style="width: 50%">
<div id="getMyWidth" style="width: 100%"></div>
</div>

In this case it returns 100 as width for the inner div for me. I solved it by taking the width of the outer div.

One of options can be too, that parent element is not visible. Here is example: http://jsfiddle.net/nDMM3/

You can see, that jQuery return width = 100 (like 100%)

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>   

 alert($('#test2').width());

Another solution without jquery is to use the property clientWidth available on HTMLElements

document.getElementById('test1').clientWidth