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.

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.

• javascript
• jquery
• cross-browser
• width
• quirks-mode

Share Improve this question Follow edited Oct 16, 2012 at 11:23 Cornelius asked Dec 1, 2009 at 15:17 CorneliusCornelius 8301111 silver badges3333 bronze badges 3

• console.log all of your math equations to ensure they are all being calculated to actual numerical values (as opposed to NaN or a string). There are slight variances in some of the handling of odd math in IE (such as dividing by zero). – DA. Commented Dec 1, 2009 at 15:24
• I used IE dev toolbar and firebug AND opera's dragonfly to step through the code and I always had correct (or at least correct looking; for integer values and easy fractions it worked) values in all variables. – Cornelius Commented Dec 1, 2009 at 15:34
• Incidentally, dev tools and dragonfly report a width of zero, firbug currently claims 40px. console.log before / after changing width gives me values for item.width() that are reasonable. visibility is reported as 'visible'. (By Firebug. I haven't yet found how to read CSS from jQuery.) – Cornelius Commented Dec 1, 2009 at 16:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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.

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

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

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