We’ve recently come across a post on the iPhoneWebDev board from a member named Rico who posted some source using touch events to emulate sliding of the iPhone UI. View the post and source after the jump.

Hi guys,

Just to share you a piece of code on how you could do a slider ui
control using the TouchEvent.

The basic idea is that you setup a new Slider object with the
following parameters: the id of the slider, the id of the fill, the id
of the thumb, the maximum value, the current initial value, and a
callback method. The callback method will be called when the finger is
removed from the phone.

--- begin html ---
    <div id="slider" class="slider" style="width:250px">
        <div class="sfill" id="sliderFill"></div>
        <div class="sthumb" id="sliderThumb"></div>
    </div>
    <script>
          function blah(value)
          {
              alert("new value after release: " + value);
          }
          new Slider("slider", "sliderFill", "sliderThumb", 100, 50,
blah);
    </script>
--- end html ---

--- begin css ---
        .slider
        {
                position:relative;
                height:28px;
                border-width: 0 5px 0 5px;
                -webkit-border-image: url(../images/slider.png) 0 5 0 5;
        }
        .slider > .sfill
        {
                position:absolute;
                left: -4px; /* the border-width plus 1 */
                height:28px;
                width: 0;
                border-width: 0 5px 0 5px;
                -webkit-border-image: url(../images/slider_fill.png) 0 5 0 5;
        }
        .slider > .sthumb
        {
                position:absolute;
                background-image: url(../images/slider_thumb.png);
                width: 30px;
                height: 28px;
        }
--- end css ---

--- begin slider.js ---
    function Slider(slider, fill, thumb, maxRange, currentPos,
callback)
    {
        var slider = document.getElementById(slider);
        var fill = document.getElementById(fill);
        var thumb = document.getElementById(thumb);
        var maxRange = maxRange;
        var currentPos = currentPos;
        var thumbWidth = 20;
        var borderWidth = 10;

        function sliderMove(event) {
            var x = event.touches[0].clientX - findOffsetLeft(slider);
            var relativePos = ((x-thumbWidth/2) * maxRange) /
                (slider.clientWidth + borderWidth - thumbWidth);
            if( relativePos < 0 )
            {
                currentPos = 0;
            }
            else if( relativePos > maxRange )
            {
                currentPos = maxRange;
            }
            else
            {
                currentPos = relativePos;
            }

            positionThumb();
        }

        function positionThumb()
        {
            var relativePos = (thumbWidth/2) +
                ((slider.clientWidth + borderWidth - thumbWidth) *
currentPos) / maxRange;
            fill.style.width = relativePos + "px";
            thumb.style.left = relativePos - borderWidth - (thumbWidth/
2) + "px";
        }

        slider.ontouchstart = function(event) {
            sliderMove(event);
        }
        slider.ontouchmove = function(event) {
            event.preventDefault();
            sliderMove(event);
        }
        slider.ontouchend = function(event) {
            callback(currentPos);
        }

        positionThumb();
    }

    function findOffsetLeft(obj)
    {
            var curleft = 0;
            if (obj.offsetParent) {
            do {
                        curleft += obj.offsetLeft;
                } while (obj = obj.offsetParent);
            }
        return curleft;
    }
--- end slider.js ---

I know it’s not perfect, but it does the trick and is clean enough
/rico

(1 votes, average: 3 out of 5)

 Loading ...