Develop Reference

Sound from video and audio elements not playing on iOS (not an autoplay issue)

I have made this little "app", which is basically a video of a fireplace and a Christmas song which will both play on a loop.
I sent it to a friend who has an Iphone and said that neither the audio from the video or the audio from the song is playing.
I have read many questions and documentations about this issue, but they all pretty much talk about how Apple don't let you use autoplay on load. Feature that (if I'm not wrong) Android uses too so that the audios need to be triggered by the user. But that's ok, 'cause it's what I have done.
How the audio is triggered on my app
Since my app has orientationchange trigger I'll explain it to those who has not access to a phone or tablet (and I'll post the code obviously).
Once you access the website it tells you to turn your phone horizontally. After you've done it, a button will appear and by clicking (tapping) on it, both the video and audios start (at least on Adroid). So there IS an event triggered by the user. Under that button "sits" the play() for both audio and video elements. That's why, I can't understand what else should I do to make it work on iOS.
Here the website if you want to take a look
The Website
EDIT: I tryied to make the snippet thing but somehow it appears broken, the JS code appears on the homepage. Have no clue why, so I'll simply copy the code.
HTML
<div class="container">
<img src="balls.png" width="180px" class="balls" alt="xmas-balls">
<div class="turncont">
<h3 class="turn">Turn your phone</h3>
<img src="turn.svg" class="turnicon" width="50px" alt="turn-smartphone-horizontally">
</div>
<h3 class="start">Start Magic</h3>
</div>
<video class="video" src="Fireplace.mp4" loop></video>
<p class="home">Home</p>
<img src="mobileup.svg" class="mobileup" width="30px" alt="">
<audio src="ThereIsNoPlace.mp3" class="audio" loop></audio>
<img src="frozen1.png" class="frozen1" alt="">
<img src="frozen2.png" class="frozen2" alt="">
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Mountains of Christmas', cursive;
}
body {
background: rgba(245,245,255);
}
.balls {
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.turncont {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 40vh;
left: 50vw;
transform: translateX(-50%);
width: 100vw;
margin: auto;
}
.turn {
font-size: 2em;
margin-bottom: 20px;
}
.start {
margin: auto;
font-size: 1.5em;
border: 1px solid black;
border-radius: .5em;
padding: .2em .9em;
margin-top: 2em;
letter-spacing: 1px;
box-shadow: 0 0 20px limegreen;
position: absolute;
bottom: 1em;
left: 50vw;
transform: translateX(-50%);
display: none;
}
.displaynone {
display: none;
}
.displayyes {
display: block;
}
.video {
display: none;
width: 100vw;
min-height: 100vh;
font-size: 0;
line-height: 0;
margin: 0;
padding: -5px;
}
.home {
position: absolute;
top: 45px;
left: 10px;
color: white;
text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
letter-spacing: 1px;
display: none;
}
.mobileup {
position: absolute;
top: 10px;
left: 12px;
display: none;
}
.frozen1 {
width: 100vw;
position: absolute;
bottom: 0px;
z-index: -1;
}
.frozen2 {
width: 100vw;
position: absolute;
top: 0;
z-index: -1;
}
JAVASCRIPT
let start = document.querySelector('.start')
let turnStuff = document.querySelector('.turncont')
let balls = document.querySelector('.balls')
let mainCont = document.querySelector('.container')
let video = document.querySelector('.video')
let homeBtn = document.querySelector('.home')
let mobileUp = document.querySelector('.mobileup')
let audio = document.querySelector('.audio')
let frozen1 = document.querySelector('.frozen1')
let frozen2 = document.querySelector('.frozen2')
window.addEventListener('orientationchange', ()=> {
if(screen.orientation.angle == 90 || screen.orientation.angle == 270 ) {
start.addEventListener('click', ()=> {
mainCont.style.display = 'none'
video.style.display = 'flex'
video.play()
homeBtn.style.display = 'block'
mobileUp.style.display = 'block'
audio.play()
})
turnStuff.classList.add('displaynone')
start.classList.add('displayyes')
balls.style.top = '-10px'
balls.style.width = '150px'
frozen1.style.display = 'none'
frozen2.style.display = 'none'
}
if(screen.orientation.angle == 0) {
turnStuff.classList.remove('displaynone')
start.classList.remove('displayyes')
balls.style.top = '0px'
balls.style.width = '180px'
homeBtn.style.display = 'none'
video.style.display = 'none'
video.pause()
video.currentTime = 0
audio.pause()
audio.currentTime = 0
mainCont.style.display = 'block'
mobileUp.style.display = 'none'
frozen2.style.display = 'block'
frozen1.style.display = 'block'
}
})

I'm gonna answer to it myself, because I managed to make it work.
I hope it's helpful for those who run into the same problem.
I'm not 100% sure that what I will say it's true, but by reading some documentation, apparently iOS or some versions of iOS doesn't support orientationchange, so I managed to make it work with resize instead, and also by changing the parameters of the conditional statement.
I changed the event trigger
window.addEventListener('resize', functionName)
function functionName() {
if(window.innerWidth > window.innerHeight) {
//then do stuff
}
if(window.innerWidth < window.innerHeight) {
//then do other stuff
}
}
So the new JS is:
let start = document.querySelector('.start')
let turnStuff = document.querySelector('.turncont')
let balls = document.querySelector('.balls')
let mainCont = document.querySelector('.container')
let video = document.querySelector('.video')
let homeBtn = document.querySelector('.home')
let mobileUp = document.querySelector('.mobileup')
let audio = document.querySelector('.audio')
let snowCont = document.querySelector('.snowflakes')
let frozen1 = document.querySelector('.frozen1')
let frozen2 = document.querySelector('.frozen2')
window.addEventListener('resize', whenTurn)
function whenTurn() {
if(window.innerWidth > window.innerHeight) {
turnStuff.classList.add('displaynone')
start.classList.add('displayyes')
balls.style.top = '-10px'
balls.style.width = '150px'
frozen1.style.display = 'none'
frozen2.style.display = 'none'
}
if(window.innerWidth < window.innerHeight) {
turnStuff.classList.remove('displaynone')
start.classList.remove('displayyes')
snowCont.style.display = 'block'
balls.style.top = '0px'
balls.style.width = '180px'
homeBtn.style.display = 'none'
video.style.display = 'none'
video.pause()
video.currentTime = 0
audio.pause()
audio.currentTime = 0
mainCont.style.display = 'block'
mobileUp.style.display = 'none'
frozen2.style.display = 'block'
frozen1.style.display = 'block'
}
}
start.addEventListener('touchend', ()=> {
mainCont.style.display = 'none'
snowCont.style.display = 'none'
video.style.display = 'flex'
video.play()
homeBtn.style.display = 'block'
mobileUp.style.display = 'block'
audio.play()
})

Add multiple links to Javascript Iframe popup

how do I add multiple links to this JavaScript, the JavaScript is an Iframe popup, triggered by an external link, I need to add 3 links to trigger 3 different page popups.
I have studied the JavaScript and tried different ways.I searched stack, and found nothing that could provide a solution.
Any help would be appreciated.
Here is the HTML for using the JavaScript with 1 link.
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

You can use class to refer multiple elements. Select all the elements with the class with querySelectorAll(), then loop through them to attach the event.
You can associate the related link in the a element itself using a custom attribute, then on click you can retrieve that and set that as the popup iframe src.
Try the following way:
document.querySelectorAll('.link').forEach(function(lk){
lk.onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = this.getAttribute('data-link');
console.log(this.getAttribute('data-link'));
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
});
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div>
Click me<br>
Click me 2
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

Inline Javascript stoped adding class to element

Hey I have an inline javascript code that adds a class to an element and makes it slide up in the screen. But it suddenly stopped working and I don't know why. Here's the HTMl and JS:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".converter").addClass("atcbottomactive");
} else {
$(".converter").removeClass("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: #eeeeee;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: green; height: 1500px; width: 100%;"></div>
<div class="converter"><div class="ccontent">...</div></div>
Here's the link
Thanks in advance :)

In fact, trying to use it without including JQuery gives you the error. You can solve this easily with "JavaScript" without using jQuery.
var element = document.querySelector(".converter");
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
padding: 20px 20px 200%;
background: blue;
color: white;
}
.converter.atcbottomactive {
background: green;
}
<div class="converter">
<div class="ccontent">Scroll me: 400px</div>
</div>

