Question

Hi i’ve created a nice little jquery sliding panel that works great on the desktop, but utilises mouseover and mouseout events which obviously mean that the script won’t function properly on an iPad or touch devices (having said that, the mouseover event DOES work and seems to get translated to a click on the iPad, but the subsequent mouseout event won’t function).

I’m hoping to find a single solution to work on both desktop and touch devices – i don’t mind swapping the mouseover/out events for a click event altogether, but whenever I try and achieve this it either has no effect or breaks the script.

Any help would be greatly appreciated, and lots of good karma sent your way if you can propose a meaningful solution.

I’ve mocked up the code here: http://jsfiddle.net/sketch360/qgt7J/2/

Many thanks.

Answer 1

$(document).ready(function(){  
    $("#navigation").click(function(){ 
        if(parseInt($(this).css('marginLeft'), 10) == 0){    
             $(this).stop().animate({marginLeft:'-104'},{queue:false, duration:1000, easing: 'easeOutBack'});
        }
        else{
             $(this).stop().animate({marginLeft:'0'},{queue:false, duration:1000, easing: 'easeInOutBack'})  
        }
    });  
});

Working demo – http://jsfiddle.net/qgt7J/5/