We Keep Coding

Autoplay HTML5 video when in view

I need help with a particular bit of JS I'm using to make HTML5 videos play when in view.
The code:
$(document).ready(function() {
// Get media - with autoplay disabled (audio or video)
var media = $('#video1, #video2, #video3, #video4, #video5');
var tolerancePixel = 10;
function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
//if ($(window).scrollTop() > $(window).height() - 100) {
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
//}
}
$(document).on('scroll', checkMedia);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>
I obtained this code from this answer: https://stackoverflow.com/a/26508106/10213848
My issue is that once the video is finished, it can be triggered again by scrolling upward. I need the video/s to only play once and not get triggered again.
Any help would be greatly appreciated.

You can use a variable to mark whether the video had played. if it already played, do not play it again:
$(document).ready(function() {
// Get media - with autoplay disabled (audio or video)
var media = $('#video1, #video2, #video3, #video4, #video5');
var tolerancePixel = 10;
var hasPlayMap = {};
function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
//if ($(window).scrollTop() > $(window).height() - 100) {
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
var thisId = $(this).attr("id");
if (hasPlayMap[thisId]){
return;
}
hasPlayMap[thisId] = true;
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
//}
}
$(document).on('scroll', checkMedia);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>

Sorry, I know this looks a lot like NewToJS' answer in the comments, sadly I was thinking of the same thing.
Since this is the effect you wanted, please do not green tick this since NewToJS got the answer first (granted, that is, if you had planned to).
You can set the video's onend event to set the video's onplay event:
document.querySelector('video').forEach(function(element) {
// Set the onend event to...
element.onend = function() {
// ...set the onplay event to...
this.onplay = function() {
// ...stop playing video when the video starts playing
this.pause();
this.currentTime = 0;
};
};
});
Pure jQuery version:
$('video').each(function(ix, ele) {
ele.addEventListener('end', function() {
this.addEventListener('play', function() {
ele.pause();
ele.currentTime = 0;
});
});
});

Adding some HTML to a div with jQuery

I have this HTML
<div class="picture"></div>
and depending on the viewport width, I'd like to add either a small or a large image to the div, so that it will look like this:
<div class="picture"><img src="small.jpg></div>
Here's some jQuery I found somewhere on the web which seems to do exactly what I want. The only part where I'm stuck now is the img src="....jpg" thing. How can I translate this into jQuery?
jQuery(document).ready(function() {
$(window).resize(function() {
var window_width = $(document).width();
if (window_width <= 1024) {
img src = "small.jpg"
} else {
img src = "large.jpg"
}
});
});
Thanks!

If you are creating a <img>
$(window).resize(function() {
var window_width = $(document).width();
if (window_width <= 1024) {
$(".picture").html("<img src='small.jpg'>");
} else {
$(".picture").html("<img src='large.jpg'>");
}
});
or if you just want to assign a source,
$(window).resize(function() {
var window_width = $(document).width();
if (window_width <= 1024) {
$(".picture").find("img").attr("src", "small.jpg");
} else {
$(".picture").find("img").attr("src", "large.jpg");
}
});

You can check if div has img element updated its src else create new img element and append it.
jQuery(document).ready(function() {
$(window).resize(function() {
var window_width = $(document).width();
var imgsrc = "large.jpg"
if (window_width <= 1024) {
imgsrc = "small.jpg"
}
//Picture element
var picture = $('.picture');
//Picture has img element update its src else append new img tag
if (picture.find('img').length) {
picture.find('img').attr('src', imgsrc );
} else {
picture.append('<img src="' + imgsrc + '" />')
}
});
});

Try this code snippet:
jQuery(document).ready(function () {
$(window).resize(function () {
var window_width = $(document).width();
var src = (window_width <= 1024) ? "small.jpg" : "large.jpg";
$('.image').remove(); //Remove in order to avoid multiple images to be added.
$('.picture').prepend($('<img />', {src: src, class: 'image'}));
});
});

Like this :
$('.picture').find('img').attr('src','small.jpg');

You'll need to update the attributes.
In jQuery, you'll do something like this to update the src:
$('<img>') // create a new img node
.attr('src', 'newsrc') // set the src to your desired source
.load(function(){
this.appendTo('.picture'); // once the source has finished loading, append it to the <div>
});
For more information on this, check out this other Stack Overflow post:
Changing the image source using jQuery

Cache both images up front in jQuery objects constructed with image elements pointing to their source.
Then, use your conditional statement to store the string for source and reference it to place the cached image element on the page.
jQuery(document).ready(function() {
//cache images
var imgSet = {
"small.jpg" : $('<img src="small.jpg" />'),
"large.jpg" : $('<img src="large.jpg" />')
};
$(window).resize(function() {
var window_width = $(document).width();
var imgsrc;
if (window_width <= 1024) {
imgsrc="small.jpg";
}else {
imgsrc="large.jpg"
}
//use cached image element
$('.picture').empty().append(imgSet[imgsrc]);
});
});

In jquery you can use append
$('.picture').append('<img src="small.png"/>');

how to get width of screen before every resize on page?

I have this code
$(document).ready(function(){
var oldwidth= $(window).width();
$(window).resize(function(){
var nw= $(window).width();
//compare new and old width
});
});
The problem is the old width is only set during loading of document, new width changes during every resize. I want to get the width just before resizing, so I can check if user is decreasing width or increasing width of screen.

In the resize() handler, update oldwidth with the new width as the very last line of the function.
$(document).ready(function () {
var oldwidth = $(window).width();
$(window).resize(function () {
var nw = $(window).width();
//compare new and old width
oldwidth = nw;
});
});

Resize event detection, loging on stop resize:
function resize_event_analysis()
{
var resized_to;
//On resize events
$(window).resize(function()
{
clearTimeout(resized_to);
resized_to = setTimeout(function() {
var now = new Date();
now.toString('yyyy-MM-dd, hh:mm:ss');;
var dwidth = "Device width = " + window.screen.width;
var swidth = "Window width = " + $(document).width();
console.log("Resize detected successfully - " + now);
console.log(dwidth);
console.log(swidth);
}, 100);
});
Call like i.e.:
$(document).ready(function() {
resize_event_analysis();
});

The previous solution only works the first time you load the page, but if you resize the browser it does not calculate it anymore, so my solution for the whole problem is:
on my master page I get the initial size:
$(document).ready(function () {
var oldWidth = $(window).width();
});
then on the resize event we do this:
$(window).resize(function () {
if ($(window).width() != oldWidth) {
// do whatever we want to do
// update the size of the current browser (oldWidth)
oldWidth = $(window).width();
}
});

dynamically setting the iframe height; not working on ie and chrome

I am trying to set the height of an iframe dynamically using javascript and Jquery.
But for reason this is not working in Ie8 & chrome. (But its working fine on firefox)
can some body please help?
Thanks
function resizePanel() {
window.console.log("ran the resize panel function");
var frame = document.getElementsByTagName('iframe')[0];
if(frame != null) {
var height;
if(self.innerHeight) {
window.console.log("ran the self.innerHeight");
height= self.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientHeight)) {
window.console.log("ran the clientHeight");
height = document.documentElement.clientHeight;
}
else if(document.body) {
window.console.log("ran the document.body");
height = document.body.clientHeight;
}
frame.style.height = height - 165 + 'px'
}};
$(document).ready(function() {
resizePanel();
$(window).resize(function() {
resizePanel();
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
function EndRequest(sender, args) {
resizePanel();
}

Your code seems slightly complicated, you could just do the following:
function resizePanel() {
window.console.log("ran the resize panel function");
var frame = document.getElementsByTagName('iframe')[0];
if(frame != null) {
frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
}
}
Should work in all major browsers.

The Code works fine on all browsers by changing one line.
Instead of using
var frame = document.getElementsByTagName('iframe')[0];
use
var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");
The problem was Chrome and IE have hidden Iframes and when we use getElementsByTagName it returns us the array of all iframes. so we try to access [0] index, it was referring to some other iframe.
I hope this will help.
The complete code is:
function resizePanel() {
var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe");
if(frame != null) {
var height;
if(self.innerHeight) {
height= self.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientHeight)) {
height = document.documentElement.clientHeight;
}
else if(document.body) {
height = document.body.clientHeight;
}
frame.style.height = height - 165 + 'px'
}};
$(document).ready(function() {
resizePanel();
$(window).resize(function() {
resizePanel();
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
function EndRequest(sender, args) {
resizePanel();
}

Jquery image load issue when navigation through menu

I am having below issue when trying to brows the site through navigation,
http://nickylurie.com.au/Temp/index.php
as you can see left hand site image some time load some time aren't,
i am you using below code to change the image when going through to different page,
var pic = new Image();
pic.src = "images/homeLargeImg.jpg";
and below is the my backend code.
var RHigh=$('#RightPane').height()
var windHigh=$(window).height()
$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)
$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"' style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()
})
$(window).bind('resize', function()
{
resize()
});
function resize()
{
RHigh=$('#RightPane').height()
windHigh=$(window).height()
if( RHigh < windHigh)
{
$("#triquibackimg").css("height",$(window).height());
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
//----------------Right Pane vAlign--------------
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", $("#LeftPane").width());
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#RightPane").vAlign();
//$("#RightPane").hAlign();
});
}
else
{
$("#triquibackimg").css("height",(RHigh+150));
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
// if ($(window).height()>800){
// $("#RightPane").css("position",'relative');
// }
// else{$("#RightPane").css("margin-top",60)}
}
}
can some one please advice about this?
Thanks

Offtopic: I wanted to comment on this questions, because I don't have the answer (yet), its lame that I must have a repetation of 50 to comment..
Ontopic:
What are you trying to achieve and what is the problem?
When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
They do load very slow..
Why do you want to insert the image by javascript and not simply by a img tag?