0

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

maddogandnoriko
  • 953
  • 2
  • 13
  • 30

2 Answers2

2

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);
Community
  • 1
  • 1
Nicos Karalis
  • 3,547
  • 4
  • 28
  • 59
  • New to mobile...what is the best way to set isMobile? – maddogandnoriko Feb 07 '13 at 13:40
  • thank you for the help. The answer turned out to be $("#template_select").change(function(){... click was detecting the first click and then a modal comes up with the options, the change was not detected until another click happened. – maddogandnoriko Feb 07 '13 at 22:26
  • relying on the user-agent is a weak detection, it would be better to just "not" detect the browser, and just to make a special site for mobile – FibreFoX Feb 08 '13 at 09:46
  • Actually we detection on mobile is made using the user agent. Even libraries like ``jQuery Mobile`` use the user agent to detect the mobile device. You can't garanty a mobile device with screen size. And if you know any other way to detect a mobile please let me know – Nicos Karalis Feb 08 '13 at 10:31
1

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/)

FibreFoX
  • 2,838
  • 1
  • 16
  • 40
  • can I dynamically load jQuery mobile if is a mobile device? – maddogandnoriko Feb 07 '13 at 15:24
  • 1
    you could try to get it on the server via agent, but if you just need the "events" just try it with touchpunch, just change you "listener" from ".mouseup" to the corresponding one (e.g. touchend) [more on html5rocks](http://www.html5rocks.com/en/mobile/touch/) – FibreFoX Feb 07 '13 at 15:40