Solved

jQuery touch for mobile design

Posted on 2013-01-17
23
636 Views
Last Modified: 2013-01-21
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!
0
Comment
Question by:rafique12
  • 12
  • 9
  • 2
23 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38787246
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
 

Author Comment

by:rafique12
ID: 38787258
Yes please! :-)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38787264
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:LZ1
ID: 38787314
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
 

Author Comment

by:rafique12
ID: 38788038
Thankyou both, I will take your advice and post back!
0
 

Author Comment

by:rafique12
ID: 38788241
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38788401
currently you have something like:
$(menu_selector).hover(fct1, fct2);
now use :
$(menu_selector).bind("mouseover vmousedown", fct1).bind("mouseout vmouseup", fct2);
0
 

Author Comment

by:rafique12
ID: 38788788
I'll give it a try. Thank for the help!
0
 

Author Comment

by:rafique12
ID: 38800260
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38800836
you talked about hover and now you want to toggle
0
 

Author Comment

by:rafique12
ID: 38800853
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38800862
which code are you using for hover?
0
 

Author Comment

by:rafique12
ID: 38800891
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38800895
yes, please
0
 

Author Comment

by:rafique12
ID: 38800903
if you dont have an ipad, close your screen till the dropdown closes
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38800943
where the menu you're talking about?
0
 

Author Comment

by:rafique12
ID: 38800946
on the left!?!? There's only one...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38800965
jQuery('a.dropdown-toggle').on('touchstart', function(e) {       
    e.stopPropagation();
    jQuery(this).trigger("click");
});

Open in new window

0
 

Author Comment

by:rafique12
ID: 38800975
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
 
LVL 82

Expert Comment

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

Open in new window

0
 

Author Comment

by:rafique12
ID: 38801072
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38801122
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
 

Author Closing Comment

by:rafique12
ID: 38802433
Yep!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert on input text 2 23
Two decimal 5 25
Jquery if else not working ... WHY? 5 23
Check input text, Number 6 26
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question