animate to right on scroll down and animate back to the left on scroll up

I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?

You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

How to move two different images across the screen using JavaScript

I have been challenged with a website that requires me to make two images race at random across the screen to a finish line. I am required to make this happen using JavaScript. Unfortunately I have ran into some trouble here making this happen.
I have the script that allows a div container and an object "animate" (which is a small square) to move across the screen to the right as I am supposed to do. My question comes into play when trying to do this to two different images.
The goal is to have the animation I have created to apply to the images, I cannot figure out how to apply the functions to the images already placed on the page to make it seem as if they are racing on random intervals across the page to the finish line.
I understand the concept of the animation and the JavaScript behind it, I just dont understand how to make it apply to an image, and more than 1 image at that.
Please advise.
Here is my code that I am using: you can see that I left my demo animation on the page, and the two images I am looking to apply it to.
function myMove()
{
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame()
{
if (pos == 350)
{
clearInterval(id);
}
else
{
pos++;
elem.style.left = pos + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>

Try this one:
function myMove()
{
var elemBluefish = document.getElementById("bluefish");
var elemBluefishWin = document.getElementById("bluefishwin");
var elemTurtle = document.getElementById("turtle");
var elemTurtleWin = document.getElementById("turtlewin");
var posBluefish = 0;
var posTurtle = 0;
var hasWinner = false;
elemBluefishWin.style.display = 'none';
elemTurtleWin.style.display = 'none';
var id = setInterval(frame, 5);
function frame()
{
if(posBluefish >= 350 && posTurtle >= 350)
{
clearInterval(id);
return;
}
if(posBluefish < 350)
{
posBluefish += Math.round(Math.random()*10);
if(posBluefish >= 350)
{
posBluefish = 350;
if(!hasWinner){
hasWinner = true;
elemBluefishWin.style.display = 'unset';
}
}
elemBluefish.style.left = posBluefish + 'px';
}
if(posTurtle < 350)
{
posTurtle += Math.round(Math.random()*10);
if(posTurtle >= 350)
{
posTurtle = 350;
if(!hasWinner){
hasWinner = true;
elemTurtleWin.style.display = 'unset';
}
}
elemTurtle.style.left = posTurtle + 'px';
}
}
}
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="yeildLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<style>
body {
overflow: hidden;
}
#bluefish {
position: absolute;
top: 31pc;
width: 17pc;
left: -.5pc;
}
#turtle {
position: absolute;
width: 15pc;
top: 20pc;
}
#bluefishwin {
position: absolute;
right: 1pc;
top: 31pc;
display: none;
}
#turtlewin {
position: absolute;
right: 1pc;
top: 20pc;
display: none;
}
body {
background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg")
}
.finishline {
position: absolute;
right: -12pc;
top: 18pc;
}
#traffic-light {
height: 10pc;
width: 4pc;
background-color: #333;
border-radius: 20pc;
position: absolute;
}
.bulb {
height: 2pc;
width: 2pc;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
/*#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}*/
</style>
<img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png">
<img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png">
<img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline">
<img id="bluefishwin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<img id="turtlewin" src="http://a.dryicons.com/images/icon_sets/coquette_part_3_icons_set/png/128x128/prize_winner.png">
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
It gets an element for each image and adds every 5ms a random amount of pixels (between 0 and 9) to each pos of image.
If both "racers" reached the target (350px) the interval is cleared and the race is over.
The winner gets an image displayed at the finish line.

an example:
function startRace() {
animateRacer("player1", true);
animateRacer("player2", true);
}
function animateRacer(playerId, reset) {
var elem = document.getElementById(playerId);
var pos = parseInt(elem.style.left, 10);
if (isNaN(pos) || reset) {
pos = 0;
}
//console.log(playerId + ': ' + pos);
if (pos < 450) {
pos += randStep(3);
elem.style.left = pos + 'px';
setTimeout('animateRacer("' + playerId + '")', randStep(5));
}
}
function randStep(max) {
var min = 1;
return Math.floor(Math.random() * (max - min)) + min;
}
body {
overflow: hidden;
}
#container {
width: 500px;
height: 160px;
position: relative;
background-color: yellow;
}
.player {
width: 50px;
height: 50px;
background-color: gray;
position: relative;
}
#player1 {
background-color: red;
top: 20px;
}
#player2 {
background-color: blue;
top: 40px;
}
<p>
<button onclick="startRace()">Start Race</button>
</p>
<div id="container">
<div id="player1" class="player"></div>
<div id="player2" class="player"></div>
</div>

function mover(obj) {
this.obj=obj;
this.pos = 0;
this.id = setInterval(this.frame, 5);
}
mover.prototype.frame=function() {
if (this.pos == 350) {
clearInterval(this.id);
} else {
this.pos++;
this.obj.style.left = this.pos + 'px';
}
}
}
Simply do:
img1=new mover(document.getElementById("pic1"));
You can repeat this with every image and you could store them into an array:
images=[];
function letsmove(){
images.push(new mover(someid));
...
}
And you can do this with all images on the site:
images=[];
function letsmove(){
domimages=document.getElementsByTagName("img");
domimages.forEach(function(img){
images.push(new mover(img));
});
}
}
See JS OOP and JS Prototyping for more explanation