I want to show youtube videos in the Magnific popup http://dimsemenov.com/plugins/magnific-popup/. The URl for the youtube video I get from a JSON file which I insert in my HTML with HandlebarsJS. So far so good, when I check the <a href> with the webinspector, the correct link is available.
Somehow though, when I click on it, the Magnific popup opens, but the youtube video is not firing, instead I get an error message. It seems like as soon the popup opens, or rather, when Magnific popup gets triggered, it completely disattaches itself from my BackboneJS App. Can this be true?
In my HTML (video.html) I have:
<a class="vidPopup" href="youtubelink here">
and in the Backbone View i created event:
template: 'video', //referring to the video.html
events: {
'click .vidPopup': 'seeVid'
},
seeVid: function(e) {
e.preventDefault();
$('.vidPopup').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
What could be the issue here?
I solved it myself! Since the Youtube API returns the ID of the youtube video I just had to do this:
<a class="vidPopup" href="https://www.youtube.com/watch?v={{id}}">
I didnt have to change the popup settings
Related
Anyone using the Angular Kendo Window will be aware how scarce the documentation is for it.
I am trying to assign an event to the "Custom" action that can be passed into the Kendo Window Directive. The directive looks like so:
<div kendo-window="win2" k-options="options" k-title="'Test Title'"
k-visible="false"
k-content="{ url: '../scripts/app/test.html' }"
k-on-close="testEvent();"></div>
The close event works fine but I can't work out how to assign a custom event, I was expecting to pass it in like this, for example:
<div kendo-window="win2" k-options="options" k-title="'Test Title'"
k-visible="false"
k-content="{ url: '../scripts/app/test.html' }"
k-on-close="testEvent();"
k-on-custom="customEvent();"></div>
The options variable on the controller look like this:
$scope.options = {
height: 175,
width: 900,
actions: ["Close", "Custom"],
resizable: false
};
Any ideas?
Telerik's response to this question is below. Their Kendow Window claims to Angular integrated, yet their solution is a JQuery hack to get this to work... For shame Telerik, for shame....
Reponse:
"Thank you for your interest in Kendo UI.
The click events for the custom Window actions should be attached programmatically after the Window instance has been created. Please check...
http://docs.telerik.com/kendo-ui/controls/layout/window/how-to/use-custom-action-icons
http://docs.telerik.com/kendo-ui/AngularJS/global-events#upon-widget-creation-kendowidgetcreated
Regards,
Dimo"
I'm fairly new to angularjs and am using angular strap to use some of their features like aside.
So basically I have a function like this:
$scope.myAside = function() {
$aside({
title: 'My Title',
show: true,
animation: 'am-slide-left',
placement:'left',
contentTemplate: 'views/aside.html'
});
};
and I wanted to know how to use the two binding to get 'show' to display on the page. I basically wanted something like this on the page:
The aside is open: {{myAside.show}}
I read through their setup but couldn't find anything about two binding and how to know if the aside modal is open or not.
Here is the plugin with the documentation about aside. http://mgcrea.github.io/angular-strap/#/asides
You need to use {{ myAside.$scope.$isShown }}
Here is a plnkr showing how this works.
What I'm trying to do. Tap a day in the calendar and have show the details of that day's events in the area below it.
How I'm doing it. With Angular and the ui-calendar directive. In FullCalendar's dayClick event, I'm creating a new set of events that are happening on that day. In the template, I'm doing a typical ng-repeat="event in daysEvents" div. This works perfectly fine when I'm testing it in ionic serve.
The problem. The dayClick event doesn't work in the iOS emulator, when I send the app to my device (with ionic run ios) or Chrome Developer Tools "Toggle device mode".
The code. Here's my controller:
angular.module('starter.controllers', ['ui.calendar'])
.controller('CalendarCtrl', function($scope) {
$scope.eventSources = [
{
title: "Spring Awards Night",
start: moment("2015-5-19 18:30"),
description: "The Spring Awards are awesome and you should come."
}
]
$scope.uiConfig = {
calendar:{
height: 'auto',
editable: false,
header:{
left: 'prev',
center: 'title',
right: 'next'
},
dayClick: function(date, jsEvent, view) {
$scope.daysEvents = $scope.eventSources.filter(function(event){
return event.start.isBetween(date, moment(date).add(1, 'days'));
});
$(".fc-day").removeClass("fc-selected");
$(this).addClass("fc-selected");
}
}
};
And part of my template:
<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
If you need anything else, let me know. Thanks in advance.
1st solution:
This happens only when using UI-Calendar (FullCalendar) with Ionic, because Ionic catches all tap events. That's why it works fine for you in a desktop browser, but not in a mobile browser.
To solve this issue, add data-tap-disabled="true" to UI-Calendar directive, like this:
<div data-tap-disabled="true" ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
UPD - 2nd solution:
By disabling the Ionic tap listeners, you'll face the default browser's 300ms delays after each tap is made, which leads to an extremely poor user experience.
So, another solution for your question would be to select dates programmatically.
function onViewRender( view, element ){
// 1. Add tap listeners for each day (in my case - the date number element)
var matches = document.querySelectorAll(".fc-day-number");
_.forEach(matches, function(element){
$ionicGesture.on('tap', function (event) {
// 2. On tap - parse data-date attribute from the element
var selectedDateStr = $(event.target).attr('data-date');
// 3. And select an according day with uiCalendarConfig select method
uiCalendarConfig.calendars.mobileCal.fullCalendar('select', moment(selectedDateStr), moment(selectedDateStr).add(24,'h'));
}, angular.element(element));
});
}
In FullCalendar, if you drag on the day then the dayclick event is fired.
Other devices fire the dragstart and dragend events when you tap on the day, but iOS devices don't.
I had no choice but to modify fullcalendar.js. You can see my modified version here:
angularui-calendar-fullcalendar-dayclick-not-work-expectedly-on-ios
I have the following problem:
In my application every link has a tooltip (from bootstrap-ui). If the link is clicked, a alert dialog appears and the tooltip disappears. But in firefox the tooltip is still shown!
Here is a plunker:
plunkr
And thats how I want to use it with tooltip:
<a tooltip="do something" tooltip-popup-delay="300" tooltip-placement="bottom" ng-click="doSomething()">do Something</a>
the function:
$scope.doSomething = function()
{
alert("do Something");
}
After the alert window is confirmed, the tooltip is still shown in firefox.
Can someone help me, how to hide this tooltip in firefox? This is really stupid!
Thank you!
You can manually hide your tooltips by using jQuery like this:
jQuery('.tooltip').hide();
This will hide all instances of the tooltip. In your case, you could call this right after your alert like so:
$scope.doSomething = function()
{
alert("do Something");
jQuery('.tooltip').hide();
}
Make sure you add the jQuery library if you go with this approach.
Is there a way to display a thumbnail of a youtube video in a BackboneJS view, then after clicking the thumbnail a lightbox opens and plays the video and at the same time the URL changes, so that you actually can send the URL-link?
I have a Backbone App where I list multiple Artists and when you click on one of those you get to an artist specific page where the user among other things can watch videos. So lets say you are on Lady Gaga's page and i click on a video, the Magnific Popup-opens with the video. But what I want to achieve i that the URL changes as well. something like ladygaga/videos/titleofvideo(or youtubelink):
Right now, in my Backbone View I have:
events: {
'click .video' : 'popUp'
},
popUp: function (e) {
e.preventDefault();
$('.video').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
The popup works fine, I just need the URL to change... Does anyone have an idea how to add this here if it is possible?
Thanks in advance...