I tried calling AssignViewToLocalCamera with different view Ids in which the first first invoke is working and the subsequent calls are not.
//working
_vidyoConnector.AssignViewToLocalCamera({
viewId: "div1",
localCamera: _localCamera,
displayCropped: false,
allowZoom: false
});
// not working
vidyoConnector.AssignViewToLocalCamera({
viewId: "div2",
localCamera: _localCamera,
displayCropped: false,
allowZoom: false
})
// not working
vidyoConnector.AssignViewToLocalCamera({
viewId: "div3",
localCamera: _localCamera,
displayCropped: false,
allowZoom: false
})
Please show some light here.
Thanks in Advance.
Rendering the same video stream to multiple renderer div is not supported by vidyo.io.
Related
I have found exactly the behavior I am looking for (possible multiple popups and close them when user clicks on the map) from a hack exposed here http://bl.ocks.org/mpmckenna8/9395643
Unfortunately, this hack does not work with last 1.6.0 release.
Perhaps there is a mix of options that offers this behavior but I haven't found it.
I have prepared a jsfiddle to explore this: https://jsfiddle.net/PBrockmann/3j40ychf/
var popup1 = L.popup({
minWidth: 100,
closeOnClick: false,
autoClose: false
}).setContent("marker1");
L.circleMarker([51.5072, 0.1275]).addTo(map).bindPopup(popup1);
And also from https://observablehq.com/#pbrockmann/untitled/2
Any help welcome on this.
This code will close popups on all L.CircleMarkers - is that close enough?
map.on('click', function(e) {
map.eachLayer(function(layer) {
if (layer instanceof L.CircleMarker) {
layer.closePopup()
}
})
});
Ignored attempt to cancel a touchstart event with cancelable=false,
for example because scrolling is in progress and cannot be interrupted.
I keep getting this error message when trying to click or drag the map.
double tap works fine however.
sometimes it will let me drag the map, then ill get the message after a few seconds.
After it starts coming up I can't get rid of it.
I'm using this ui-leaflet#1.0.2 with leaflet 0.7.7 and ive tried with leaflet 1.0.0 also.
I've got two maps in my app, both on different controllers and different pages. (using ionic)
could that have something to do with it ?
$scope.$on('leafletDirectiveMap.click', function(event, args){
$log.log('click');
$log.log(event);
$log.log(args);
});
im using this to catch the click event, but it doesnt seem to work either, it makes the above message appear when i click instead of responding to the event.
I can still tap on markers and their popups come up, and I can doubleclick zoom.
just seems drag and click dont want to work properly.
if i remove the second map, i still get the same error on the first map.
my map setup
$scope.map = {
defaults: {
zoomControl: false,
tileLayer: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
scrollWheelZoom: false,
detectRetina: true,
reuseTiles: true
},
center: {
lat: -33.9337,
lng: 151.1807,
zoom: 14
},
events: {
map: {
enable: ['click'],
logic: 'broadcast'
}
},
markers: markers
};
and in the html
<leaflet lf-center="map.center" defaults="map.defaults" height="calc(100% - 66px)" width="100%" markers="map.markers" id="map"></leaflet>
I am using iScroll v4 in Phonegap 2.1.0 + IOS. I have a two iscroll in two different pages.
First iscroll
function locationload() {
locationScroll = new iScroll('locationWrapper', {
vScrollbar: false,
hScrollbar: false,
hScroll: false
});
}
Second iscroll
function preferenceload() {
preferencesScroll = new iScroll('preferencesWrapper', {
vScrollbar: false,
hScrollbar: false,
hScroll: false
});
}
In first page iScroll worked fine. Second page iScroll also worked fine. but when i click a button in second page, button click event fire multiple times. If i remove the iScroll in second page, button click event works fine. I am using $.mobile.changePage("#Page2", null, true, true); to navigate to Page2.
I can't find any solution anywhere so I am hoping someone here can throw me some ideas.
Thanks
I think you should try jquery-mobile-iscrollview
I'm trying to start a jquery ui resizable instance, but using a selector added to the DOM by jquery itself. This is a basic example of my script:
HTML:
<div class='lyr'></div>
jQuery:
// Add class
$('lyr').addClass('fixed');
// Resizable
$('.fixed').resizable({
aspectRatio: true,
handles: 'all'
});
I've thought about using something along the lines of live() or bind() but I have no event to bind to. Any help appreciated.
I have used the LiveQuery plugin - http://brandonaaron.net/code/livequery/docs in the past to be able to target elements added to the dom, like in your case.
If I've got this right, you want anything on the page which has the class "fixed" to be resizable, even if the class is added after the page has loaded? You're right that live, bind and delegate won't help here.
I can think of two possibilities, neither lovely.
First, set up a live "mouseenter" event which will make the element resizable if it wasn't before:
$(body).delegate(".fixed", "mouseenter", function(ev) {
var target = $(ev.target);
if (target.data("resizable")) return;
target.resizable({
aspectRatio: true,
handles: 'all'
});
})
This gets us round the problem of having no event to bind to.
Alternatively, you could monkeypatch jQuery.fn.addClass:
var classRe = new RegExp(c + className + \b);
._addClass = jQuery.fn.addClass;
jQuery.fn.addClass = function(className) {
if (classRe.test(classname)) {
if (this.data("resizable")) return;
this.resizable({
aspectRatio: true,
handles: 'all'
});
}
jQuery.fn._addClass.apply(this, arguments);
}
Of course this will only work if the class is added through the addClass method.
Also in your example,
$('lyr').addClass('fixed');
Should probably be:
$('.lyr').addClass('fixed');
I want to block scrolling page "out of the iPhone screen" (when gray Safari's background behind the page border is visible). To do this, I'm cancelling touchmove event:
// Disables scrolling the page out of the screen.
function DisableTouchScrolling()
{
document.addEventListener("touchmove", function TouchHandler(e) { e.preventDefault(); }, true);
}
Unfortunately, this also disables mousemove event: when I tap on a button then move my finger out of it, then release the screen, the button's onclick event is triggered anyway.
I've tried mapping touch events on mouse events, as desribed here: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/, but to no avail (the same behavior).
Any ideas?
From what I understand of your question, you've attempted to combine the code you've presented above with the code snippet provided by Ross Boucher on Posterous. Attempting to combine these two snippets back-to-back won't work, because in disabling touchmove, you've also disabled the shim that allows mousemove to work via his sample.
This question and its answers sketch out a workable solution to your problem. You should try these two snippets to see if they resolve your issue:
This snippet, which disables the old scrolling behavior:
elementYouWantToScroll.ontouchmove = function(e) {
e.stopPropagation();
};
Or this one, from the same:
document.ontouchmove = function(e) {
var target = e.currentTarget;
while(target) {
if(checkIfElementShouldScroll(target))
return;
target = target.parentNode;
}
e.preventDefault();
};
Then, drop in the code on Posterous:
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
And that should do it for you. If it doesn't, something else isn't working with Mobile Safari.
Unfortunately I haven't had the time to check out to above yet but was working on an identical problem and found that the nesting of elements in the DOM and which relation you apply it to affects the handler a lot (guess the above solves that, too - 'var target = e.currentTarget').
I used a slightly different approach (I'd love feedback on) by basically using a class "locked" that I assign to every element which (including all its children) i don't want the site to scroll when someone touchmoves on it.
E.g. in HTML:
<header class="locked">...</header>
<div id="content">...</div>
<footer class="locked"></div>
Then I have an event-listener running on that class (excuse my lazy jquery-selector):
$('.ubq_locked').on('touchmove', function(e) {
e.preventDefault();
});
This works pretty well for me on iOs and Android and at least gives me the control to not attach the listener to an element which I know causes problems. You do need to watch your z-index values by the way.
Plus I only attach the listener if it is a touch-device, e.g. like this:
function has_touch() {
var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
return 'ontouchstart' in window && !isTouchPad;
}
This way non-touch devices will not be affected.
If you don't want to spam your HTML you could of course just write the selectors into an array and run through those ontouchmove, but I would expect that to be more costly in terms of performance (my knowledge there is limited though). Hope this can help.