bernhard Posted May 30, 2016 Share Posted May 30, 2016 i'm currently porting a clients website from joomla to processwire (finally, it's a good week ) and we are using the old design for that. today i recognized that on tablets the menu doesn't work as expected, since the menu structure changed from joomla-chaos to pw-awesomeness the problem is the old multilevel problem when you have items and subitems and want to show the subitems on hover. on touch devices your clients will perform a "click" anstead of a "hover" and they will trigger a new pageload. i came up with a quick fix and would be interested in your opinions. seems to work really nice here: $(document).ready(function () { var menu = $('...'); menu.find('a').click(function(e) { console.log('clicked'); // early return if the parent has no hover-class if(!$('...').hasClass('...')) return; // prevent click when delay is too small var delay = Date.now() - $(this).data('hovered'); if(delay < 100) e.preventDefault(); }); menu.find('a').mouseover(function(e) { var time = Date.now(); $(this).data('hovered', time); }); }); 2 Link to comment Share on other sites More sharing options...
szabesz Posted May 30, 2016 Share Posted May 30, 2016 Interesting Do you think people will figure out how to use the menu? Link to comment Share on other sites More sharing options...
bernhard Posted May 30, 2016 Author Share Posted May 30, 2016 i find it really intuitive. it looks a bit clumsy on my screencast because of the mouse but it feels different when you are touching and not pointing. i'll send you the link so you can try yourself 1 Link to comment Share on other sites More sharing options...
gebeer Posted May 31, 2016 Share Posted May 31, 2016 Interesting solution, indeed. But it feels a bit hacky. I'd rather present a different menu layout to mobile devices as to avoid the hover problem in the first place. Something like off canvas or the likes. 1 Link to comment Share on other sites More sharing options...
ro-bo Posted May 31, 2016 Share Posted May 31, 2016 Hi Bernhard, read and try his: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly In the lower section of this page you can download this code doubletaptogo. I use this code in almost every project where a flyout navigation occurs. Robert 1 Link to comment Share on other sites More sharing options...
tpr Posted May 31, 2016 Share Posted May 31, 2016 DoubleTagToGo is interesting, thanks.. It could be easily rewritten to a non-jQuery version (at least by first look on the code). Downloading jQuery on mobile is too much, especially for users with limited bandwidth (err, for me for example ) Link to comment Share on other sites More sharing options...
ro-bo Posted May 31, 2016 Share Posted May 31, 2016 Hi tpr, ... Downloading jQuery on mobile is too much ... The actual JQuery version has 94,8 KB. I think that shouldn't be a problem today (pictures are usually much larger). Only an inefficient way of using JQuery could be a problem in some cases... Robert Link to comment Share on other sites More sharing options...
tpr Posted May 31, 2016 Share Posted May 31, 2016 On mobile I'm on a plan of 200 Mb per month so 94.8 KB is a bit steep. Link to comment Share on other sites More sharing options...
LostKobrakai Posted May 31, 2016 Share Posted May 31, 2016 Especially as e.g. zepto will give you probably 99% of what you're using of jquery in a fraction of the filesize. 1 Link to comment Share on other sites More sharing options...
bernhard Posted May 31, 2016 Author Share Posted May 31, 2016 Hi Bernhard, read and try his: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly In the lower section of this page you can download this code doubletaptogo. I use this code in almost every project where a flyout navigation occurs. Robert thank you robert. the demo does not work for me as expected. when i click on "blog" and then on "work" it fires the click and not the dropdown... On mobile I'm on a plan of 200 Mb per month so 94.8 KB is a bit steep. Especially as e.g. zepto will give you probably 99% of what you're using of jquery in a fraction of the filesize. looks nice, thank you you can try my menu on https://new.mentalestaerke.at/ as long as the page is there. would be nice to hear if it works for you or you have any problems. (you need the desktop version of the menu) Link to comment Share on other sites More sharing options...
Robin S Posted August 10, 2016 Share Posted August 10, 2016 On 31/05/2016 at 8:02 AM, bernhard said: i came up with a quick fix and would be interested in your opinions. seems to work really nice here: https://gitlab.com/snippets/20195 Just used this snippet - really great solution! 1 Link to comment Share on other sites More sharing options...
bernhard Posted November 2, 2016 Author Share Posted November 2, 2016 just for reference, i'm using a different approach on another project now: Link to comment Share on other sites More sharing options...
bernhard Posted January 18, 2018 Author Share Posted January 18, 2018 On 31.5.2016 at 6:31 AM, gebeer said: Interesting solution, indeed. But it feels a bit hacky. I'd rather present a different menu layout to mobile devices as to avoid the hover problem in the first place. Something like off canvas or the likes. Sorry for my delay The problem is that the touch device I am talking about is my Laptop with a standard sized screen Somehow this device behaves a little different than a regular non-touch device and it does not trigger hover actions even when a mouse is connected. Also here in the forum I have to click twice for the like-button... Link to comment Share on other sites More sharing options...
Recommended Posts