hi,
.click() is not working on some Android devices (it works but have to click twice…)
no probs on iPhone so far…
this is for standard nav show/hide that is used in mobile devices…
so what would be best event to use, mouseenter? mousedown?
or, as I saw suggested in some SO threads something like
$('.List li').on('click touchstart', function() {
$('#mobileMenuButton').on('mousedown touchstart',function(){
any opinions? suggestions?
thank you…
The reason why click only works on the second time on some hand held devices is because the first click is emulated as mouseover. You could perhaps use mousedown or if it is a hover nav then use mouseenter or mouseover. You could perhaps even solve this just with CSS and no JavaScript. Because first click is emulated as mouseover you can have a rule like this:
.List li:hover ul {
display:block;
}
actually, I forgot to mention… this is for code that is used only for mobile, so no :hover is involved…
(you mean use mouseover instead of :hover? well, as mentioned, no :hover involved, as this code is used only for mobile…)
I guess I will try mouseenter (or mousedown…)
how about the (..).on('........') code? my understanding is this is needed when you’re applying it to a link created dynamically (‘on the fly’), but that’s not the case here…
thank you…
well, I fixed it with mouseenter (mousedown wouldn’t do it…)
but I’m still not convinced… it still doesn’t work 100%… (one other thing that happens is that after closing the nav, to open it again I have to click more than once…) this is a pain… how do people do this… it’s hard to figure out & glean from other websites b/c on mobile you can’t see source code, Javascript, or any of that…
I think we’d need to see the site to offer specific help (although I don’t have android to test - the iphone seems to work fine with .click()).
There’s an old article on Sitepoint about the touch delay feature/problem.(Remember though that touch delay is there so that you don’t accidentally click items when scrolling)
In the end you will probably have to make reduced test cases to debug properly. Try creating a page with a single toggle click action and do your testing there.
Try something simple like this basic click action accordion:
http://www.pmob.co.uk/temp2/accordion-toggle.html
Does the above still exhibit the double click problem in android?
As you’re using jQuery anyway, you might consider using jQuery mobile then, which provides a tap event. The full library comes with quite some overhead, but you can customise the download and just get the event-related stuff.
If you want to implement it yourself, the basic idea would be a combination of the touchstart and touchend event with a certain threshold:
const THRESHOLD = 750
$.fn.tap = function tap (cb) {
this.on('touchstart', startEvent => {
const tapHandler = endEvent => {
if (startEvent.target === endEvent.target) {
cb.call(startEvent.target, startEvent)
}
}
this.one('touchend', tapHandler)
window.setTimeout(() => {
this.off('touchend', tapHandler)
}, THRESHOLD)
})
return this
}
There’s also an article on touch events at the MDN which you might check out.
Like many jQuery methods, .on() is overloaded. It can be used for event delegation as well as usual event bindings; .click() et al. are just shorthands for .on().
hi Paul…
thank you for your response… just reviewing latest responses now…
site is www.fotoartepuertovaras.cl/
(prob is on the link at top left to show/hide nav… has to be viewed on phone or tablet though, of course… in desktop it looks (and works) completely different… have never tested on Android tablet, I think I can safely assume the same prob occurs?)
the CTA is a toggle, and sometimes have a hard time closing the nav too (you can also close it by clicking anywhere on the page…)
thank you…
works fine in Android (show/hide drop-down content, right? everything works fine, show and hide… in all three examples…)
so how do I look up how this was done?
thank you…
thank you m3g4p0p…
oh brother, I don’t like jQuery Mobile, they always add markup (the same reason why I always hated jQuery UI), but well, if I custom-download, only for the events, maybe it won’t add markup??
will look into this… thank you…
you mean w/o jQuery Mobile? not sure here, what you meant…
so I downloaded just the event stuff…
and am looking at this page,
am a bit confused… when you tap on that green square near btm of pg what happens is the green square turns another color (it says addClass ('tap')), but I don’t see a CSS class “tap” in that code…
also not sure what is meant by that warning in the yellow square (vclick?)
now the code you posted is code that I can implement w/o using jQuery Mobile? (as mentioned, not sure if that’s what you meant…)
where does the CTA for which I want to apply this code come in?
how would I implement this code for my CTA, which is $("#cta_nav")???
thank you very much… I appreciate your help and your taking the time to post this code…
it occurs to me…
I’m using this jQuery swipe plugin for swiping the photos…
am wondering if this one has touch events or only swipe??
(this pg has a lot less info than when I visited it about two years ago… I don’t see touch events, but just wondering if there’s something here I can use… this plugin is awesome, it works like a charm… I had no problems at all implementing it…)
this one
looks like a possibility… (saw in a SO thread…)
(in light of what PaulOB said about touch delay, then, I should use Hammer-time.min.js?
thank you…
so I have a test page here,
I applied the hammer, I think it works well (but have not tested on Android… my friend with the Android phone left this morning…;~)
I would appreciate it if anyone could test on Android (and any other mobile devices, but mostly Android since I can’t test on Android now… thank you…)
it’s for the link on top left, to show/hide nav…
(for some reason (can someone enlighten me?) other links with .click() there’s no problem at all… (for example the nav items (and sub-items), np at all w/those with click()… and other links (language switch, color scheme switch, also use .click(), those are no problem…) why is there a problem only with the link for the nav?
thank you…
This is really a JS question I believe and outside my scope but you seem to be implementing some sort of hover effect on that nav because on desktop if you click and then don’t hover on the nav the nav fades away so seems to suggest that you are implementing both click and mouseout events which I guess is going to confuse the issue.
I don’t seem to run into those issues when doing a simple click effect like this old demo but I tend to favour offering the same experience to both desktop and mobile and just employing a simple click to show and a click to hide.
Moved to JS category.
hi Paul…
thank you for your response…
please understand, this page does not apply to desktop… if you look at the “real” site,
www.fotoartepuertovaras.cl
you will see design/funcionality for desktop is completely diff from mobile…
this test page I built by grabbing src code (in Chrome simulator, mobile mode…;~) it’s only a test pg, and only for mobile devices…
yes I guess I should have posted in JS group…
thank you Paul…
I meant on the desktop simulator in chrome.
I actually tested on a real iphone 5s also.
The behaviour is a little bit erratic on both and after a number of clicks the menu won’t show or hide but if you wait a while it starts working again. It sounds like the logic in your js is flawed but I’ll leave it to one of the JD experts to look under the hood
ok… thank you Paul…
oh brother… not sure what to do at this point… esp since I can’t myself test on Android…
Have you tried installing Eclipse on your computer?
It’s an Android emulator that lets you emulate any Android device
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.