The dropdown opens and closes fine but the click event / or touch event isn't being fired. I put together a tiny test case demo but its just as easy to run the twitter bootsrap docs. I have tried this on Android and iOS devices.
I was hoping to rectify by including an Events library like, jQueryMobile or Hammer.js but I'm not sure if this will help as Twitter Bootstap (I think) includes its own touch handlers.
Anyone else come across the problem?
As a work around to this problem I used the Jquery Mobile touch events and listened for tapevents on the dropdown. Here is a simple implementation:
$(".dropdown-menu").on("tap", "li a", function(e, ui){
e.preventDefault();
if ($(this).attr("data-toggle") === "modal")
{
$($(this).attr('href')).modal("show");
}
return false;
})
Seems to be a known issue that's resolved in bootstrap 2.1.2 - https://github.com/twitter/bootstrap/pull/5054.
Edit: tried to apply the changes in the ticket about, but couldn't get it to work either.
#CrimsonChin - can you pls elaborate on your implementation. I tried your code, but using JQM with bootstrap I get all kinds of weird behaviors.
Related
I'm using eonasdan's bootstrap datetimepicker plugin for my website. My website is running in ASP.NET MVC 5, it has jQuery 1.10.2, bootstrap 3.3.6, requirejs and several other plugins. The problem I'm having is that the datetimepicker is not working properly in Safari (iphone, ipad). When I click the textbox the calendar will appear but when I click on a date it will close the calendar and won't select the date or enter it in the textbox. Its as if the area is not clickable by the touch event. I tried running the plugin in a separate application and its running fine, but for some reason it doesn't work in this website. I tried upgrading to jQuery 2 and got the same result. It doesn't throw any error or logs anything either so i have no clue whats going on. Can someone please give me some advice on how to fix this.
Here is a screenshot of the calendar:
Ok I finally figured out what was the issue. The project was referencing fastclick.js and attaching it to the DOM. This was causing erratic behavior in touch events. As soon as I got rid of fastclick everything started working nicely. So be careful when using fastclick.js since it's not very reliable.
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
I am working on Angular JS draggable directive. My code is similar to this Plunker
Both my code and this plunker work perfectly on windows when operating with mouse. But on any tab where touch is involved it is not working at all. what might be the reason behind this? any idea how to make it work?
A directive was implemented to control touch events, it is ngTouch. You can find more information here:
http://docs.angularjs.org/api/ngTouch
I additionally I think this post can be helpful:
Javascript Drag and drop for touch devices
I am working with AngularJS calendar (Which is essentially jQuery Full Calendar by Adam Shaw wrapped for angular). Here, the calendar event-item clicks worked both in ipad and desktop fine, until I brought in fastclick.js by ft labs (https://github.com/ftlabs/fastclick). Now, calendar event-item clicks works only on desktop, but not working at all on the ipad!
However, other ng-clicks work fine with fastclick both on desktop and iPad.
I understand how fastclick.js works by simply adding touch-end event listeners and calling click events within them, and cannot understand why this would fail with calendar event-item clicks.
Note: I tried using ngTouch instead of fastclick, but their, the ng-click doesn't become fast. According to google, ngTouch's ng-click cannot be used with jQuery
if all else fails you can inspect which events are linked to your elements with visual event: http://www.sprymedia.co.uk/article/visual+event
This adds an overlayer to any web page and let you visually inspect the JS code that's linked to an element (it shows you the piece of code in a pop up).
this way you can easily see if everything is set up correctly.
PS: I have no link to this tool or it's makers.
I had similar issue. fastclickjs blocks every jQuery .click() . But if you dispatch event without jQuery everything works fine.
Well this is an old question, but maybe it helps somebody.
I had a similar problem, and even fastclick.js didn't help and wasn't fast enough on the iPad.
The problem is that on a normal browser click event (on an iPad) has a delay of 300ms on touchstart and again 300ms on touchend.
fastclick.js also had some conflicts like yours with the calendar.
So i just wrote an own directive and called it ng-mobile-click.
Directive ngMobileClick:
App.directive("ngMobileClick", [function () {
return function (scope, elem, attrs) {
elem.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply( attrs["ngMobileClick"] );
});
}
}]);
Usage in templates:
<input type="button" value="somevalue" ng-mobile-click="someFunction(someParam)"/>
Advantage:
Will never conflict with standard click events.
Disadvantage
You have to refactor your code where you need it
Very simple jQuery doesn't work in Safari for iPhone and iPod touch. I make a simplified case:
$(function(){
$("#boto").click(function() {
$("#boto2").fadeOut("slow");
});
})
http://jsfiddle.net/vWfNj/
http://www.mig-marketing.com/proves2/3.html
It works in computers, it works in iPad but not in my iPod touch. I'm so surprised, I don't understand. Does jQuery needs anything special for Safari in iPhone?
The iphone doesnt have a click event, it has a touch event try this.
$('.class').bind('touchend', function () {
//Code
});
Edit : No idea what your comment means but here....
$(function(){
$("#boto").bind('touchend', function () {
$("#boto2").fadeOut("slow");
});
})
Be aware that on iOS 5, your #boto has to be inserted into the DOM before you attach event handlers to it. I had a similar problem a few days ago : jQuery events on iOS 5
try using .touch instead of .click as a touch event is fired when you click on Any touch supporting device.
I found out that the only problem is with the hosted jQuery library from Google. I don't understand why my iPod touch can download the page but not the jQuery library. I don't know if it is a problem in all iPhones and iPod touch...
Anyway If I download the jQuery library, it works fine. And of course the click function works in the iPhone.