jquery ajuste / javascript anchura falla

Question

Me he encontrado con este problema: En función de los números del deseo crear un gráfico de barras. Es interesante que funciona muy bien en conjunto IE8 en modo de peculiaridades, pero no en todas partes. Realmente no puedo decir dónde está el error y espero que alguien aquí me puede ayudar. Estoy usando jQuery, pero utilizando getElementById () y element.style.width = someValue (es decir, sin jQuery) no funcionó bien: (

[Editar: Full enlace ejemplo retira; la pastie expiró.]

Básicamente:

<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);
}

He intentado todos los FF, IE8 en diversas configuraciones y Opera y simplemente no funciona. El ancho de la barra se ajusta a cero inmediatamente después. IE8 funciona el modo peculiaridades, de manera interesante.

Estoy bastante seguro de que es justo que yo estaba mudo, pero apreciaré ayuda con esto. También probé a usar css () para cambiar el tamaño, pero no funcionó bien.

Gracias muchly de antemano.

Answer 1

Creo que el problema podría ser el uso de las etiquetas span. Debe utilizar un div en su lugar. etiquetas SPAN ignoran anchuras.

Answer 2

la solución es realmente muy fácil. Otros navegadores que no sean IE siguen el modelo de caja correctamente. Esto significa que no se puede establecer un ancho de un elemento inline. Las barras que está utilizando son elementos SPAN y éstos se establecen en display:inline

Así que la solución sería usar DIV en lugar de SPAN o la adición de display:block tanto para .animbars y declaraciones .avgbars CSS. Se puede romper su diseño visiual previsto pero no debe ser tan difícil de obtener de nuevo en las pistas.

Answer 3

donde hacer u obtener valmáx? ya sea nulo, nan o cero. De cualquier manera u obtener un error allí.

Answer 4

trate de añadir target.css ( 'anchura, anchura + "px")

Aparte de eso, no puedo ver los errores obvios.