How to simulate touch events for mobile browsers? Android, iPhone?

Question

I am creating a web app. I was testing it on a mobile browser and noticed that :active pseudo class dsnt really work. How should I simulate clicks for mobile browser? I am using css sprites. I stumbled upon ontouchstart but dont know how to use that. can anyone help me over it? Thanks in advance.

Answer 1

Quite right, the ontouchstart will help you achieve something, from changing CSS to being able to drag elements on touch devices supporting the touch events. And you're using jQuery, which will allow you to bind those events to your elements.

I wrote an article on PHPAlchemist.com detailing the necessary steps to creating a custom scrollbar with touch event integration for mobile devices, but that might be a bit far-reaching. Essentially, you would want to do something like this (jQuery Javascript code):

// get your button...
var my_button = $(".my_button_class");

// first, bind the touch start event to your button to activate some new style...
my_button.bind("touchstart", function() {
    $(this).addClass("button_active");
});

// next, bind the touch end event to the button to deactivate the added style...
my_button.bind("touchend", function() {
    $(this).removeClass("button_active");
});

...then, in your CSS, you could have something like this for example:

.my_button_class
{
    background-image: url(image.png);
    background-position: 0px 0px;
}

.button_active
{
    background-position: 0px -20px;
}

In a nutshell, you're adding a class to your button on touch start, and removing it when the touch ends, and the CSS will control what it looks like. Hope this helps! :)