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
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
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 problem when i open keyboard from android.
I am using phonegap to make a mobile application, It works well, but when i press a text box and open the keyboard, later when i close the keyboard leave blank the same size keyboard.
I 've looked everywhere and can not find the solution
Please help me!!!
attached screenshots
Thanks
After 2 years I answer the question ... A little late. Suddenly it can be useful for someone.
I never found the reason why this happened. The only solution was to recreate a project from scratch, and pass the content that it had to the new project. I configured everything and it worked without problems.
I also installed crosswalk, I could have influenced the solution the problem.
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/
I checked related posts but none of these answered my question. So this is the code i use:
<script type="text/javascript" src="/media/datepicker.js"></script>
Inside the datepicker.js i have the following:
$(function() {
$("#id_picker").datepicker();
});
I also tried to put document.ready() around it, but that didn't help neither. The Datepicker is showing I and can use some key controls but I can't click on a date so it would appear into my textbox where I open the datepicker with an onclick. So I can't select another date, it just doesn't select the date and because of that the dialog stays open until I click out of it.
Any help please? In Firefox, Chrome, Iceaweasl it's working perfectly.
UPDATE****
Apparently this had to do something with IE itself, i tried on many other IE's on different computers where i didn't have this problem. I couldn't trackdown what exactly could be the issue but for me this case can be closed.
Regards,
T
If you run IE on windows server 2003 or 2008, please refer the page Can Windows' enhanced security break jQueryUI's datepicker?
You are probably loading jQuery from the local file system. Try loading from a web location, such as:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js