Javascript-форум - Срабатывание события при изменении CSS

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Срабатывание события при изменении CSS (https://javascript.ru/forum/jquery/39129-srabatyvanie-sobytiya-pri-izmenenii-css.html)

Срабатывание события при изменении CSS

Добрый день.
Столкнулся с проблемой ,незнаю как решить.
Есть елемент страницы (div). Пользователь может менять его left:,нажимая и перетягивая элемент.
Задача сделать так, чтобы при изменении left его же background-position перемещалась вправо на столько-же px. Как это реализовать . Спасибо за помошь)

Цитата:

Сообщение от animatio

Пользователь может менять его left:,нажимая и перетягивая элемент.

Какой скрипт для этого используется?

jQuery UI Slider.Задача в том что там для полоски слайдера используется однотонный фон. А у меня в backgound-рисунок. Поэтому ,когда правый бегунок перемещается , бэкграунд активной части полоски тоже с ним перемещается. Поэтому я думаю что сдесь нужно именно перемещать бэкграунд в обратном направлении,чтобы визуально он оставался на месте, двигался только бегунок.

animatio,
а так

.ui-slider-range{
           background: url(ваша ссылка на картинку)  fixed;
         }

<!doctype html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Slider - Range slider</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <style type="text/css">

         .ui-slider-range{
           background: url(http://pobierzplik.pl/images/thumbs/pl/p/21483_170x170.jpg)  fixed;
         }
        </style>
        <script>
        $(function ()
          {

            $("#slider-range").slider(
              {

              range: true,
              min: 0,
              max: 500,
              values:[70, 300],
              step: 10,
              slide: function (event, ui) {
                 // if ($(ui.handle).index() == 2) return false;
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

                },
              change: function (event, ui) {
                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              }}
            );

            $("#amount").val("$" + $("#slider-range").slider("values", 0) +

              " - $" + $("#slider-range").slider("values", 1));

            $('#btn').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] += step;
                $('#slider-range').slider('values', values)
              }
            )

            $('#btn1').click(function ()
              {
                var step = $('#slider-range').slider('option', 'step'),
                values = $('#slider-range').slider('values');
                values[1] -= step;
                $('#slider-range').slider('values', values)
              }
            )


          }
        );
        </script>
    </head>

    <body>
        <p>
            <label for="amount">Price range:</label>
            <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range"></div>
        <input id="btn1" name="" type="button" value="<<">
        <input id="btn" name="" type="button" value=">>">
    </body>
</html>

Не выходить(Эффект то что надо, но на разных экранах, в разных браузерах смещение фона разное.А тут именно важно пиксель-в-пиксель

animatio,

.ui-slider-range{
           background: url(http://pobierzplik.pl/images/thumbs/pl/p/21483_170x170.jpg) 0 50% fixed;
}

Цитата:

Сообщение от Deff (Сообщение 256893)

animatio,

.ui-slider-range{
           background: url(http://pobierzplik.pl/images/thumbs/pl/p/21483_170x170.jpg) 0 50% fixed;
}

К сожалению не выйдет. Файл картинки фона во вложении он по высоте тоже другой. При скроле окна бэкграунд тоже скролится.