2 Replies Latest reply on Aug 8, 2014 8:14 AM by eliverrang

    Why doesn't this slider code work with Kindle Fire or Android?

    eliverrang Level 1

      I have used an excellent slider script from Sarah Justine in my project. This works well on my iMac and on my iPad. However, I also need it to work on android mobiles and Kindle Fire. It doesn't (at least it doesn't on my Sony Xperia Z1 and my Kindle Fire). Can somebody help with this problem please?

      Sarah Justine's examples are on her web site at www.sarahjustine.com.

      The basic example is here: Slider

       

      Peter Small

        • 1. Re: Why doesn't this slider code work with Kindle Fire or Android?
          eliverrang Level 1

          More info:

           

          The slider works with a scrubber dragging along a bar, which causes the time line of a symbol ( "timelinePlay" ) to move across the stage.

           

          All of the code is contained in the stage's "compositionReady", shown below:

           

           

          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

           

           

          // Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped.

           

           

          if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

           

           

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

           

           

              $(function () {

           

           

                  scrubber.bind("touchstart", function (e) { // Enable the scrubber on touchstart

                      e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired

                      dragme = true;

                  });

           

           

                  scrubber.bind("touchend", function () { // Disable the scrubber on touchend

                      e.preventDefault();

                      dragme = false;

                  });

           

           

                  scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove

                      if (dragme) {

                          var touch = e.originalEvent.touches[0];

                          var possibleX = touch.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 - 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

           

           

                      }

                  });

              })

          }

           

           

          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 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 - 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

           

           

                  }

              })

          })

          • 2. Re: Why doesn't this slider code work with Kindle Fire or Android?
            eliverrang Level 1

            I must have visited hundreds of pages trying to solve this problem but at last I stumbled on the solution.

             

            In fact it was something quite simple. The action code is a conditional after testing for the device used: in the line:

             

            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

             

            It struck me that it may be better to test if it supported touch, so I added these lines before the conditional:

             

            var isTouchSupported = 'ontouchstart' in window;

            var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';

            var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';

            var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

             

            and then replaced the conditional line with:

            if (isTouchSupported) {


            It worked like a charm - on my IMac, IPad, Iphone, Xperia Z1 (android) and Kindle Fire.


            Peter Small