jQuery click event just for touch, for all others hover -
i tried modify jquery code, use "hover" event on default desktop devices , take "click" function on touch devices. reason, there better usability separating them.
i posted whole code in fiddle: http://jsfiddle.net/syzc6/
$(document).ready(function(e){ $("header").hover(function() { if ($('#expandmenu').is(':visible')) { $('#menubar').removeclass('menu-active'); $('#switcher').removeclasse'switcheropen'); } else { $('#menubar').addclass('menu-active'); $('#switcher').addclass('switcheropen'); } $('#expandmenu').slidetoggle( "fast"); }); });
maybe there solution, have done before:
$(window).width() < 900 ? "true" : "false",
but detects current width on window load, , not kind of device…
thanks lot help!
you declare event based on conditions
demo http://jsfiddle.net/e2fc7/
var touchscreen; if (window.matchmedia("(max-width: 300px)").matches) { touchscreen = true; } else { touchscreen = false; } var evt = touchscreen ? 'touchstart' : 'mouseenter'; $("header").bind(evt, function () { if ($('#expandmenu').is(':visible')) { $('#menubar').removeclass('menu-active'); $('#switcher').removeclasse 'switcheropen'); } else { $('#menubar').addclass('menu-active'); $('#switcher').addclass('switcheropen'); } $('#expandmenu').slidetoggle("fast"); });
Comments
Post a Comment