The click event should work fine:
subMenu = $(".sub-menu")
//....
subMenu.show()
$("a.mobile").click (e) ->
menuContainer.toggle()
e.preventDefault()
This should toggle the menu on click/tap. The weird thing is that it does it just fine for the first open and close.
Starting with the second time, to open, I have to click "a.mobile" twice.
I've tried bind, and a bunch of other options. The CSS is actually displaying the link as it were hovered when it's not double-tapped.
I'm not 100% sure about .click() function, however i use .on('click') for handle events on my application and it works everywhere (including IPads). Nevertheless as suggested by the comments, perhaps there is something elsewhere preventing the click to work as you expect.
Related
I'm using jQuery Mobile to develop one single page to use in Android Webview.
There is an button which I need put some pressed effect, and then I use vmousedown to add press style class and vmouseup to remove the class added before. However, there are something interrupt the vmouseup process.
Reproduce:
First, press one button, and it trigger the vmousedown event.
Then, keep hold your finger and move outside the trigger area.
Finally, loosen your finger and you will see it keeps the state that you hold it.
I have done a demo to test, and find that it even won't trigger vmouseout or vmousecancel, the last event have been triggered is vmousedown.
Is there anyone know why this happen and how to solve this?
This is code : Fiddle
When I written an example to test gesture event, I noticed that, the taphold event will be triggered and then I put it in on method and this problem fixed.
I have div which is cloned on clicking image next to And.
Right click event listeners are working in jsfiddle but not actually working in my page. :(
Do i need to do something extra. I tried adding different jquery links , but to no avail.
i'm having trouble in chrome opening the popup for the file upload of a file input type.
As you can see here: http://jsfiddle.net/cavax/K99gg/3/, clicking on an elements can trigger a click on the file input, but for example hovering a element wont trigger a click on the input.
$('#test').on('click', function(){
$('#upload').trigger('click');
});
$('#test').on('mouseenter', function(){
$('#upload').trigger('click');
});
In the real life i'm having this trouble because in a web app i'm loading throw ajax a content witch has inside an input file.
At the end of the load the popup file must open, but there is no way to get this works on Chrome (workign on FF).
The problem i guess is that the action is not generated by a mouse click (hover, timeout etc) so chrome wont trigger the fileupload.
I've also tryed this: http://jsfiddle.net/cavax/K99gg/7/, so click on the element, wait then trigger the click but nothing, because there is the "settimeout" in the middle of the click and the trigger :(
$('#test').on('click', function(){
setTimeout(function(){
$('#upload').trigger('click');
}, 3000);
});
if you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works
Any idea to get this work?
If I remember correctly, mouseenter and mouseleave are specific to IE, not standard events. Maybe they were extended, but don't think they became a standard. So the event itself may generate you some problems.
To resolve this you can use a lib (like jQuery for example), that treats the browser differences (or you can check the code there and take what you need).
Second way... try mouseover... it worked better (again... didn't work with them for a while so things may have happened, but this is how I remember them to be).
There is no way to trigger click event of input file type, because of a security reason.
You may try a hack of this by setting your button/div position to absolute and top to -100px
It means positioning it outside the viewport by setting above style make it works.
But for mouseenter and mouseover i don't think it's going to work!
Edit:
Moved input outside the viewport and target click event
Example on click
Side note: Right now click occurs 2 times as you have written
$('#upload').trigger('click').click();
You just need
$('#upload').trigger('click'); // $('#upload').click()
unless you want it to fire more than single time.
I have an app im building with phonegap.
I'm listening for touchstart/ touchend events to make it responsive.
Sometimes, the event listener for the touchend will fire, but then, for e.g, an input will focus afterwards as the click event is fired 300ms later.
an example is, i have a menu sidebar. each sidebar list item listens to the touchend event. on receiving the event, the sidebar closes and the relevant page is shown. however, if the relevant page contains a form element that is where the user had clicked for the sidebar list item, the form element will get focused.
what is the best way to stop this across the entire app? it happens in various scenarios which vary with different phones.
Ive tried things like stopPropagation etc but these only work ina few cases, and i need to have a generic cross-app solution rather than adding in for each function, if possible.
something like:
$('body').on('touchend', function(){
//stop any further touchends/ clicks from firing
//apart from the 1 i do want
})
You could try 'touchcancel' instead of 'touchend', see if it works :) good luck.
your app goes to fast ;)
EASY WAY:
just put a setTimeout(gotopage(),100)
on every button/menu action
HARD WAY:
If you really don't want to put a setTimeout, you should take a look to how bubbling works, problem is here
TIP:
Anyway to avoid the 300ms you should use the Fastclick of FTLABS :
https://github.com/ftlabs/fastclick
and the use click event, it will do the job for you (you will still have to use setimeout trick)
I'm working on some tweaks for a web page, I'm using MVC and jQuery.
Basically I have some help icons on my page, when the user clicks on the icon, a bubble appears with a help description.
I have this code in my JavaScript for that page:
AddHelpIconMouseEvents: function(element, msg, divForm) {
$(element).live('click', function(event) {
if (event.type === "click") MyClassHelper.showHelpIconBubble(msg, divForm, event);
});
$(document.body).click(function() { $(divForm).hide('fast'); });
}
As you can see I'm using the document.body.click event to capture any click outside the help bubble, and hide the bubble.
Now consider this situation, I click on the help icon and the bubble is displayed, if I click anywhere else on the page, the bubble disappears as expected, but the problem I have is, if instead of clicking on a blank space on the page I click on a link, the link displays another section of the page, hides the section that contained the help icon but the help bubble does not disappear, it remains displayed.
This doesn't happen on Firefox, in which I can click on a link or on an empty space and the bubble disappear.
I think this may be related to the way in which IE handle events, I think I read something about it, so I wonder if anyone knows how can I fix this, I think I can put some code on the links and validate if the bubble is visible, hide it, but I don't like the idea, I think it is not a good solution, I wonder if there is another better way to handle this.
You can make a function which checks for the help bundle to check in DOM if it already exists. If so remove it from DOM. You have to call this function on every other link.