jquery / javascript setting width fails

Question

I have encountered this problem: Depending on numbers from I want to create a bar chart. Interestingly it works very well in IE8 set on quirks mode, but fails everywhere else. I cannot really say where the error is and I hope that someone here can help me. I am using jQuery, but using getElementById() and element.style.width = Somevalue (i.e. without jQuery) did not work either :(

[Edit: Full example link removed; the pastie expired.]

Basically:

<input onChange="calculateField(1)" ...>

function calculateField(fieldname){
    value = $("#input_" + fieldname).val();
    fancyMagic();
    value = 6 * value; // for testing

    $("#subtotal_" + fieldname).html(value);
    updateDiagram();
}

function updateDiagram(){
    // gather required into, maxwidth, maxval, etc...

    // fetch 'normal' bar
    var target = $("#animatebar_1");
    var width = maxwidth * (value / maxval);

    // set width to proper width
    target.width(width);

    // like for avg bar
    var avgtarget = $("#avgbar_1");
    var avgwidth = maxwidth * (averagevalue / maxval);
    avgtarget.width(avgwidth);
}

I tried all of FF, IE8 in various settings and Opera and it simply doesn't work. The bar's width is set to zero immediately after. IE8 quirks mode works, interestingly.

I am pretty sure it's just me being dumb, but I will appreciate help with this. I also tried to use .css() to change the size, but it did not work either.

Thank you muchly in advance.

Answer 1

I think the problem might be the use of the span tags. You should use a div instead. Span tags ignore widths.

Answer 2

the solution is actually very easy. Other browsers than IE follow the box-model correctly. This means that you can't set a width of an inlined element. The bars you are using are SPAN elements and these are set to display:inline

So the solution would be using DIV's instead of SPAN's or adding display:block for both .animbars and .avgbars CSS declarations. It may break your intended visiual design but it shouldn't be so hard to get it back on tracks.

Answer 3

where do u get maxval? it either null,nan or zero. either way u get an error there.

Answer 4

try adding target.css('width', width + "px")

Other than that, i can't see any obvious errors.