Re: [tlug] Enable Javascript for Android?

[Dave M G <dave@example.com>]

TLUG,

In trying to get my web page with modified YUI sliders to work on
Android, I have learned that I need to get my sliders to respond to
"touch" events. Specifically, I need to utilize the "touchmove" event,
which is when a user drags their finger across the screen.

I have attempted to modify the YUI slider code as follows. Can any
JavaScript experts tell me what might be going wrong?

Also, please be gentle with the code critiques, as I am a total
JavaScript beginner. Not only is the code cobbled together from online
examples, but if you can help me to alter it, please explain as you
would to a child.

Thank you for any advice!

Here's the code (which relies on having the YUI libraries available in
order to work):

(function() {
    var        Event    = YAHOO.util.Event
    var        Dom        = YAHOO.util.Dom
    var        lang    = YAHOO.lang
    var        bg        = "slider-bg"
    var        thumb    = "slider-thumb"
    var        slider;

    // Determines starting point of slider
    var topConstraint = -20;

    // Determines end point of slider
    var bottomConstraint = 280;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 3;

    Event.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg,
                         thumb, topConstraint, bottomConstraint, 3);

        // Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart)
        {
        // This will get called each time the slider changes.
        // The offsetFromStart value is the pixel offset horizontally of
the current slider position.
        //alert("slider value = " + slider.getValue());
        });

        slider.subscribe("slideStart", function()
        {
            // this will be done when the slider starts
        //alert("slider start");
        });

        slider.subscribe("slideEnd", function()
        {
            // this will be done when the slider ends
        });
       
       // This is where I added in code to try and identify the slider
      // thumb and get it to respond to a touchmove event.
       // Right now, this code causes the slider to freeze entirely,
      // even on my home desktop browser.

    var thumb = document.getElementById('slider-thumb');
        thumbStyle = thumb.style;
        thumb.addEventListener('touchmove', function(event)
        {
                   event.preventDefault();
          console.info("touch move :"+ event.targetTouches);
          if (event.targetTouches[0] == thumb)
          {
              var oldPos = thumbStyle.left;
              var changePos = event.targetTouches[0].pageX - oldPos;
              thumb.setValue(thumb.getValue() + changePos, true, false,
false);
          }

        });   
    });
})();