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

Question

I am creating a web application. I tested it in a mobile browser and noticed that: active pseudo class dsnt really works. How to simulate clicks for a mobile browser? I use css sprites. I came across ontouchstart but don't know how to use it. can anyone help me with this? Thanks in advance.

Answer 1

ontouchstart right, ontouchstart will help you achieve something, from changing CSS to being able to drag and drop elements on touch devices that support touch events. And you are using jQuery, which will allow you to associate these events with your elements.

I wrote an article on PHPAlchemist.com that details the necessary steps to create a custom scrollbar with touch event integration for mobile devices, but it can be a bit far-reaching. Essentially, you would like 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 short, you add a class to your button when you touch it and delete it when touch ends, and CSS will control how it looks. Hope this helps! :)