Ползунок пользовательского интерфейса jQuery - неправильное отображение в Firefox

Доброе утро,

У меня есть приложение, которое позволяет пользователям перемещать значения для разных категорий на общую сумму до 100%. Он отлично работает в Safari, Chrome и даже в IE, но в Firefox перетаскиваемые маркеры не отображаются в нужном месте, а вместо этого появляются в верхней части div-оболочки.

Я все еще могу нажать на полосу, где они должны быть, чтобы перетащить их, что наводит меня на мысль, что это просто проблема CSS.

Я использовал стандартный тематический ролик jQuery UI, ничего не редактируя.

Код, используемый для отображения ползунков:

function bind_slider_bar (category) {

    $(slider_id (category) ).slider({
        min     :   0,
        max     :   100,
        value       :   budget.slider_values[category],
        start       :   function (e, ui) {
            budget.category = $(this).attr('id').replace('_slider','');
                    //sets the current global value to the slider being dragged, so the correct values get set, and the others are decreased if necessary.
        },
        stop        :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields();
            update_distribution_notifiers();

        },
        slide       :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields ();
            update_distribution_notifiers();
            var my_position = $( slider_id (category) ).slider("value");
            $( draggable_handle ( category ) ).css('left', my_position);
        }
    });

}

URL-адрес приложения находится по адресу clearpointccs.org/holiday-planner. Я знаю логику ползунки/вычисления тоже все еще немного глючат, но с логикой я могу поспорить. Ошибка Firefox, которую я не могу. Чтобы проверить это, вы можете оставить поле начального дохода пустым.

Спасибо,

Том


jquery css firefox jquery-ui jquery-ui-slider
person Thomas Thorogood    schedule 17.11.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно вынуть контейнер слайдера из элемента td, он не подходит для обработки слайдеров, поскольку они работают с абсолютным позиционированием.

Измените элементы контейнера ползунка с

<td id="gifts_slider"></td>
<td id="parties_slider"></td>
<td id="travel_slider"></td>
<td id="food_slider"></td>
<td id="donations_slider"></td>

To

<td><div id="gifts_slider"></div></td>
<td><div id="parties_slider"></div></td>
<td><div id="travel_slider"></div></td>
<td><div id="food_slider"></div></td>
<td><div id="donations_slider"></div></td>
person Jeff Wilbert    schedule 17.11.2011
comment
Я внес это изменение, но проблема не устранена. - РЕДАКТИРОВАТЬ; Я неправильно поменял. Мне жаль. Я еще не весь кофе выпил. - person Thomas Thorogood; 17.11.2011
comment
Нет проблем, удачного программирования! - person Jeff Wilbert; 17.11.2011

arrow_upward
0
arrow_downward

Вместо того, чтобы превращать ячейку таблицы в ползунок (я не думаю, что jQuery поддерживает это, но я могу ошибаться, во всех примерах используются элементы div). Поместите div в ячейку таблицы и используйте его в качестве контейнера ползунка.

Если вы добавите

display: block:

к CSS td, то большой палец содержится правильно. но тогда размер будет выключен.

person Andrew    schedule 17.11.2011