Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 04.08.2015, 20:22   #1
RoGGeR
 
Регистрация: 11.03.2015
Сообщений: 6
По умолчанию JQuery slider помогите разобраться

Здравствуйте! Начал изучать js и jquery соответственно. Пытался разобраться с одним из примеров с интернета. Уменьшил ширину бегунков и столкнулся со следующей проблемой: handle не совпадает со своим значением на слайдере. Он отстает, как видно на картинке. Никак не могу найти, в какой строчке кода это происходит. Но отстает он на 1% от заданной ширины слайдера.

Код HTML:
<div class="slide ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slide1">
    
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" ></a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" ></a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" ></a>
    <div class="slide-back" style="background: rgb(255, 255, 255);"></div>
    <div class="slide-back" style="background: #006FA7;"></div>
    <div class="slide-back" style="background: rgb(255, 0, 0);"></div>
    
</div>
Скрипт
Код HTML:
$(window).load(function(){
$(document).ready(function() {
    
    var doUpdate = function(event, ui) {
        $('#slide1 .slide-back').remove();
        $($('#slide1 a').get().reverse()).each(function(i) {
            var bg = '#fff';
            if(i == 1) {
                bg = '#006FA7';
            } else if(i == 2) {
                bg = '#f00';
            }
            
            $('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
        });
    };
    
    $('#slide1').slider({
        slide: doUpdate,
        change: doUpdate,
        min: 0,
        max: 100,
        

        values: [ 10, 26, 35 ],
        
    });
    
    doUpdate();
});
});
Помогите разобраться пожалуйста!
Изображения
Тип файла: png Снимок экрана 2015-08-04 в 20.07.29.png (7.6 Кб, 102 просмотров)
Вложения
Тип файла: zip slider.zip (196.5 Кб, 9 просмотров)

Последний раз редактировалось RoGGeR; 04.08.2015 в 23:06.
RoGGeR вне форума Ответить с цитированием
Старый 04.08.2015, 23:39   #2
RoGGeR
 
Регистрация: 11.03.2015
Сообщений: 6
По умолчанию

Проблему решил
RoGGeR вне форума Ответить с цитированием
Старый 05.08.2015, 09:18   #3
Вадим Мошев

Старожил
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Сообщений: 8,568
По умолчанию

RoGGeR
Опубликуйте решение вашей проблемы. Оно может оказаться полезным остальным.
Вадим Мошев вне форума Ответить с цитированием
Старый 10.08.2015, 09:59   #4
RoGGeR
 
Регистрация: 11.03.2015
Сообщений: 6
По умолчанию

Код HTML:
$('#slide1').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
        });

left - 5 - задает нужный отступ.
RoGGeR вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery coin slider CodeNOT JavaScript, Ajax 0 14.03.2012 23:27
ProgressBar как Slider или Slider как ProgressBar coNsept Общие вопросы .NET 5 08.03.2012 17:00
JQuery, Paralax Slider (слайд-галерея), добавить блок к li AlienNation HTML и CSS 0 15.09.2011 13:27
Slider Control huzik Общие вопросы C/C++ 4 26.10.2009 02:06