Ползунок jQuery UI - не отображается должным образом в Firefox - PullRequest
Новая
       22

Ползунок jQuery UI - не отображается должным образом в Firefox

0 голосов
/ 17 ноября 2011

Доброе утро,

У меня есть приложение, которое позволяет пользователям скользить значения для разных категорий на общую сумму до 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 я не могу. Чтобы проверить это, вы можете оставить поле начального дохода пустым.

Спасибо

Tom

Ответы [ 2 ]

1 голос
/ 17 ноября 2011

Вам необходимо вынуть контейнер слайдера из элемента 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>

До 

<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>
0 голосов
/ 17 ноября 2011

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

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

display: block:

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

...