I am trying to add swipe and press support to an img using Hammer js version 2.0.4 and I have noticed that it does not work well on Desktop IE11. The gestures are triggered maybe once for every 20 attempts.
Here is a jsfiddle with an example.
http://jsfiddle.net/bhptL6mf/32/
$(function() {
var myImg = document.getElementById("myImg");
var blue = document.getElementById("blue");
var hammerManager = new Hammer.Manager(myImg);
var panRecognizer = new Hammer.Pan({
threshold: 0,
pointers: 0
});
hammerManager.add(panRecognizer);
var swipeRecognizer = new Hammer.Swipe({
threshold: 0,
velocity: 0.01
});
hammerManager.add(swipeRecognizer).recognizeWith(hammerManager.get('pan'));
hammerManager.on('swipe', function(event) {
if (event.type == 'swipe') {
($(blue).text() === "Swiped") ? $(blue).text(" "): $(blue).text("Swiped");
}
});
})
Anyone else seeing this issue and know of a workaround? I am also seeing the same issue when gestures are applied to anchors
Setting img attribute draggable to false will fix this on IE.
Also noticed a similar issue on Desktop Fire Fox and had to set -moz-user-select to none and prevent dragstart event in addition to setting draggable to false to fix it.
Related
Consider the following code below:
function doClick(e) {
win.open();
}
var picker = null;
var backBtn = null;
var selectedIdx = 0;
$.index.open();
var win = Titanium.UI.createWindow({
exitOnClose : false,
navBarHidden : true
});
win.addEventListener("open", function() {
if(null != picker) {
//picker.setSelectedRow(0, selectedIdx, false);
return;
}
picker = Titanium.UI.createPicker({
width : "75%",
height : "50dip",
selectionIndicator : true
});
picker.addEventListener("change", function(id) {
selectedIdx = id.rowIndex;
});
var arr = [];
for(var i = 0; i < 10; i++) {
arr.push(Titanium.UI.createPickerRow({
title : i,
color : "black"
}));
}
selectedIdx = 0;
picker.add(arr);
backBtn = Titanium.UI.createButton({
bottom : "10dip",
title : "Close"
});
backBtn.addEventListener("click", function() {
win.close();
});
win.add(picker);
win.add(backBtn);
});
If the above code is executed with SDK 5.2.0.GA or 5.2.2.GA, then you will see that the picker value is not being retained. After ever open/close of the window, even if we reuse the old picker object. But, if you uncomment the setSelectedRow (hack code I would say), then it behaves as required.
Anyone faced such issue or is aware of a proper solution or root cause for it.
I think this is expected behavior. The picker is attached to a window and on Android starting with Release 3.2.0, all the windows are heavyweight. A heavyweight window is associated with a new Android Activity. So when the window is closed the activity is closed and so will be the picker. It that case the picker is not supposed retain its selected value. You can try using lightweight window in this case.
Prior to Release Titanium 3.2.0 in Android, Titanium windows can be heavyweight or lightweight:
A heavyweight window is associated with a new Android Activity.
A lightweight window is a fullscreen view, and runs in the current Android Activity.
If you still want the old behavior, you can enable the ti.android.useLegacyWindow property in the tiapp.xml:
<property name="ti.android.useLegacyWindow" type="bool">true</property>
Documentation Link
I use Ti.UI.Picker for date/times. And in that case you need to set the value property to tell the picker what value is selected. I guess you need the same with other types of picker, like:
picker = Titanium.UI.createPicker({
width : "75%",
height : "50dip",
selectionIndicator : true,
value : '0'
});
/John
It seems that 'swipeup' and 'swipedown' events are not fired consistently. Is this a known issue?
I'm testing this pen on OSX/Chrome with a mouse: http://codepen.io/felixturner/pen/RWbPoN
var mc = new Hammer(myElement);
//enable all directions
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
// listen to events...
mc.on("swipeup swipedown swipeleft swiperight tap press", function(ev) {
myElement.textContent = ev.type + " gesture detected.";
});
Thanks!
Lowering the threshold and velocity fixed this issue:
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL,
threshold: 1,
velocity:0.1
});
I'm using mediaelement.js version 2.16.4 to load video in an iframe created by thickbox.js. When I try to click fullscreen button in firefox-37.0.2/IE-11 the video goes to fullscreen but immediately goes back to smaller size of the iframe. If I don't initialize mediaelement and only the HTML5 tag then the fullscreen works fine in an iframe. So, it has to do something with the mediaelement player. This doesn't happen in Chrome! Can anybody guide me here why this is happening and how it can be resolved?
FYI: I have "webkitallowfullscreen mozallowfullscreen allowfullscreen" in the iframe.
<video id="videoPlayer" width="100%" height="100%" controls="controls" preload="none" autoplay="true">
<source type="video/mp4" src="<%=Url%>" />
</video>
$(document).ready(function() {
if ($('video')) {
var player = $('video').mediaelementplayer({
videoWidth: '100%',
videoHeight: '100%',
// initial volume when the player starts
startVolume: 0.8,
// enables Flash and Silverlight to resize to content size
//enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
isNativeFullScreen: true,
success: function (mediaElement, domObject, player) {
mediaElement.addEventListener('ended', function () {
player.exitFullScreen();
}, false);
}
});
}
});
I found the issue of fullscreen in firefox/IE. It's the following code in mediaelement-and-player.js where there is a manual exit from fullscreen. For me the 'zoomMultiplier' variable is 1.25 which is causing the problem. I can comment this code but not sure if it breaks other scenario? -
if (t.isInIframe) {
// sometimes exiting from fullscreen doesn't work
// notably in Chrome <iframe>. Fixed in version 17
setTimeout(function checkFullscreen() {
if (t.isNativeFullScreen) {
var zoomMultiplier = window["devicePixelRatio"] || 1;
// Use a percent error margin since devicePixelRatio is a float and not exact.
var percentErrorMargin = 0.002; // 0.2%
var windowWidth = zoomMultiplier * $(window).width();
var screenWidth = screen.width;
var absDiff = Math.abs(screenWidth - windowWidth);
var marginError = screenWidth * percentErrorMargin;
// check if the video is suddenly not really fullscreen
if (absDiff > marginError) {
// manually exit
t.exitFullScreen();
} else {
// test again
setTimeout(checkFullscreen, 500);
}
}
}, 500);
}
I've created an app where I use several custom HTML pushpins. Each one of these pushpins has a click event that will call setView on the map to center the map on the selected pin. This works perfectly in all browsers except for Firefox (testing version 22.0).
In Firefox, after the setView animation completes and the map is centered on the pushpin, the pushpin is then offset horizontally, vertically or both by a certain amount of pixels. The amount seems to correspond with amount of pixels the map has moved. If you then drag the map manually with the mouse, upon releasing the mouse button, the pushpin snaps back to its proper place. I've checked the top and left position values of the MapPushpinBase anchor tag in compared it with other browsers and the values differ.
Unfortunately, I cannot post a live example because the product has not yet been publicly released. But see below for the code I'm using.
this.clickHandlers.push(Microsoft.Maps.Events.addHandler(node, 'click', function (e) {
var element = $(e.target._htmlContent);
self.nodeHitboxHandler(element);
}));
Within the nodeHitboxHandler function, the only piece of Bing Map code is this:
this.map.setView({
center: new Microsoft.Maps.Location(panStart.latitude, panStart.longitude),
zoom: this.zoom,
mapTypeId: Microsoft.Maps.MapTypeId[self.mapTypeId]
});
Thanks in advance for any help.
UPDATE:
In order to make things clearer, I've created a simple example that demonstrates the problem. You can see it here: http://ginof.com/tests/bing/
In Firefox, try clicking on the different pushpins and watch the behaviour of the pushpin you've just clicked on after the map finishes panning to its new location. The map works fine in all browsers except Firefox.
Here's the complete JavaScript code for this example:
$(document).ready(function () {
var map = null,
initialCoordinates = {latitude: 40.71435, longitude: -74.00597},
initialPoint = new Microsoft.Maps.Location(initialCoordinates.latitude, initialCoordinates.longitude),
range = {
top: 3,
right: 5,
bottom: 0.01,
left: 5
},
mapOptions = {
credentials:"BING-MAPS-API-KEY",
disableKeyboardInput: true,
disableZooming: true,
enableClickableLogo: false,
enableSearchLogo: false,
showBreadcrumb: false,
showDashboard: false,
showMapTypeSelector: false,
showScalebar: false,
inertiaIntensity: 0.5,
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden,
center: initialPoint,
zoom: 14
};
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Create nodes
map.entities.clear();
var pushpinOptions,
pushpin,
nodeCoordinates;
for (var i = 0; i < 5; i++) {
pushpinOptions = {width: null, height: null, htmlContent: '<div id="node' + i + '" class="node">' + i + '. Custom HTML</div>'};
nodeCoordinates = {latitude: initialCoordinates.latitude + i * 0.005, longitude: initialCoordinates.longitude + i * 0.005};
pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(nodeCoordinates.latitude, nodeCoordinates.longitude), pushpinOptions);
pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click',
(function () {
var nodeId = i,
homeCoordinates = nodeCoordinates;
return function () {
console.log("node " + nodeId + " clicked.");
map.setView({center: new Microsoft.Maps.Location(homeCoordinates.latitude, homeCoordinates.longitude)});
}
})()
);
map.entities.push(pushpin);
}
}
GetMap();
});
Thanks again for any help.
This is a known issue which I was able to reproduce an has been escalated to the development team. Note that the Bing Maps forums are the best place to report these types of issues. You can find a similar thread on this topic here: http://social.msdn.microsoft.com/Forums/en-US/f77e6a80-2e0f-44c3-81cc-edb4c2327016/custom-html-pushpins-in-firefox-not-positioned-correctly
In most browsers, the following would work.
window.onload = function(){
console.log( document.getElementById('svgElm').getBoundingClientRect().width );
};
Here is a demo. If you try it in Google Chrome, the console will output 200. However, FireFox returns 0.
I've ended up falling back to the parent dimensions if SVG properties cannot be returned. Here is a demo http://jsbin.com/uzoyik/1/edit.
The relavent code is:
svg.clientWidth || svg.parentNode.clientWidth
svg.clientHeight || svg.parentNode.clientHeight
I don't think "width" is a standard cross-browser property of the object returned by the getBoundingClientRect method. I typically do something like:
var box = el.getBoundingClientRect();
var width = box.right-box.left;
var height = box.bottom-box.top;
The solution I found for this was to use .getComputedStyle(). And since svg elements are not supported in old IE8- browsers, .getComputedStyle() is the way to give consistent results.
So I ended up using this function in my library:
var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
var svgCalculateSize = function (el) {
var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
bounds = {
width: 0,
height: 0
};
heightComponents.forEach(function (css) {
bounds.height += parseFloat(gCS[css]);
});
widthComponents.forEach(function (css) {
bounds.width += parseFloat(gCS[css]);
});
return bounds;
};
This Firefox bug was fixed in Firefox 33 which was released on 14 October 2014.
See bug 530985 for details.