Mootools video "ended" binding not working - javascript

I need to migrate a working jQuery script - over to Mootools to meet the requirements of my project.
The working jquery code is:
$('#video').bind('ended', function() {
//Functions on end here.
});
I have tried the following with Mootools...
document.id('video').addEvent('ended', function () {
//Functions here
});
and
document.id('video').addEvent('ended', function () {
//Functions here
}.bind(this));
However to no effect :( Can any one point me in the right direction please?
Thanks!

MooTools does not support HTML5 media tags events. After adding block written here You can use:
$('myVideo').addEvent('ended', function(){
//Functions here
});
Here myVideo is an id of tag:
<video id="myVideo"></video>

Related

jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax

I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!
If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!
Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!

Brightcove HTML5 style customize

What should I use to customize HTML5 video player(add own buttons, add css styles)? Now we use javascript plug-ins, but sometimes these pulg-ins are loaded before Iframe DOM. Can you provide us an event which can be used to determine that DOM is loaded?
You can do that in many places.
In HTML:
<body onload="alert('DOM loaded!')">
In JavaScript:
window.onload=function(){
alert("DOM loaded!")
};
In jQuery:
$(document).ready(function() {
alert("DOM loaded!")
});
// or
$(function() {
alert("DOM loaded!")
});
I think you will want the templateReadyHandler - see http://support.brightcove.com/en/video-cloud/docs/player-error-handling

Add fade in effect on onload

How can i add fade in for this specefic code? I want the pictures to fade in on onload.
Have done some research on Stackoverflow, but couldn't find anything useful. Some help would be appreciated.
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById('img')
if(img.clientHeight<$('#div').height()){
img.style.height=$('#div').height()+"px";
}
if(img.clientWidth<$('#div').width()){
img.style.width=$('#div').width()+"px";
}
}
</script>
Extra question: Is it also possible to add a load-function to this code?
Sj what your attempting to do can be simplified using jQuery. jQuery is a JavaScript library that makes working with HTML documents much easier.
Here is a little fiddle demonstrating their fadeIn method: http://jsfiddle.net/zgRtd/3/
Just to make sure your clear on what's happening:
We declare a function named load Image - this function uses jQuery to attach the fadeIn method to our jQuery object (referenced with CSS Selectors).
The images are set to display: none; initially.
function loadImage () {
$('#your-image').fadeIn('slow', function () {
// Animation complete
});
}
We call the function once the document is loaded (this could be bound to any event), I've commented this out in the JSFiddle example.
$(document).on('ready', function () {
loadImage();
});

ability to auto play on scroll position in jQuery plugin

I am on my way to develop my first jQuery plugin.In which I need an animation to auto play on scroll position.I have tried many ideas but nothing worked out.Finally I put the auto play function inside plugin and called in my HTML like this.
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
is there any way that I can put document.ready() or window.scroll() inside my plugin and make it working as it is in HTML.
any help will be great full..
you want to auto assign the event when the page loads right?
why don't you just put this in your plugin file:
(function($){
//your plugin code
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
});
})(jQuery);
$(window).scroll(scrollHandler);
function scrollHandler(){
jQuery.fn.autoplayAnimation();
}

jQuery not rendering properly

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.
<script type="text/javascript">
$(document).ready(function() {
$("#front-background").hide();
$(window).load(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
});
</script>
This may also be because of how Drupal handles compatibility with other JavaScript libraries.
You can wrap your jQuery function in:
(function ($) {
//your existing code
})(jQuery);
or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().
See http://drupal.org/node/171213 for more details.
You dont need window load event if you are already using $(document).ready method. Try this.
$(document).ready(function() {
$("#front-background").hide();
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
});
});
I didn't see any onClick functionality there. This should work:
CSS:
#front-background {
display:none;
}
JQuery hover replacement. Fade in on hover, fadeout on leave
$(function() {
$('#links-top-1').hover(function() {
$('#front-background').fadeIn(2000);
},function(){
$('#front-background').fadeOut(2000)
});
});

Categories