Set value shows two decimal places

Question

EDIT: reading more about subpixel rendering, I learned that CSS values which result in decimal or partial pixel values are not "browser-friendly". Therefore, values should be set to have decimal places!

I am calculating the width of my parent element (.container) through summing the width of all child elements (.project). So far I tried this, but it doesn't work. Can anybody help me out?

For example: when I have five child elements at which each has a width of 363.667px I would like to get a width of 364px.

HTML Markup

<div class="container">
    <ul id="projects">
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="project"></li>
        <li class="clear"></li>
    </ul>
</div>

jQuery

$(window).on( "resize", function () {
    var width = ( $(window).width() / 3 );
    $(".project").css({ width : width.toFixed() });

    var sum = 0;
    $("#projects .project").each( function(){ sum += $(this).width(); });
    $(".container").width( sum );
}).resize();

[Good article on sub-pixel rendering](http://ejohn.org/blog/sub-pixel-problems-in-css/). Why aren't you using CSS? `.project { width: 20%; }` — CodingIntrigue, Aug 21 '14 at 07:03
I would like to have a width of 33.33% for each child element. I felt that jQuery is the more "accurate" solution. However, reading the article make me wondering if this is a basic problem? Should I simply use numbers without decimal places to avoid bugs? — didi, Aug 21 '14 at 07:09

score 0 · Answer 1 · edited Aug 21 '14 at 07:37

0

can you replace:

$(window).width(), $(this).width(),

with hard code value and redo a test to see if this is the value you expected,

.width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("width") rather than .width().

edited Aug 21 '14 at 07:37

Egor Neliuba

14,784
7
59
77

answered Aug 21 '14 at 07:26

huan feng

7,307
2
32
56

Tried this but it doesn't solve the problem. However, I still found the answer - subpixel rendering. – didi Aug 21 '14 at 07:34

Set value shows two decimal places

1 Answers1