Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery touch for mobile design

Posted on 2013-01-17
23
Medium Priority
?
650 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 83

Expert Comment

by:leakim971
ID: 38787264
0
Technology Partners: 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 83

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 83

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 83

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 83

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 83

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 83

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 83

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 83

Accepted Solution

by:
leakim971 earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

773 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