Solved

jQuery touch for mobile design

Posted on 2013-01-17
23
635 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 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