Develop Reference

Playing a gif every x seconds, instead of a constant loop

I'm currently trying to play a gif every 10 seconds, instead of continuously every time the gif finishes.
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
setInterval(function() {
console.log($('#inviteLogo').attr('src'))
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
}, 2000)
</script>
</div>
Currently, I have this. However. As you can probably see, this only plays the gif once. I'm not entirely sure how I can make this play the gif every x seconds?
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
$('#inviteLogo').attr('src', image)
}, 2000)
</script>
</div>
I have also tried the above. Saving what the original SRC atr is, and then replacing it with the old one every 2 seconds. But this did not have my desired effect either.

First of all you have 2 setInterval... And one is repeating every milliseconds.
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1) // 1 second == 1000 milliseconds
If you have control on the frame of the gif, you can also put a frame fixed for 10sec.
so I thing the best way will be
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 10000) // 1000 == 1sec
</script>
</div>

Custom html 5 player multiple tracks does not work

I am trying to create multiple custom javascript audio players on my website but once I copy the code in html the second player does not work, how should I adjust the javascript code for it to work? Here is my code: https://github.com/streamofstream/streamofstream.github.io
and here is relevant part of the code that I am talking about:
index.html relevant part here, I tried to just duplicate this part and change the audio source but once I do this the second player appears but it wont trigger javascript
<script>
function durationchange() {
var duration = $('audio')[0].duration;
if(!isNaN(duration)) {
$('#duration').html(Math.ceil(duration));
}
}
</script>
<div id="audioWrapper">
<audio id="audioPlayer" preload="metadata">
<source src="assets/millriver.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
<div id="playPause" class="play"></div>
<div id="trackArtwork"><img src="assets/smiths.jpg" /></div>
<div id="trackArtist">04/28/2021, 8PM Eastern Time, Mill River</div>
<div id="trackTitle">41°20'09.3"N 72°54'37.7"W</div>
<div id="trackProgress">
<div id="elapsedTime"></div>
<input type="range" id="scrubBar" value="0" max="100" />
<div id="remainingTime"></div>
</div>
</div>
<script type="text/javascript" src="js/audioplayer.js"></script>
and java script here (Code by https://github.com/jon-dean/html5-audio-player)
var audioPlayer = document.getElementById('audioPlayer');
var scrubBar = document.getElementById('scrubBar');
var elapsedTime = document.getElementById('elapsedTime');
var remainingTime = document.getElementById('remainingTime');
var playPause = document.getElementById('playPause');
var trackLength;
// Set up a listener so we can get the track data once it's loaded
audioPlayer.addEventListener('loadedmetadata', function() {
// Get the length for the current track
trackLength = Math.round(audioPlayer.duration);
// Set the initial elapsed and remaining times for the track
elapsedTime.innerHTML = formatTrackTime(audioPlayer.currentTime);
remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime);
});
function runWhenLoaded() { /* read duration etc, this = audio element */ }
// Set up a listener to watch for play / pause and display the correct image
playPause.addEventListener('click', function() {
// Let's check to see if we're already playing
if (audioPlayer.paused) {
// Start playing and switch the class to show the pause button
audioPlayer.play();
playPause.className = 'pause';
} else {
// Pause playing and switch the class to show the play button
audioPlayer.pause();
playPause.className = 'play';
}
});
// Track the elapsed time for the playing audio
audioPlayer.ontimeupdate = function() {
// Update the scrub bar with the elapsed time
scrubBar.value = Math.floor((100 / trackLength) * audioPlayer.currentTime);
// Update the elapsed and remaining time elements
elapsedTime.innerHTML = formatTrackTime(audioPlayer.currentTime);
remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime + 1);
};
// Set up some listeners for when the user changes the scrub bar time
// by dragging the slider or clicking in the scrub bar progress area
scrubBar.addEventListener('input', function() {
changeTrackCurrentTime();
scrubBar.addEventListener('change', changeTrackCurrentTime);
});
scrubBar.addEventListener('change', function() {
changeTrackCurrentTime();
scrubBar.removeEventListener('input', changeTrackCurrentTime);
});
// Change the track's current time to match the user's selected time
var changeTrackCurrentTime = function() {
audioPlayer.currentTime = Math.floor((scrubBar.value / 100) * trackLength);
};
// Format the time so it shows nicely to the user
function formatTrackTime(timeToFormat) {
var minutes = Math.floor((timeToFormat) / 60);
var seconds = Math.floor(timeToFormat % 60);
seconds = (seconds >= 10) ? seconds : '0' + seconds;
return minutes + ':' + seconds;
}
// Let's reset everything once the track has ended
audioPlayer.addEventListener('ended', function() {
audioPlayer.currentTime = 0;
elapsedTime.innerHTML = formatTrackTime(audioPlayer.currentTime);
remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime);
playPause.className = 'play';
});
Thank you

