I'm trying to play an HTML5 video when the user scrolls to it using the waypoints plugin for jQuery.
Here is my code:
$(document).ready(function() { videoSetup(); });
function videoSetup() {
var video = $("#video");
video.waypoint(function(direction) {
video.get(0).play();
});
}
Put when the video is scrolled to nothing happens.
HTML markup would look like:
<div class="video-test">
<video id="video1" width="960">
<source src="video-folder/video.mp4" type="video/mp4">
</video>
</div>
Then your javascript to load the video at the video-test container waypoint would be:
$(document).ready(function() {
var myVideo=document.getElementById("video1");
$('.video-test').waypoint(function() {
myVideo.play();
}, {
offset: '50%', // middle of the page
triggerOnce: true // just my preference...
});
});
Related
Hy,
Is there a way to make hover on item image, but when is hover plays video?
Something like this but not in popup:
Demo
Thanks in advance
This is not possible out of the box.
I'm sure this is a paid extension for this but if you would like to code it the good old fashioned way you can use jQuery and HTML5 video player to achieve this.
<video id="video" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<a id="thumbnail">Im the thumbnail</a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery('#video').show();
jQuery('#video').play();
}, function() {
jQuery('#video').hide();
jQuery('#video').pause();
});
});
</script>
What I suggest is linking the video and thumbnail either via a data-attribute:
e.g
<a id="thumbnail" data-video="#video"></a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery(jQuery(this).data('video')).show();
jQuery(jQuery(this).data('video')).play();
}, function() {
jQuery(jQuery(this).data('video')).hide();
jQuery(jQuery(this).data('video')).pause();
});
});
</script>
on the thumbnail or making it relative to a parent container for multiple videos.
On my website i have a button which when clicked takes you to one of two random youtube videos. However i would like to change this to a image in stead of a button.I have tried to change it to a INPUT type="image" but this doesn't work. Here is the code i am using.
<SCRIPT language="JavaScript">
<!--
function get_random()
{
var ranNum= Math.floor(Math.random()*2);
return ranNum;
}
function getaGame()
{
var whichGame=get_random();
var game=new Array(2)
game[0]= "https://www.youtube.com/watch?feature=player_detailpage&v=NcFQF3PZFRk#t=722s";
game[1]= "https://www.youtube.com/watch?v=klBAW4MQffU";
location.href = game[whichGame];
}
//-->
</SCRIPT>
<FORM name="form1">
<center>
<INPUT type="button" onClick="getaGame()" >
</center>
</FORM>
Thanks for any help
An onclick event can be fired from any element. Here are some examples!
I'm using the BlockUI jquery plugin to show a loading message in a div until the content is loaded using JQuery's load method.
The problem is, the content I'm pulling in contains images. The load callback fires before the images are fully loaded and the div is unblocked too early.
Is there a way I can wait for all the images to load before BlockUI unblocks the div?
Alternatively, if I can override the unblocking I can do the following, using the waitForImages plugin
$('#mydiv').block({ message: 'Loading' });
$('#mydiv').load('ajax.php', function() {
$('#mydiv').waitForImages(function() {
$('#mydiv').unblock();
});
});
I reckon you should wrap your DIV #mydiv inside another DIV.
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157623591220769&nsid=21696934#N05&format=json&jsoncallback=?", function(data) {
$.each(data.items, function(i, item) {
$("<option>").attr("value", item.media.m).html('image ' + i).appendTo("#imagesLink");
});
});
$("#imagesLink").on('change', function() {
$('#mydivContainer').block({
message: 'Loading'
});
setTimeout(LoadImage, 10, this.value);
});
function LoadImage(imagePath)
{
$('#mydiv').html($('<img>').attr('src', imagePath));
$('#mydiv img').waitForImages(function() {
$('#mydivContainer').unblock();
// alert("Finished!");
});
}
#mydivContainer
{
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.js"></script>
choose an image <select id="imagesLink"></select>
<div id="mydivContainer">
<div id="mydiv"></div>
</div>
Or a fiddle jsFiddle where you can test it.
So I am making a test app using RequireJs, Mustache and Backbone.js. I had some success with rendering the collection of models with the Mustache template. But my Mustache template has a button and when I try to bind click event on the button in the view, the button click doesn't invoke the callback function. I am really stuck, can someone tell me where I am not doing right?
Here is my code:
ItemView.js:
define(['jquery', 'backbone', 'underscore', 'mustache', '../../atm/model/item'], function ($, Backbone, _, Mustache, Item) {
var ItemView = Backbone.View.extend({
initialize: function() {
},
tagName: 'li',
events: {
'click .button': 'showPriceChange'
},
render: function() {
var template = $('#template-atm').html();
var itemObj = this.model.toJSON();
itemObj['cid'] = this.model.cid;
var rendering = Mustache.to_html(template, itemObj);
this.el = rendering;
return this;
},
showPriceChange: function(event) {
alert('Changing...');
$('#' + elemId).empty();
$('#' + elemId).append(document.createTextNode('Changed'));
},
});
return ItemView;
});
atm.html:
<!DOCTYPE html>
<html>
<head>
<title>Elevator</title>
<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>Vending Machine</h1>
<div id="atm-items">
</div>
<script id="template-atm" type="html/template">
<li>
<p>Item: {{name}}</p>
<label for="price-{{cid}}">Price:</label>
<input id="price-{{cid}}" type="text" value="{{price}}"/>
<button class="button">Change</button>
<p id="status-{{name}}-{{cid}}">- -</p>
</li>
</script>
</body>
</html>
You're replacing the view's el inside render:
render: function() {
//...
this.el = rendering;
//...
}
When you do that, you're losing the jQuery delegate that is attached to this.el, that delegate handler (which Backbone adds) is responsible for the event routing.
Usually, you add things to this.el rather than replacing this.el. If your template looked like this:
<script id="template-atm" type="html/template">
<p>Item: {{name}}</p>
<label for="price-{{cid}}">Price:</label>
<input id="price-{{cid}}" type="text" value="{{price}}"/>
<button class="button">Change</button>
<p id="status-{{name}}-{{cid}}">- -</p>
</script>
then you would this.$el.append(rendering) in your view's render; this would give you an <li> in this.el since you've set your view's tagName to li.
Alternatively, if you really need to keep the <li> in the template, you could use setElement to replace this.el, this.$el, and take care of the event delegation:
this.setElement(rendering);
Presumably you're wrapping all these <li>s in a <ul>, <ol>, or <menu> somewhere else; if you're not then you're producing invalid HTML and the browser might try to correct it for you, the corrections might cause you trouble elsewhere as your HTML structure might not be what your selectors think it is.
:D
I am currently having much trouble with a jQuery animation. Basically, a button click will quickly start a short animation and collapse a sidebar, widening the main content box to full width (and back again if wanted). The issue is that with quick consecutive clicks, the layout goes all crazy. I have tried this condition:
if (!$(this).is(":animated"))
{
// Code
}
But it doesn't work. So I have tried .off(), and it shuts off, but I cannot find out how to turn it back .on(). Can someone help me please? Here is what I have:
<script type="text/javascript">
$(document).ready(function(){
var $button = $("a#toggle");
var $content = $("div#index_main-content");
var $sidebar = $("div#sidebar");
// Disable quicky clicky
$button.click(function() {
$button.off().delay(1000).on();
});
// Hide sidebar
$button.toggle(function sidebarToggle() {
$sidebar.fadeOut(500, function() {
$content.animate({width: '100%'}, 500, function() {
$button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");
});
});
},
// Show sidebar
function sidebarToggle() {
$content.animate({width: '69.5%'}, 500, function() {
$sidebar.fadeIn(500, function() {
$button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");
});
});
});
});
</script>
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle"></a>
<div id="sidebar">
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">
<!-- Content: float-left/width-69.5% -->
</div>
</div>
Also, there is a live demo here. Like I said before, for some reason, the .on() does not happen. :(
Thank you. :)
$content.stop(true,true).animate({ //code });
Try using stop before issuing the animation the second time, for example:
$content.stop().animate(
This will stop and previous animations before starting the new one.
Also use true in the stop statement to cancel other animation and complete the animations.
$content.stop(true,true).animate(
See:
http://api.jquery.com/stop/
stop() to stop the current animation,
clear the animation queue and go to the end of the animation .stop(true,true)
or
turn the button to OFF before you start the animation
turn the button to ON within the animation callback function, so that
is turned on again after the animation finished
OR more easy
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>
<div id="sidebar">sidebar
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">content
<!-- Content: float-left/width-69.5% -->
</div>
</div>
$(document).ready(function(){
$('#toggle').click(function(){
$('#sidebar:visible').fadeOut('slow')
$('#sidebar:hidden').fadeIn('slow')
})
})
take a look#
http://jsfiddle.net/jdFrR/