JQuery / Javascript установка ширины не удается - PullRequest
Новая
       23

JQuery / Javascript установка ширины не удается

1 голос
/ 01 декабря 2009

Я столкнулся с этой проблемой: В зависимости от числа я хочу создать гистограмму. Интересно, что он работает очень хорошо в IE8, установленном в режиме причуд, но не работает везде. Я не могу точно сказать, где ошибка, и я надеюсь, что кто-то здесь может мне помочь. Я использую jQuery, но с помощью getElementById () и element.style.width = Somevalue (т.е. без jQuery) тоже не сработало: (

[Edit: полная ссылка на пример удалена; истек срок годности.]

В основном: 

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

Я перепробовал все FF, IE8 в различных настройках и Opera, и он просто не работает. Ширина бара устанавливается равной нулю сразу после. IE8 quirks mode работает, интересно.

Я почти уверен, что это просто глупость, но я буду признателен за помощь в этом. Я также пытался использовать .css () для изменения размера, но он тоже не работал.

Большое спасибо заранее.

Ответы [ 4 ]

4 голосов
/ 01 декабря 2009

Я думаю, что проблема может заключаться в использовании тегов span. Вы должны использовать div вместо этого. Теги Span игнорируют ширину.

3 голосов
/ 01 декабря 2009

решение на самом деле очень просто. Другие браузеры, кроме IE, правильно следуют блочной модели. Это означает, что вы не можете установить ширину встроенного элемента. Используемые столбцы являются элементами SPAN, и для них установлено значение display:inline

Таким образом, решением будет использование DIV вместо SPAN или добавление display:block для CSS-объявлений .animbars и .avgbars. Это может сломать ваш намеченный визуальный дизайн, но не должно быть так сложно вернуть его в нужное русло.

0 голосов
/ 01 декабря 2009

попробуйте добавить target.css ('width', width + "px")

Кроме этого, я не вижу явных ошибок.

0 голосов
/ 01 декабря 2009

где взять maxval? это либо ноль, нан или ноль. в любом случае вы получите ошибку там.

...