Bootstrap Datetimepicker not working in Safari - javascript

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.

Related

The javascript of bootstrap v 4.3.1, is not working properly in firefox v 65.0.1, has anyone had this problem yet?

When accessing the bootstrap v 4.3.1 documentation in firefox v 65.0.1, I noticed that the javascript is not working properly, for example, the carousel component is not following its normal flow, which is to move to the next slide with the its transition animation, other components have the same problem. I noticed that in version 4.0.0 of bootstrap this problem does not occur. I recorded a video with the carousel example, follow the link:
https://youtu.be/ksT7KgZZXhY
I have a site with this version of bootstrap, which is not working because of this problem, and in other browsers it works normally and in the console does not present any problem, I do not know exactly if the problem is in firefox or javascript bootstrap, I tested in other machines with old versions of firefox and worked normally, but after updating firefox gave this problem again.
I've been able to solve the problem. What happens is that in the performance settings of my computer the "Animate controls and elements in Windows" option was cleared, I do not know if this is a bug, as this is the first time I see a windows customization setting influencing loading of a website, anyway I left the link of the video with the solution.
https://youtu.be/9NhlpJpKpuQ

Fullcalendar listWeek click issues on iOS

When I use the "listWeek" as view on my fullcalendar, it doesn't fire the eventClick function (on mobile devices).
It works perfect on desktop, where I'm using the "agendaWeek" view.
Does anyone have experience with this problem and know how to fix it?

Pickadate Clear/Close Button not closing picker in IE9

I’m having a problem with Pickadate & Pickatime on a site setup using Foundation,
the client has just noticed an issue with the Clear and Close buttons not closing the Pickadate pop-up in IE9,
which is making it impossible for IE9 users to complete the form.
This seems to be an intermittent problem,
it looks like the Clear button will work the first time,
but if you try and do this a few times in the same field you get the same issue.
The Close button was working for me in my tests in IE9 which would be a get out for users,
but sadly the client has come back to me saying that in their tests in IE9 (running on Citrix),
the Close button is not closing the Pickadate either which is making the form unusable again.
Here is the link to my demo:
http://my-allianz-fa-02.designchief.ie/claim-notification.html
The sequence is:
scroll down to "Please select a claim option" dropdown
select Accident/Incident option
In the Accident Details fieldset you will find the "Date of Accident" Pickadate field (Pickatime also used in the field next to this one)
Everything works as expected apart from IE9 where you can select a date ok, but when you re-enter the field and try to Clear the info, the Pickadate flickers (disappears and then reappears) and then cannot be closed.
The site was built using Zurb Foundation 4.3.2, Pickadate 3.5.6 (latest version) and is using jQuery 1.10.2.
This issue is not present in the Pickadate demo - http://amsul.ca/pickadate.js/
which makes me think that something in the Foundation JS, or in the setup is causing the issue?
But, I have not found anything online that relates to this specific issue so I am reaching out in the hope that someone recognises the problem.
If the issue cannot be resolved then maybe you could suggest a solution using a new plugin but the preferred option would be to use the Pickadate solution as it suits the needs of the site better.
Any help much appreciated, thanks.
My fix was to revert to 3.5.4 version, and clear and close button are working as expected. You can download that version from:
https://github.com/amsul/pickadate.js/releases

jQuery Slide Panel Drag to Open function with mmenu plugin

I am working on a side project and I am trying to make a touch function to open the side panel on iPhone and Tablet. I am struggling really bad with this. I have tried a different file order in header. But it still doesn't work. I am no jQuery expert yet. If someone could tell me why my touch function doesn't work.
http://codepen.io/anon/pen/IBrcC
Any help is appreciated!
Edit!
Problem solved I tried go back some version of menu, and it seems to be a bug in 4.1.3 Version.

Twitter bootstrap 2.1.1 Collapse not animating when Opening a collapsible

I'm trying to create a simple button to open/close a collapsible part of my website implemented in twitter bootstrap. I'd like to use the collapsible javascript plugin, but it doesn't seem to work just right: The folding animation happens "on close", but "on open" it's instantaneous.
Here's a jsFiddle demostrating the issue.
http://jsfiddle.net/whUvL/2/
On my navigator (Chrome 22.0.1229.94 on mac) the first time the button is clicked, the h2 "pops in" instantaneously. Clicking the button again "folds" the h2 with a nice animation. Clicking again "shows it" very quickly.
How can I have the animation work "when opening" as well as "when closing"? Should I add more html/css, or maybe change some js?
Also, I've noticed that this happens with jquery 1.8.2 and the latest twitter boostrap. With jquery 1.7.2 and bootstrap 2.0.2 it seems to work just fine. I'd like to use the latest of both if possible.
Ok I have found the problem. It's right there in the docs:
Requires the Transitions plugin to be included.
In my defense, I must say that that part was grayed out and was not very evident as a requirement.
Once I included the transitions module, the animations started working again:
http://jsfiddle.net/whUvL/4/
Kudos to #funzionpro, who put me on the right track - once I knew that including the complete set of javascripts it worked, the rest was easy to deduce.
(I will mark this answer as correct in two days, until then I must leave it open because SO's policies regarding auto-responses)
it seems to work fine if you add bootstrap.js of 2.1.1
working fiddle: http://jsfiddle.net/whUvL/3/

Categories