1 Reply Latest reply on May 27, 2015 5:44 AM by Allison@HavasLynx

    problem slider on resonsive stage/width of symbol on responsive stage

    M123456 Level 1

      So I have a slider on my stage and when a user slides the scrubber to the end of the bar an animation will start.

      It works great but when the browser resizes users can't scrub to the end of the bar because my stage is responsive.

      When the browser gets smaller the scrubber get's stuck somewhere along the bar, you cannot get it to the end.

      So I want my scrubber to go to the end of the bar no matter what size the browser has.

      I thought maybe I have figure the width of the slider out which responds to the size of the browser. (Not the original width which is 886px) But I can't figure it out.

       

      Can someone help me to fix this?

       

       

      Here is the code:

      --------------------------------------------------------

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

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

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

       

      $(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 possibleX = e.pageX;

                  var leftX = bar.offset().left;

                  var rightX = (leftX + bar.width()) - scrubber.width();

                  var scrubWidth = rightX - leftX;

       

                  // Confine the scrubber to the width of the bar

                  if (possibleX < leftX) {

                      possibleX = leftX;

                  }

       

                  if (possibleX > rightX) {

                      possibleX = rightX;

                  }

       

                  scrubber.offset({

                      left: possibleX

                  });

       

                  var relativeX = possibleX - rightX;

       

                  if (relativeX > -1 ) {

                      sym.getSymbol("symbol1").play('animation');

                  }

              }

          })

      })

      ----------------------------------------------------

       

      Thanks in advance!

        • 1. Re: problem slider on resonsive stage/width of symbol on responsive stage
          Allison@HavasLynx Level 1

          Hi,

          I am getting exactly the same problem!

          I think we have used the same code to base our sliders on(I recognise the comments):

          http://sarahjustine.com/2013/11/08/create-click-and-touch-draggable-scrubbers-with-edge-an imate-cc/

          I also need it to be responsive and I have timeline actions which do not fire if the scrubber is dragged.

           

          I thought the secret might be to change the scrubber and bar sizes to percent instead of pixels but this hasn't worked.

          The last bit of code is a bit different in mine though:

           

          var relativeX = possibleX - leftX;

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

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


          Whereas yours is:

          if (relativeX > -1 ) {

                          sym.getSymbol("symbol1").play('animation');

                      }

           

          I don't know what bearing this has though!

           

          Can anyone out there give us some advice please?

          Thanks

          Allison