maddogandnoriko
maddogandnoriko

Reputation: 1002

jquery menu item select not working on mobile

When a menu item is chosen from a drop down menu is selected an appropriate image is loaded into a div. Works on desktop but when chosen on android mobile it does not. Actually it does work on the second try. Is there a selector that will work for both OS's?

The jQuery I am using to detect menu selection:

$("#template_select").mouseup(function(){
//change the image
});

Thank you once again for your time I really appreciate it, Todd

Upvotes: 0

Views: 262

Answers (2)

Nicos Karalis
Nicos Karalis

Reputation: 3773

The mouseup is similar to hover.

The problem is mobile smartphones don't have a hover event.

The fastest way to change that is to use click when on mobile, like this:

if( isMobile == true ) {
  $("#template_select").click(function(){
    //change the image
  });
} else {
  $("#template_select").mouseup(function(){
    //change the image
  });
}

EDIT

the easiest way to check if your browser is mobile is in javascript like this (link to the question and answer):

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

Upvotes: 2

FibreFoX
FibreFoX

Reputation: 2858

You are on a smartphone and there is no "click" nor "mouseup", try a mobile-library like jquery-mobile (http://jquerymobile.com/) or this i found (http://touchpunch.furf.com/)

Upvotes: 1

Related Questions