CODEWITHSUNDEEP
javascriptjquerycss
David
David

Reputation: 360

jQuery moving a control while move the mouse on another element

I have a div containing a time range. I also have a scroll for the div when moving the mouse. What I am trying to move the time control along with the scroll, while the mouse is moving on the time range.The issue is time control does not move according to mouse move.

Here is what I did:

$('#timeTable').on('mousemove', function(e) {
  var xPrev = 600;
  var inc = 0;
  var position = $('#nowTime').offset().left;
  var leftOffset = $(this).offset().left;
  if (xPrev < e.pageX) {
    inc = -255;
  }
  $('#timeTableInner').css('left', -e.clientX + leftOffset + inc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<time id="nowTime">10:00</time>
<div id="timeTable">
  <div id="timeTableInner">
 <ul id="timeText">
     <li class="t0000"><span class="hourText">0:00</span></li>
     <li class="t0015">&nbsp;</li>
     <li class="t0030">&nbsp;</li>
         ------------
      <li class="t2400"><span class="hourText">24:00</span></li>
  </ul>
  </div>
</div>

Upvotes: 3

Views: 668

Answers (1)

Canet Robern
Canet Robern

Reputation: 1069

Check this please.

Is this what you want?

check my updated fiddle here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<time id="nowTime">10:00</time>
<div id="timeTable">
    <div id="timeTableInner">
        <ul id="timeText">
            <li class="t0000"><span class="hourText">0:00</span></li>
            <li class="t0015">&nbsp;</li>
            <li class="t0030">&nbsp;</li>
            <li class="t2400"><span class="hourText">24:00</span></li>
        </ul>
    </div>
</div>

Upvotes: 2

Related Questions