1 Reply Latest reply on Aug 7, 2014 7:41 AM by Robyn_cpl

    Vertical slider scrubber/timeline start position

    Aubrey Scarza Level 2

      Hi all,

       

      I've been working with this code from Create Click and Touch Draggable Scrubbers with Edge Animate CC | sarahjustine.com

       

      var symDur = sym.getSymbol("timelinePlay").getDuration(); // Get the timeline length of timelinePlay. We'll reference this later in the code.

      var mySymbol = sym.getSymbol("timelinePlay"); // Get the symbol timelinePlay. We'll reference this later in the code.

      var scrubber = sym.$("scrubber"); // Touch this to scrub the timeline of timelinePlay

      var bar = sym.$("bar"); // Bar the scrubber follows

      sym.$("mobileHit").hide(); // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise)

      var dragme = false; // Set the initial dragme function to false

       

      else $(function () {

          scrubber.mousedown(function () { // Enable the scrubber on mousedown
              dragme = true
          })
          $(document).mouseup(function () { // Disable the scrubber on mouseup
              dragme = false
          })
          $(document).mousemove(function (e) { // Make the magic happen on mousemove
              if (dragme) {
                  var possibleY = e.pageY;
                  var topY = bar.offset().top;
                  var bottomY = (topY + bar.height()) - scrubber.height();
                  var scrubWidth = bottomY - topY;

                  // Confine the scrubber to the height of the bar
                  if (possibleY < topY) {
                      possibleY = topY;
                  }

                  if (possibleY > bottomY) {
                      possibleY = bottom;
                  }

                  scrubber.offset({
                      bottom: possibleY
                  });

                  var relativeY = possibleY - topY;
                  var stopTimeline = Math.ceil((relativeY / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay

                  mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released

              }
          })
      })

       

      but I don't really understand everything that's happening code wise.

      Using this as is sets the scrubber at the top of the bar and when you drag down, the timeline plays from start to end, if you drag up it plays in reverse.

      I want the timeline to do the opposite, so the scrubber starts at the bottom and the timeline plays forwards when dragged upwards.

      Can anyone help point me to the code that needs changing?