jQuery touch for mobile design

Hi guys,

I am looking for some advice on how to implement touch for tablets and mobile devices that support it.

I currently have a jQuery mega-menu theat requires a hover to activate the flyout submenus. However, I am also aware that touch screens do not have hover.

If anyone could tell me how to implement touch so the menu can still function properly on tablet device please?

Thanks in advance!
rafique12Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
In bold :
jQuery('a.dropdown-toggle').on('tap', function(e) {      
    e.stopPropagation();
   var ddmenu = jQuery(this).next(".dropdown-menu");
    if( ddmenu.is(":visible") ) ddmenu.removeClass("open");

    jQuery(this).trigger("click");
});
0
 
LZ1Commented:
It will depend on your current code/markup. What are you currently using?
Do you want to redo your menu/site so that it uses jQuery mobile?
0
 
rafique12Author Commented:
Yes please! :-)
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leakim971PluritechnicianCommented:
0
 
LZ1Commented:
I've worked with jQuery mobile before and it is pretty cool.  However, we're not going to be able to redo your site entirely for you. So here are some starting points:
1. Read the Docs & Demos
2. If your just focusing on the menu items, you'll want to start Here

The best first step is to just start building. In your case, depending on your environment, I'd build out a couple of test pages and play with them.

Again, if you just want to do the menu start at the URL above, download the jQuery mobile and start implementing.

Post back here with any specific questions.
0
 
rafique12Author Commented:
Thankyou both, I will take your advice and post back!
0
 
rafique12Author Commented:
I'm not sure where to start as I already have a menu that uses jQuery but it relies on a hover I just need a way replace the a hover with "touch".
0
 
leakim971PluritechnicianCommented:
currently you have something like:
$(menu_selector).hover(fct1, fct2);
now use :
$(menu_selector).bind("mouseover vmousedown", fct1).bind("mouseout vmouseup", fct2);
0
 
rafique12Author Commented:
I'll give it a try. Thank for the help!
0
 
rafique12Author Commented:
Okay, I've found half the solution:

When I touch this I can open the dropdown but I need to close it when I touch it again?!?

<script type="text/javascript">
jQuery('a.dropdown-toggle, .dropdown-menu a').on('touchstart', function(e) { e.stopPropagation(); 	
});
</script>

Open in new window


Please help I'm almost there!
0
 
leakim971PluritechnicianCommented:
you talked about hover and now you want to toggle
0
 
rafique12Author Commented:
Hover is sorted, Sorry. I have the hover on touch. Now I need to toggle to open the nav and to close it!

I'm almost there. I can accept your answer and open a new question if you like?
0
 
leakim971PluritechnicianCommented:
which code are you using for hover?
0
 
rafique12Author Commented:
Okay, the hover was working for touch but I couldn't see it because at w<=980px; the Dropdown menu closes. I used this code to toggle the dropdown open and was able to use the touch to "hover".

<script type="text/javascript">
jQuery('a.dropdown-toggle, .dropdown-menu a').on('touchstart', function(e) { e.stopPropagation(); 	
});
</script>

Open in new window


Now I need to find a way to "toggle" in order to close the menu.

This is HoverIntent.js:
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);

Open in new window


Would you like a demo link?
0
 
leakim971PluritechnicianCommented:
yes, please
0
 
rafique12Author Commented:
if you dont have an ipad, close your screen till the dropdown closes
0
 
leakim971PluritechnicianCommented:
where the menu you're talking about?
0
 
rafique12Author Commented:
on the left!?!? There's only one...
0
 
leakim971PluritechnicianCommented:
jQuery('a.dropdown-toggle').on('touchstart', function(e) {       
    e.stopPropagation();
    jQuery(this).trigger("click");
});

Open in new window

0
 
rafique12Author Commented:
I've put it in but still don't close...

<script type="text/javascript">
jQuery('a.dropdown-toggle').on('touchstart', function(e) {       
    e.stopPropagation();
    jQuery(this).trigger("click");
});
</script>

Open in new window

0
 
leakim971PluritechnicianCommented:
what about :
jQuery('a.dropdown-toggle').on('tap', function(e) {       
    e.stopPropagation();
    jQuery(this).trigger("click");
});

Open in new window

0
 
rafique12Author Commented:
I think i need to do like a removeClass('open') when I touch the toggle for the second time. I just dont know how to do it!!
0
 
rafique12Author Commented:
Yep!
0
All Courses

From novice to tech pro — start learning today.