Solved

jQuery touch for mobile design

Posted on 2013-01-17
23
642 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

617 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