I'm using AngularJs and i upload video dynamically but not every video playing just after 4-5 refresh of browser everything is fine (video must displaying when mouse is on video)
$timeout(function() {
var video = element.find('video');
video.hide();
if (!video.length) {
return;
}
video.find('source').attr('src', '/files/' + scope.game.videoPoster);
element.on('mouseover', function() {
video.show();
video[0].play();
});
element.on('mouseout', function() {
video.hide();
video[0].pause();
});
}, 1);
Can anyone explain how to fix it?
Related
I'm trying to implement dropzonejs into an Ionic app.
I've done this before on a AngularJS webapp, when I accessed this site on mobile I could choose between taking a picture or getting one from the gallery of my device.
With Ionic I've implemented dropzonejs the same way, however I'm redirected straight to the gallery of my device instead of presenting me an option to choose between the camera and the gallery.
Could this be some kind of security (I'm using Android for testing atm)? Should I add some config to allow pictures to be taken?
Or does it just don't work in Ionic, any other directives to use?
Thanks in advance!
Here's my code :
Controller:
/**
* DropZone config
*/
angular.extend($scope, $state, {
dropzoneConfig: {
'options': {
autoProcessQueue : false,
maxFilesize : 10,
maxFiles : 10,
parallelUploads : 10,
paramName : "photo",
url : 'https://xxxxxxx.xx/api/photo/add'
},
'eventHandlers': {
'addedfile': function (file) {
$scope.hasPhoto = true
},
'sending': function(file, xhr, formData) {},
'success': function(file, response) {
console.log('Photos uploaded');
},
'queuecomplete': function (file) {
alert('succes');
}
}
}
});
Directive :
angular.module('as.directives')
.directive('dropzone', function() {
return function (scope, element, attrs) {
var config, dropzone;
config = scope[attrs.dropzone];
// create a Dropzone for the element with the given options
dropzone = new Dropzone(element[0], config.options);
// bind the given event handlers
angular.forEach(config.eventHandlers, function (handler, event) {
dropzone.on(event, handler);
// Added this line so we can call $scope.dropzone.processQueue();
// http://stackoverflow.com/questions/28614980/call-function-from-angularjs-directive-for-dropzone-js
scope.dropzone = dropzone;
});
};
});
I'm looking on how to stop an iFrame video with angular js !
I'm new to Angularjs and I'm not able to do that, I could do that with jQuery :
var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) {
TheFrame = $(event.target).find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
So if you have an idea on how to do that when clicking on button for example that would be great
I am developing cordova application for BB10,android,iod,windows8.
within that i have requirement of opening url in default device browser.
for that i had used org.apache.cordova.inappbrowser plugin.
but after using that i came across problem of relaunching application once i back from browser.
[problem in all platform except windows8]
so that i had used below solution,
jQuery(document).delegate('.external', 'click', function(e) {
window.open(e.target.href, '_system', 'location=yes');
e.preventDefault();
});
<a class="external" href="myUrl">Track Now</a>
with above solution,
Android: it was working fine.
Blackberry10 problem: Url is not opened in external browser it is only opened in app browser,
IOS Problem: url is not working at all(when i click on link nothing happened).
So, any help from your side is really appreciated.
Yeah below is the solution for my case.
And its working fine in all android, BlackBerry10 and IOS platform.
resolving blackberry issue by adding blackberry invoke plugin.
function openBlackBerryBrowser(url) {
function onInvokeSuccess() {
alert("Invocation successful!");
}
function onInvokeError(error) {
alert("Invocation failed, error: " + error);
}
blackberry.invoke.invoke({
target: "sys.browser",
uri: url
}, onInvokeSuccess, onInvokeError);
}
if (window.device.platform.toLowerCase().indexOf('blackberry') > -1) {
jQuery(document).delegate('.external', 'click', function(e) {
openBlackBerryBrowser(e.target.href);
});
} else {
jQuery(document).delegate('.external', 'click', function(e) {
e.preventDefault();
var ref = window.open(e.target.href, '_system', 'location=yes');
});
}
Hope this will help someone.
In my opinion is not necessary the use of jquery to do this. You could try something like this, but I tested only on Android and iOS:
In your controller:
$scope.openLink = function(url){
window.open(url, '_system');
};
html:
www.google.com
Let me know if works also on BB!
Im trying to work with Angular.js and Mapbox.
The map is loaded, from Mapbox with no problem. But the Zoom Control have problems, in the browser it shows the Zoom Control, but it doesnt appear in the Android Emulator. In the browser and in the emualtor, they dont work: they cant zoom in or zoom out.
I draw another Zoom Control and it happen the same problem, both in the browser appear and both doesnt Zoom in or Zoom out. In the browser they show both zoom control and Android Emulator both Zoom Controller doesnt appear and they doesnt work.
I have try this work Mapbox with no problem outside Angular:
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Could some one could explain me or give me a hand.
thanks in advance
Here is the code that I was working:
.controller('loa', function($scope, $ionicModal) {
// MAPAS ------------------------------------------------------------>
$ionicModal.fromTemplateUrl('templates/calama.html', {
scope: $scope }).then(function(modal) {
$scope.modal1 = modal;
}, {
animation: 'slide-in-down',
focusFirstInput: true,
scope: $scope });
$scope.cierra1 = function() {
$scope.modal1.hide(); };
$scope.mapaCalama = function() {
$scope.modal1.show();
L.mapbox.accessToken = 'pk.xxxxxx';
var map = L.mapbox.map('map')
.setView([-22.4562, -68.9249], 6)
.addLayer(L.mapbox.tileLayer('itelius.xxxxx'));
L.mapbox.featureLayer('itelius.xxxxxx').on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) { clusterGroup.addLayer(layer); });
map.addLayer(clusterGroup);
}); };
I recentley put a zoom-slider object and works, but when I add a zoom control and try it I cant zoom in or zoom out.
I'm evaluating using Casper.js to do functional/acceptance testing for my app. The biggest problem I've seen so far is that my app is an SPA that uses handlebars templates (which are compiled to JS) The pages of my app are nothing more than a shell with an empty div where the markup will be injected via JS.
I've messed around with Casper a little and tried using its waitFor functions. All I can seem to get from it are my main empty page before any of the markup is injected. I've tried waitForSelector but it just times out after 5 seconds. Should I try increasing the timeout? The page typically loads in a browser very quickly, so it seems like there may be another issue.
I'm using Yadda along with Casper for step definitions:
module.exports.init = function() {
var dictionary = new Dictionary()
.define('LOCALE', /(fr|es|ie)/)
.define('NUM', /(\d+)/);
var tiles;
function getTiles() {
return document.querySelectorAll('.m-product-tile');
}
function getFirstTile(collection) {
return Array.prototype.slice.call(collection)[0];
}
var library = English.library(dictionary)
.given('product tiles', function() {
casper.open('http://www.example.com/#/search?keywords=ipods&resultIndex=1&resultsPerPage=24');
casper.then(function() {
// casper.capture('test.png');
casper.echo(casper.getHTML());
casper.waitForSelector('.m-product-tile', function() {
tiles = getTiles();
});
});
})
.when('I tap a tile', function() {
casper.then(function() {
casper.echo(tiles); //nodelist
var tile = Array.prototype.slice.call(tiles)[0];
casper.echo(tile); //undefined!
var pid = tile.getAttribute('data-pid');
})
})
.then('I am taken to a product page', function() {
});
return library;
};
Any Angular, Backbone, Ember folks running into issues like this?