How to show more web page in a page?

Sample i have two link google.com and youtube.com.
I want to show interface web each 30 seconds in one screen board web page (it's mean in screen board, first show web page google.com, then after 30 seconds, it'll show web page youtube.com, and repeat). Can i use javascript or jquery ?
<html>
<body>
<!-- Show page google.com-->
<!-- Show page youtube.com-->
</body>
</html>

I'm not sure that showing iFrames for Google and YouTube is a good idea, unless you embed a specific video, YouTube will squawk about same-origin issues, same is true for Google.
However aside from the sites your linking, to actually achieve what you are asking (if I have understood the question correctly) I would do this:
var counter = $('#counter');
var count = $(counter).html();
var origCount = count
function tick(){
count--
$(counter).html(count)
if (count == 0 ) {
toggleIframe()
count = origCount
}
}
function toggleIframe(){
$('iframe').toggle();
}
setInterval(tick, 1000);
iframe{
border:5px solid #333;
}
#counter{
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">10</div>
<div id="iframeContainer">
<iframe width="560" height="315" src="https://laravel.com/"></iframe>
<iframe width="560" height="315" src="https://vuejs.org/" frameborder="0" style="display:none;"></iframe>
</div>

based on your comment I have added another answer, this has more comments so hopefully easy to understand.
This version is dynamic, so you can just add more iframes to the list and they will get added into the cycle.
// This is just to display a counter for demo purposes, you can remove this
var counter = $('#counter');
// Set the count of seconds for each iframe to display
var seconds = 5
// this is the current tick, so will count down to 0 then reset to the seconds variable value.
var tick = seconds;
// count the number of iframes on the page.
var iframesCount = $('#iframeContainer').find('.iframe').length;
// hold the current frame to show.
var currentIframe = 0;
// main function that will be run every second (1000 ms)
function run(){
// decrement the tick by 1
tick--
// update the tick counter on screen (just for demo purposes, you can remove this)
$('#counter').html(tick)
// if tick is at 0 we need to switch the frame to the next one.
if (tick === 0 ) {
// switch frame to the next frame in the list.
nextIframe();
// reset the tick back to its original value
tick = seconds;
}
}
function nextIframe(){
// check if the current frame is the last one in the list
if (currentIframe === iframesCount - 1){
// If it is the last in the list, set the current frame to 0 so we begin back at the first frame
currentIframe = 0;
}
else {
// if the current frame is not the last in the list, then increment the current frame by 1
currentIframe++
}
// run the toggleFrame function to show/hide the respective frames
toggleIframe();
}
function toggleIframe(){
// hide all the frames
$('.iframe').hide();
// show only the frame that matches current frame
var frame = $('.iframe')[currentIframe]
$(frame).show();
}
// kick off the main "run" function every 1000 ms (1 second)
setInterval(run, 1000);
iframe{
border:5px solid #555;
display:none;
}
iframe:nth-child(1){
display:block;
}
#counter{
font-size:30px;
}
<div id="iframeContainer">
<iframe class="iframe" width="560" height="315" src="https://laravel.com/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/guide/"></iframe>
<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/api/"></iframe>
<!-- Try to uncomment the below iframe and it should automatically get included in the cycle -->
<!--<iframe class="iframe" width="560" height="315" src="https://vuejs.org/v2/style-guide/"></iframe>-->
</div>
<!-- You can delete the below, its just for demo -->
<div id="counter"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

