I am trying to pass in the iFrame object (which is a jQuery element) as a parameter for YT.Player. This unfortunately gives as error as YT.Player is expecting a raw element. I am wondering how would I be able to convert $(this) to a raw element.
$('iframe.ytplayer').each( function() {
players[id] = new YT.Player( $(this), {
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
});
this is the raw element all by itself in a jQuery .each() iteration.
$('iframe.ytplayer').each( function() {
players[id] = new YT.Player(this, {
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
});
Related
In jQuery, I can clone an element to prevent the original from being removed when dragging and dropping:
$(".draggable").draggable({
helper: "clone"
});
Is there a way to do this with native Javascript?
I'm currently using this code for the drop listener:
el.addEventListener(
'drop',
function(e) {
// Stops some browsers from redirecting.
if (e.stopPropagation){
e.stopPropagation();
}
this.classList.remove('over');
var binId = this.id;
var item = document.getElementById(e.dataTransfer.getData('Text'));
this.appendChild(item);
// call the passed drop function
scope.$apply(function(scope) {
var fn = scope.drop();
if ('undefined' !== typeof fn) {
fn(item.id, binId);
}
});
return false;
},
false
);
I just got the noUiSlider for meteor, but am having problems with listening to events. Here is my code:
Template.templateOne.events({
'click #slider': function(){
console.log('event works!');
}
});
Unfortunately this doesn't work. According to this there is also build in events such as slide. How can I use them in Meteor?
Thanks in advance!
is it mandatory to bind it like this...??
Template.templateOne.events({
'click #slider': function(){
console.log('event works!');
}
});
i think you can do it like this:
var noui = document.getElementById('#slider');
noui.noUiSlider.on('slide', function(){
console.log('i think it will work');
});
ok then do it like this
Template.templateOne.rendered = function () {
var slider = document.getElementById('#slider')
this.slider.noUiSlider({
start: Session.get("slider"),
connect: true,
range: {
'min': 0,
'max': 100
}
}).on('slide', function (ev, val) {
console.log('i think it will work');
Session.set('slider', val);
}).on('change', function (ev, val) {
// round off values on 'change' event
Session.set('slider', [Math.round(val[0]), Math.round(val[1])]);
});
};
you can look on this example https://github.com/rcy/meteor-nouislider/blob/master/example/example.js
I am trying to make a YouTube video width change when the "onStateChange" event fires on 1(playing) and then make it come back to its original size on 0(ended) and 2(paused).
I am very new to JavaScript and jQuery. But let's say I have this
<section><iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe></section>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
why does this jquery does not work?
jQuery(document).ready(function($) {
YT.PlayerState.ENDED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PAUSED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PLAYING = function(e) {
$('section iframe').animate({ width: "100%" }, 'slow');
}
the API information I have got comes from here https://developers.google.com/youtube/iframe_api_reference#Events
The cloned elements should be transformable, drag-able and restraint to the container box. But now they are jumping all over the place I'm not sure what the problem is, and the controls should only be visble for the active element.
$('.trans').freetrans();
$(function(){
//Make every clone image unique.
var counts = [0];
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0]);
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).mousedown(function() {
$(event.target).freetrans();
});
//this doesn't work...
//$(".imgSize-"+counts[0]).mousedown(function() {
//$(event.target).freetrans('controls', false);
//});
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
});
js fiddle:
http://jsfiddle.net/vjeAV/58/
Its throwing an exception behind the scenes..jQuery UI 1.8.18. isn't selected, and it should also be onLoad
Object [object Object] has no method 'draggable'
I also updated your code. I removed your bind, and added it to dragstop:
$('.draggable').on('dragstop', function (event, ui) {
var $temp = $(ui.helper).clone().draggable()
$(this).after($temp );
$temp.freetrans('controls', true);
});
Fiddle
function onYouTubeIframeAPIReady() {
alert("onYouTubeIframeAPIReady Fired"); //This works
player = new YT.Player('player', {
//height: '390',
//width: '640',
videoId: buni_php_params.videoId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert("onPlayerReady Fired"); // This doesn't
event.target.playVideo();
}
The video loads and plays.
http://wppagoda.pagodabox.com/?p=1
I have a standard wordpress install for a plugin I'm making, it fetches a videoID from database (buni_php_params.videoId) and plays it. But the event onPlayerReady is never fired.… even though onYouTubeIframeAPIReady is fired.
When I have a problem of a function not being loaded I go for the window.myFunction approach rathen than just myFunction. This proved to be more portable between browsers as well.
well i dont want to sound an idiot, but it seems like you should add "()" to your onPlayerReady in the 'onReady': onPlayerReady,
So: 'onReady': onPlayerReady(), You're calling a function after all.
I might be wrong.