29 July 2010

More and more devices we use are coming with touch screens. This means we now have touch as an option for input. I am finding that my clients particularly want iPad support for their sites.





Tab Qwerty provides a simple method of extending Mootools to work with Mobile Safari's TouchEvent

Once that snippet of code is added we need to add listeners to work out what direction your touch input is going in. To view the demo click here

First of all we need to set up our images that we will be scrolling through. In a folder called images I have 6 images named from 0 .jpg to 6.jpg

var currentPos = page;

var previousPos = 0;



// load in images

var totalImages = 6;

var imageContainer = document.id('imageContainer');



var thumbImgArray = new Array();

for(var i=0; i<totalImages; i++) { thumbImgArray.push('images/'+i+'.jpg'); }



var newImage  = new Array();



var thumbImages = new Asset.images(thumbImgArray, {

    onComplete: function(){

        thumbImgArray.each(function(im, index) { 

            // inject image

            var newEl = new Element('div',{  id:'img'+index, 'class' : 'portfolioImage' }).inject(imageContainer); 

        var newImg = new Element('img',{ src:im}).inject(newEl); 

        newEl.setStyle('opacity',0);

        newImage.push(newEl);

                

        // if we are on the last elment

        if(index == Math.round(thumbImgArray.length-1)){

        // fade in our image

        newImage[currentPos].setStyle('left',0);

        (function() { newImage[currentPos].fade('in')}).delay(500)

        }

    });                    

    }

});

These images are preloaded in then inserted into an array called "newImage". These images could already be on the page, just as long as you set it up so that they are accessible in the newImage array you will be fine.

We then set up a few variables for managing the touch event

var touchBox = document.id('touchBox'), previousTouchPos = 0, currentTouchPos = 0;

On top of the images there is a div tag that acts as our button. If you use the container for the images you will find that sometimes the event gets stuck.

We then have the events.

touchBox.addEvents({

    'mousedown' : function(evt, el)

    {

        previousTouchPos = evt.page.x;

    },

    'mouseup' : function(evt, el)

    {

        currentTouchPos =  evt.page.x;

         

         if(currentTouchPos> previousTouchPos)

         {

             currentPos--;

            if(currentPos<0) { currentPos = totalImages-1; } 

         }

         

         if(previousTouchPos > currentTouchPos)

         {

             currentPos++;

            if(currentPos>=totalImages) { currentPos = 0; };

         }

         

         var windowSize = document.window.getSize();

         if(parseInt(currentPos) > parseInt(previousPos))

        {                 

            newImage[previousPos].morph({'left': [ 0, -(windowSize.x)], 'opacity' : 0})

            newImage[currentPos].morph({'left': [windowSize.x, 0], 'opacity' : 1})

        }

        

        if(parseInt(previousPos) > parseInt(currentPos))

        {

            newImage[previousPos].morph({'left': [ 0, (windowSize.x)], 'opacity' : 0})

            newImage[currentPos].morph({'left': [-(windowSize.x), 0], 'opacity' : 1})

        }

        

        if(parseInt(previousPos) == (newImage.length-1) && parseInt(currentPos) == 0)

        {                 

            newImage[previousPos].morph({'left': [ 0, -(windowSize.x)], 'opacity' : 0})

            newImage[currentPos].morph({'left': [windowSize.x, 0], 'opacity' : 1})

        }

        

        if(parseInt(previousPos) == 0 && parseInt(currentPos) == (newImage.length-1))

        {

            newImage[previousPos].morph({'left': [ 0, (windowSize.x)], 'opacity' : 0})

            newImage[currentPos].morph({'left': [-(windowSize.x), 0], 'opacity' : 1})

        }

        

// updates what will be the following previous image

        previousPos = currentPos;

    }

});

When the user mouses down or touches the area we set the starting position

previousTouchPos = evt.page.x;

and when they release we set the finishing position

currentTouchPos =  evt.page.x;

After that we work out if it was going left or right

if(currentTouchPos> previousTouchPos)

         {

             currentPos--;

            if(currentPos<0) { currentPos = totalImages-1; } 

         }

         

         if(previousTouchPos > currentTouchPos)

         {

             currentPos++;

            if(currentPos>=totalImages) { currentPos = 0; };

         }

After that we then tween the current(previous) image off and move the latest one. The multiple if statements are for working out if we are at the end or start of the image loop and what direction we came from.

Thats it in a nut shell. Fairly simple and it will also work with a good old mouse. At the moment its super sensitive and will react if you only move a pixel. So if you wanted to you could add something in that checked that you had moved more than 40 pixels.

I have uploaded a version using the History Manager class I wrote so you can see how it works with that.