See example here: http://jsfiddle.net/KK36F/2/
How to solve this?
My old answer of:
http://jsfiddle.net/KK36F/5/
I've used jQuery noConflict to work around flowPlayer. As I can't
reproduce your problem (flowPlayer is blocked on my site rrrrr) it's
the best I can do.
Didn't work... I've managed to reproduce the problem and track it down to a line in the flowplayer code:
// skip IE policies
document.ondragstart = function () { return false; };
If you make this safer (as it is a JScript only IE thing), the draggable works again.
if(document.ondragstart) {
document.ondragstart = function () { return false; };
}
Related
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
I have MVC app.
I have written below code in the JS in Create view.
Basically on the basis of selection on drop down I show and hide the div.
Now the problem is below code works perfectly in Google chrome and Mozilla Firefox.
but now working in IE 8.
What should I do ?
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
if(ptype=="On Account")
{
$(".InvoiceDiv").hide();
}
else
{
$(".InvoiceDiv").show();
}
});
I am not sure what real issue is but since you are using jQuery why don't you use it for your ptype, too? With this, cross-browser issue will be minimized (if not completely avoided).
$('#PaymentType').change(function(){
var ptype = $(this).val();
...
});
Hope this helps.
If your Js files has full of references to a method called document.getelementbyid
Or order of your Js files and Css files which you import to program with < Link / > Tag ,
Reorder them and test it in IE
i think that the reason your code breaks right at the beginning of the function.
i'm still new to the mobile / fluid / responsive game and am having issues with the submenu on this site: http://www.medowsconstruction.com/
the click on mobile should replace the :hover function automagically right? seems to be the case with the standard Foundation theme.
i hadn't changed anything in those mobile specific areas of the framework, so what did I do to mess it up and cause the submenu to not show on iPad / touch?
thanks for any help
It seems that the problem is that this is not a standard pure CSS dropdown menu, as one might assume. Instead, it's been controled by jQuery. You can see it in the app.js file:
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
So you should modify the script in order to work with a touch for selected devices (there is a good discussion on that topic here). Here I am using a simple statement. I have not been able to test it in iPad, but you could have good results if you try to use something like (untested!):
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
$(this).children('.flyout').slideToggle();
});
} else {
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
}
This should give you some clues on how to deal with that. Let us know if it works.
There is also a lot of information in this stackoverflow discussion about hover and touch devices.
thanks to #hernan for setting me in the right direction with things.
i ended up fixing it up by mixing the Foundation code with his code with some better selectors. here's what I landed with:
if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
$('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
e.preventDefault();
var flyout = $(this).children('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function(){
lockNavBar = false;
});
}
else
{
flyout.slideToggle(500);
}
});
i'l definitely be checking into those two links / discussions you mentioned, too, hernan.
thanks again-
It took me a little bit, but I figured out that I can't click on my inputs because of the touch.punch script I'm using to enable jquery UI drag functionality on touch devices. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?
JEditable + jQuery UI Sortable + jquery.ui.touch-punch
I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
I think this is a better solution as it always uses the native functionality for any input or textarea fields.
To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!
$('.input').bind('click', function(){
$(this).focus();
});
Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.
Change this section in jquery.ui.touch-punch.js (on approximately line 30):
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
To this:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
Best of luck!
OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script.
I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
Thanks to #Danwilliger and #jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:
https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.
Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):
$('form').on('touchstart', 'input,textarea',function(){
$(this).focus();
});
One solution is to use a handle.
Add an icon inside and use this to drag. Then the inputs work fine.
<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});
I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.
What worked for me was
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
$(touch.target).focus();
} else {
event.preventDefault();
}
I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).
Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:
$('input,textarea').bind('click', function(){
$(this).focus();
});
I am working on a asp.net mvc site that uses facebook social widgets. Whenever I launch the debugger (ie9 is the browser) I get many error popups with: Error: '__flash__removeCallback' is undefined.
To verify that my code was not responsible I just created a brand new asp.net mvc site and hit F5.
If you navigate to this url: http://developers.facebook.com/docs/guides/web/#plugins you will see the pop-ups appearing.
When using other browsers the pop-up does not appear.
I had been using the latest ie9 beta before updating to ie9 RTM yesterday and had not run into this issue.
As you can imagine it is extremely annoying...
How can I stop those popups?
Can someone else reproduce this?
Thank you!
I can't seem to solve this either, but I can at least hide it for my users:
$('#video iframe').attr('src', '').hide();
try {
$('#video').remove();
} catch(ex) {}
The first line prevents the issue from screwing up the page; the second eats the error when jquery removes it from the DOM explicitly. In my case I was replacing the HTML of a container several parents above this tag and exposing this exception to the user until this fix.
I'm answering this as this drove me up the wall today.
It's caused by flash, usually when you haven't put a unique id on your embed object so it selects the wrong element.
The quickest (and best) way to solve this is to just:
add a UNIQUE id to your embed/object
Now this doesn't always seem to solve it, I had one site where it just would not go away no matter what elements I set the id on (I suspect it was the video player I was asked to use by the client).
This javascript code (using jQuery's on document load, replace with your favourite alternative) will get rid of it. Now this obviously won't remove the callback on certain elements. They must want to remove it for a reason, perhaps it will lead to a gradual memory leak on your site in javascript, but it's probably trivial.
this is a secondary (and non-optimal) solution
$(function () {
setTimeout(function () {
if (typeof __flash__removeCallback != "undefined") {
__flash__removeCallback = __flash__removeCallback__replace;
} else {
setTimeout(arguments.callee, 50);
}
}, 50);
});
function __flash__removeCallback__replace(instance, name) {
if(instance != null)
instance[name] = null;
}
I got the solution.
try {
ytplayer.getIframe().src='';
} catch(ex) {
}
It's been over a months since I last needed to debug the project.
Facebook has now fixed this issue. The annoying pop-up no longer shows up.
I have not changed anything.