ngTouch fast click not working on mobile Safari - javascript

I'm creating an iOS web app with AngularJS 1.2.10 and use ngTouch to achieve fast click functionality. However it does not seem to work. There is still a noticable delay when using ng-click.
As a test I removed ngTouch and added the fastclick.js library and this seems to work as expected.
Any ideas?

I've found that including jQuery seems to break ngTouch on Angular 1.2.9 (I've not tested it on 1.2.10). My solution was to remove jQuery (which in my case wasn't too painful, as I don't include any plugins that depended on it).

Related

Keep getting jQuery conflicts, can't resolve

I'm currently updating the website http://www.dev.optiekvandevecht.nl/, I updated it from Joomla 3.3.6 to Joomla 3.4.1. Before updating to 3.4.1, a few lightbox thigns wouldn't work. Right now, I've updated Joomla, and the lightboxes work fine, however, now the nivoSlider seems to be broken (and I suppose it's got to do with jQuery errors, .nivoSlider is not a function.
I honestly don't see what is wrong, it's a Joomla module called ARI Image Slider, but I can't find anything related to the issues I run into.
I deleted an (apparently) unused extension and the problem was solved
It seems like the jquery is already included in any of the extension. Try disabling jquery in any one extension then check it. I hope it would work.

Triggering click event on an element not working in IE8

I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE:
I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.
As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
docs for IE guide.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});
Docs for angular.element
Change the jquery version to lower. By seeing this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle
$('#secondClick').click();
Edit: You can forward mouse events through elements with good browser support using: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
If you're fortunate enough to not have to work with older browsers then you can get away the pointer-events CSS property.
#firstClick {
pointer-events: none;
}

JqueryMobile issue when working with Knockoutjs

I found jquery mobile is not rendering correctly when the element is generated by knockoutjs (or probably not rendering correctly when element is generated dynamically). See the demo at http://jsfiddle.net/wRRZk/1/
updates:
One solution is to load jquery-mobile js file after KO binding finished as shown in http://jsfiddle.net/wRRZk/3/, however this doesn't solve the problem that jquerymobile render fail when changing KO model dynamically, as shown in http://jsfiddle.net/wRRZk/4/
I think you'll need to tell jQueryMobile to create those elements into the jQM enhanced version using the API. Check here :: http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html and look halfway down for "Enhancing new markup" and the section just below.
As for the create/refresh ... might need to be somewhat judicious in know when and where you're adding new stuff, and whether a create or refresh is needed.
I've done a new version of the jsFiddle here :: http://jsfiddle.net/wRRZk/5/.
I'm also removing from the model afterwards, which does seem to remove the links too, BUT, I think that may also be because the jQM enhancement is keeping the same anchor, thus the reference knockout as is still valid.
Not too sure how well that will work for the other enhancements done by jQM.

JavaScript error using latest lightbox

First of all, I'm not good with JavaScript at all. I followed all instructions on this page:
http://www.lokeshdhakar.com/projects/lightbox2/
Visually everything loads fine. However, visual studio throws this error while running. If I hit continue everything seems to be loading fine. I see all buttons, animation, etc. I can only guess that something not loading properly. But not sure..
I think i had the same problem as this. In the end I decided to go with this version of a different lightbox instead as it works like a jQuery plugin
http://leandrovieira.com/projects/jquery/lightbox/
For me I felt it was a lot nicer since it worked with jQuery as a Plugin, and didnt rely on the 6 js files!

Is jQuery UI tabs broken in rc6?

I've been using jQuery UI v1.6rc2 for a while, and wanted to upgrade to 1.6rc6 to see that they haven't made any breaking changes. It seems they have; all of my tabs stop working whenever I switch to rc6.
There seems to be two things wrong. First, the manual advocates using the following:
$('#container').tabs();
However, with rc2 I've always had to do this:
$('#container > ul').tabs();
So when rc6 is in effect, none of these methods work.
Also, Firebug reports the following error when rc6 is installed:
$.Event is not a function.
this.namespace+'-state-disabled').attr("...event[prop]=event.originalEvent[prop];}}
All Javascript/jQuery executed before the call to .tabs() work fine. It breaks in both Firefox and Chrome.
You need to upgrade to jQuery core version 1.3.1
UI 1.6rc6 only works with 1.3.1

Categories