I am using GWT 2.4.
There is a delay in scrolling, when viewing the web application in ipad(ios 7).
The scroll event fires only after the touch end event is completed, thereby making it look unresponsive at times. The scroll also freezes when I try to scroll when scrolling is already happening. Does anyone have the same problem? Please help me.
protected void addContentPane()
{
ScrollPanel touchScroller = new ScrollPanel();
touchScroller.setStyleName("touchScrollContainer");
touchScroller.setSize((width - 2) + "px", contentPaneHeight + "px");
touchScroller.getElement().setId(tabID);
touchScrollPane = new HTML("", true);
touchScrollPane.setHTML("A big boring String....");
touchScroller.setWidget(touchScrollPane);
contentPane.add(touchScroller);
}
}
Here's my code, it's straight from the showcase.
As I said I tested with GWT 2.5.1, mgwt 1.1.2, iOS7
public ScreenViewA(String id, boolean isOptions) {
main = new LayoutPanel();
scrollPanel = new ScrollPanel();
scrollPanel.setScrollingEnabledX(false);
headerPanel = new HeaderPanel();
title = new HTML();
headerPanel.setCenterWidget(title);
headerBackButton = new HeaderButton();
headerBackButton.setBackButton(true);
headerBackButton.setVisible(!MGWT.getOsDetection().isAndroid());
headerMainButton = new HeaderButton();
headerMainButton.setRoundButton(true);
headerPanel.setLeftWidget(headerBackButton);
main.add(headerPanel);
scrollPanel.setUsePos(MGWT.getOsDetection().isAndroid());
}
After debugging the javascript a bit, I found out that certain jars that I have included in my project were causing the delay. The jar was atmosphere-gwt-client-1.0.18.jar.
Also found out that I was using ACTIVE with input type textbox in the CSS which was causing the problem. I was using it to remove the outline that is shown in webkit browsers when textbox is active.
Related
I am trying to create my website in Material Design, however I found one issue with Material Select regardless whether I use MDB (Material Design for Bootstrap) or Materialize CSS framework. Both are working fine on Windows/OSX/Android , however for some reason when I open Material Select component on my iPad and click on it, there is a blinking cursor showing from the Background of the Dropdown.
Try the following code:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
I had the same issue on iOS devices, I am using select dropdown from materialisecss "http://materializecss.com/forms.html".
to fix the blinking cursor issue, I used reference code from below link and slightly modified that code.
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (check comment by "chi-bd commented on 17 Nov 2015")
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
jQuery('select').material_select(); to initialize materialise select and rest code is the fix.
the only problem was this was giving problem on desktop view so added mobile detection condition
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Add this code in document ready $(document).ready(function() { ... });
that's it. I hope this will sort out your issue.
Regards, and have a nice day :)
There is an open issue on github, #StaticBR proposed an approach to solve "Dropdown Broken on iPhone (and Safari in general)" issue, link here.
According to #StaticBR,
"The Issue is that IO13 Safari propagate TouchEnd Events before the Click event is propagated.
So if you have a click listener within an drop down, it is not correctly triggerd, because the Dropwdown is getting closed by the TouchEnd event. After that the click event is at a different position or does not longer exist.
Removing the touch event listener solved this issue for me."
Apologies, the above code works but then it stops the scrolling for drop-down.
For now I am using below fix, but it shows the blinking cursor first and then it hides it. but still this is not the perfect solution, if anyone has better solution please post here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
I am using bwu_datagrid in my Dart/Polymer webapp. In a paper-action-dialog, I am using the "grouping" grid to show a tree-table. The first time the dialog is opened, the grid looks fine. The second time the dialog is opened, it is fine in Chrome, but when I use Firefox or Safari, the columns in the non-grouped rows are scrunched to the left (overlapping each other), and the column headers have disappeared.
This was also happening in Chrome until I added the following code in the dialog's core-overlay-open-completed event handler:
grid.setColumns = columns;
grid.invalidate();
grid.render();
It appears that someone reported a similar issue back in November. Was this issue ever resolved and/or fixed?
I have come up with a workaround, that at least works for me and for the "issue 97 reattach" example that has been posted elsewhere. I don't know why it works, but I added a new method to bwu_datagrid.dart, called reshowGrid(). This new method is a stripped down version of "setColumns". I think the real key may be the commented out "style append".
void reshowGrid() {
if (_initialized) {
invalidateAllRows();
_createColumnHeaders();
_removeCssRules();
_createCssRules();
resizeCanvas();
_applyColumnWidths();
//this.shadowRoot.append(_style);
_handleScroll();
}
}
I call grid.reshowGrid() instead of grid.setColumns.
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'm trying to display an alert message when a user clicks on one of the vectors is in the vector layer. This works fine in all browser, except IE8.
map = new OpenLayers.Map(id, {
theme: null
});
vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(vectorLayer);
selectControl = new OpenLayers.Control.SelectFeature(vectorLayer);
vectorLayer.events.on({
'featureselected': onPopupFeatureSelect,
'featureunselected': onPopupFeatureUnselect
});
map.addControl(selectControl);
selectControl.activate();
// ...
function onPopupFeatureSelect(feature) {
alert("OK");
} // <-- Exceptions are thrown here
Whenever the onPopupFeatureSelect function is finished (at {) the IE8 debugger somehow falls into the JQuery code and throws exceptions there.
Am I using the select feature correctly?
Update: The crash occurs when I click anywhere in the map. It is not related to the popup feature.
JQuery in combination with VML was causing this problem. I updated to version 1.7.1 and everything is working fine.
More information here: http://bugs.jquery.com/ticket/7071
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.