CODEWITHSUNDEEP
jqueryhtmlhoveronmouseoveronmouseout
aztekgold
aztekgold

Reputation: 63

How do i disable onmouse and onmouseout function on touchcreen devices only

I am creating a responsive shopping site for a clothing brand and have a onmouseover="" and onmouseout="" effect on my <img> tags to show the front and back of the products, like on http://www.blackmilkclothing.com

But when viewing the site on a touchscreen device the hover effect is obviously set as a click function. which makes it not able to scroll down fluently

How would i disable this effect for touch screen devices only? Here is my code for the images

<div class="product">
   <a href="">
      <img src="pic.jpg"onmouseover="this.src='pic2.jpg'"onmouseout="this.src='pic.jpg'" />
   </a>
</div>

Upvotes: 0

Views: 1356

Answers (3)

Spokey
Spokey

Reputation: 10994

I can only think about http://modernizr.com/ which lets you know if the viewer has a touch-screen or not.

The plugin adds a class to the <html> .touch and .no-touch

Now you could do something like 

if($('html').hasClass('no-touch')){
   $('img').mouseover(function(){ //change pic 
           }).mouseout(function(){ //change back 
           });
}

This will only add the mouseover event for devices without touch-screens

Upvotes: 0

Sergei Gorjunov
Sergei Gorjunov

Reputation: 1799

Detecting touch screen devices with Javascript - how to detect touch screen. For your code:

var is_touch_device = 'ontouchstart' in document.documentElement;
    if (is_touch_device) {
    var elements = document.getElementsByTagName("img");
    for (var i=0;i<elements.length;i++) {
        elements[i].onmouseover = null;
        elements[i].onmouseout = null;
    }
}

Upvotes: 1

Teo
Teo

Reputation: 125

I think you should test the User Agent on the load of the page and assign the "onmouseover" and "onmouseout" events dynamically (if the User Agent is not mobile), all using JQuery or Javascript.

Upvotes: 0

Related Questions