Manual traffic light conversion into automatic via Javascript

I am trying to do a traffic light sequence which runs on a timed basis automatically without user input . I have now got the code working but it only runs through once and then stops so how can I change this so it keeps going? Here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
var images = new Array()
images[0] = "image2.jpg";
images[1] = "image3.jpg";
images[2] = "image4.jpg";
setInterval("changeImage()", 3000);
var x=0;
function changeImage()
{
document.getElementById("img").src=images[x]
x++;
}
</script>
</head>
<body>
<img id="img" src="image1.jpg">
</body>
</html>

To make this automatic, you can either put it in a loop, or you can use the setInterval function.
var interval = setInterval(nextLightClick, 1500);
This will loop indefinitely, running the function every 1500 milliseconds (1.5 seconds). If you want to stop it, you can simply say:
clearInterval(interval);
Here's an example -- note that I am changing the innerHTML, rather than the src, and I am using a div instead of image, but the logic will be exactly the same.
var tlight = new Array("1green.jpg","2yellow.jpg","3red.jpg");
var index = 0;
var tlightLen = tlight.length;
var image = document.getElementById('firstlight');
image.innerHTML = tlight[index];
var interval;
function startInterval() {
interval = setInterval(nextLightClick, 1500);
}
function stopInterval() {
clearInterval(interval);
}
function nextLightClick() {
index++;
if (index == tlightLen)
index = 0;
image.innerHTML = tlight[index];
}
<span id="firstlight"></span></br>
<button onclick="startInterval()">Start</button>
<button onclick="stopInterval()">Stop</button>

Control loss with Javascript code

I wrote this Javascript for a website I am creating and I am not sure why the code runs automatically, one of my solutions is to write a function/create a timer so that the code runs at the time I want it to.
here is the js:
var introCap = document.getElementById("captionCol");
var imgDiv = document.getElementById("imgCol");
var introDiv = document.getElementById("intro");
var expose = document.getElementById("gotoPage");
var fade = 1;
var l = 15;
var r = 45;
//expose.onclick = move; this is commented out for the time being.
function stop() {
clearInterval(moveInt);
clearInterval(fadeInt);
}
function fadeOut() {
fade -= 0.07;
introDiv.style.opacity = fade;
introDiv.style.filter = "alpha('"+fade+"')";
if(introDiv.style.opacity<0) {
stop();
}
}
var fadeInt = setInterval("fadeOut()", 60);
function move() {
l -= 0.1;
r += 0.1;
introCap.style.left = r+"%";
imgDiv.style.left = l+"%";
if (imgDiv.style.left<10) {
fadeOut();
}
}
var moveInt = setInterval("move()", 70);
here is the corresponding html:
<div id="intro">
<div id="imgCol"></div>
<div id="captionCol">
<p> Hi, I'm <b>Jenny Spring</b>. <br><br>
I'm a <span id="emp">SPIN</span> farmer. </p>
</div>
<p>Go To</p> <!-- this link will be changed to a button later but is being used as is temporarily.
</div>
Is anyone able to tell why the code performs automatically?
Thanks!

setInterval() not only sets the interval, but it also calls the function after each interval. So do not use this function until you are ready to call it. Another function, setTimeout() is available, which executes the function only once.
For example, you can move interval calls to a function start() and use your href to act as a start button
function start() {
var moveInt = setInterval("move()", 70);
var fadeInt = setInterval("fadeOut()", 60);
}
<p>Go To</p>
Source: http://www.w3schools.com/js/js_timing.asp