title: Inverted vertical volume bar jquery
body: <p>Im creating a custom volume bar for a video player.  Everything works okay, but im trying to invert the direction the volume changes when the control is dragged. I think it has to do with the fact that when I calculate the position and convert that to a percentage, it is calculating that the top of my control div is 0% and the bottom is 100%.  The position and  percentage is calculated by:</p>
  
  <pre><code>var position = y - volume.offset().top;
  percentage = 100 * position / volume.height();
  </code></pre>
  
  <p>If the bottom of the control div is clicked, console.log(position); reads out 100%.  I want it to read out 0% so when the bottom is clicked, the volume goes down and when the top is clicked it goes up (to 100%).</p>
  
  <p>Heres the code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;video id="video"&gt;
  ... video sources
  &lt;/video&gt;
  &lt;div id="volumeBar"&gt;&lt;/div&gt;
  &lt;div id="volume"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#volumeBar {
      position: relative;
      height: 138px;
      width: 102px;
      background: url(/assets/vintage-vp/volume-container.png) no-repeat;
      top: -131px;
      left: 695px;
      z-index: 2;
  overflow: hidden;
  }
  
  #volume {
      width: 36px;
      height: 79px;
      position: absolute;
      background: url(/assets/vintage-vp/volume.jpg) no-repeat black;
  top: 116px;
      left: 735px;
      z-index: 1;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>var volumeDrag = false;
  $('#volumeBar').on('mousedown', function(e) {
      volumeDrag = true;
      video[0].muted = false;
      updateVolume(e.pageY);
  });
  $(document).on('mouseup', function(e) {
      if(volumeDrag) {
          volumeDrag = false;
          updateVolume(e.pageY);
      }
  });
  $(document).on('mousemove', function(e) {
      if(volumeDrag) {
          updateVolume(e.pageY);
      }
  });
  var updateVolume = function(y, vol) {
      var volume = $('#volumeBar');
      var percentage;
      //if only volume have specificed
      //then direct update volume
      if(vol) {
          percentage = vol * 100;
      }
      else {
          var position = y - volume.offset().top;
          percentage = 100 * position / volume.height();
      }
  
      if(percentage &gt; 100) {
          percentage = 100;
      }
      if(percentage &lt; 0) {
          percentage = 0;
      }
  
      //update video volume
  
      video[0].volume = percentage / 100;
  
      //change sound icon based on volume
  
      var roundPixels = Math.round((video[0].volume*10))*-79;
      $('#volume').css({backgroundPosition: '0 ' +roundPixels+'px'}); 
  </code></pre>
  
  <p>I dont want to use jQuery UI slider for this.  I have a feeling it's just some simple logic.  Thanks!</p>