Выровнять текст с помощью ползунка - PullRequest
Новая
       24

Выровнять текст с помощью ползунка

0 голосов
/ 08 октября 2011

У меня есть такая структура таблицы 

<tr>
    <td>
      Text to move
    </td>
</tr>
<tr>
    <td>
       <div>jQuery slider container is in here<a>slider pointer is in here</a></div>
    </td>
</tr>

Когда ползунок перемещается, я вижу, что стиль обновляется для элемента ссылки в процентах, представляющих, как далеко вправо он находится, например: style="left: 11.7647%;" Я хочу, чтобы «текст двигался», чтобы выровняться с ползунком, а также переместился на этот процент. Есть ли способ, которым я могу сделать это? При необходимости я могу добавить больше div / spans и т. Д.

Примечание. Я знаю, как определить процент перемещения слайдера, проблема заключается только в его выравнивании.

1 Ответ

0 голосов
/ 09 октября 2011

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

$("#hoverText").css("margin-left", percent + "%");

Вот мой рабочий тестовый код:

HTML 

<table id="layoutTable" style="width:100%;">
  <tr>
    <td>Percent: <span id="percent"></span></td>
  </tr>
  <tr>
    <td style="width:100%;"><span id="hoverText">Here's Some Text</span></td>
  </tr>
  <tr>
    <td style="width:100%;"><div id="slider"></div></td>
  </tr>
</table>

JavaScript 

$(document).ready(function(){
  $("#slider").slider({
    "slide": function(event, ui) {
      var percent = ui.value;
      $("#percent").html(percent);
      $("#hoverText").css("margin-left", percent + "%");
    }
  });
});
...