Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2013, 12:18
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

Срабатывание события при изменении CSS
Добрый день.
Столкнулся с проблемой ,незнаю как решить.
Есть елемент страницы (div). Пользователь может менять его left:,нажимая и перетягивая элемент.
Задача сделать так, чтобы при изменении left его же background-position перемещалась вправо на столько-же px. Как это реализовать . Спасибо за помошь)
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2013, 12:37
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от animatio
Пользователь может менять его left:,нажимая и перетягивая элемент.
Какой скрипт для этого используется?
Ответить с цитированием
  #3 (permalink)  
Старый 17.06.2013, 14:33
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

jQuery UI Slider.Задача в том что там для полоски слайдера используется однотонный фон. А у меня в backgound-рисунок. Поэтому ,когда правый бегунок перемещается , бэкграунд активной части полоски тоже с ним перемещается. Поэтому я думаю что сдесь нужно именно перемещать бэкграунд в обратном направлении,чтобы визуально он оставался на месте, двигался только бегунок.
Ответить с цитированием
  #4 (permalink)  
Старый 17.06.2013, 15:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>

Последний раз редактировалось рони, 17.06.2013 в 15:26.
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2013, 16:18
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

Не выходить(Эффект то что надо, но на разных экранах, в разных браузерах смещение фона разное.А тут именно важно пиксель-в-пиксель
Ответить с цитированием
  #6 (permalink)  
Старый 18.06.2013, 01:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

animatio,
.ui-slider-range{
           background: url(http://pobierzplik.pl/images/thumbs/pl/p/21483_170x170.jpg) 0 50% fixed;
}
Ответить с цитированием
  #7 (permalink)  
Старый 18.06.2013, 10:24
Аватар для animatio
Интересующийся
Отправить личное сообщение для animatio Посмотреть профиль Найти все сообщения от animatio
 
Регистрация: 21.02.2013
Сообщений: 15

Сообщение от Deff Посмотреть сообщение
animatio,
.ui-slider-range{
           background: url(http://pobierzplik.pl/images/thumbs/pl/p/21483_170x170.jpg) 0 50% fixed;
}
К сожалению не выйдет. Файл картинки фона во вложении он по высоте тоже другой. При скроле окна бэкграунд тоже скролится.
Изображения:
Тип файла: png scrollblock_shadow_active.png (1.6 Кб, 13 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перезагрузка скрипта при изменении размера окна. ilion Элементы интерфейса 1 04.02.2013 14:47
Повторное срабатывание события Vhornets Events/DOM/Window 3 15.12.2012 22:15
UI DataTable при изменении размеров окна браузера Sveta jQuery 3 19.11.2012 10:02
Поменять цвет строки при изменении ячейки в datatable Devlin jQuery 10 07.11.2012 18:30
Срабатывание события при подведении к краю экрана Destrifer Общие вопросы Javascript 2 08.01.2009 15:12