Play or pause CSS animation using JavaScript - javascript

I'm unsure if the following lines of JavaScript are correct. On the click of a button, the following JavaScript function is called. This function should pause the CSS animation when clicked once and resume the animation if clicked again:
function myFunction()
{
document.getElementById("sky").style.animationPlayState = "paused | running";
}

The logic for determining what state to change it to, needs to be done outside the quotes. You are probably looking more for something like this:
function myFunction()
{
var sky = document.getElementById("sky");
if(sky.style.animationPlayState == "paused")
{
sky.style.animationPlayState = "running";
}
else
{
sky.style.animationPlayState = "running";
}
}
Or all in one line like this:
element.style.animationPlayState = running ? 'paused' : 'running';

Related

Using a return/stop function on click

Currently closee to finishing a slideshow using html and JavaScript. My last problem is creating stop button which needs to use a return function (I assume) Or some sort of exit function. It is an image slideshow that runs automatically, can be paused, skip image, go back an image and so on. I'd like the stop button to kill the autoRun function and set the image back to the first default image. I've set up a function which I'm guessing is totally wrong as it is not working.
The HTML
<td class="controls">
<button onClick="autoRun()">Start</button>
<button onClick="changeImage(-1); return false;">Previous Image</button>
<button onClick="pause();">pause</button>
<button onClick="changeImage(1); return false;">Next Image</button>
<button onClick="Exit();">Exit</button>
</td>
</tr>
All buttons are working besides the last one
JavaScript
var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"];
var interval = setInterval("changeImage(1)", 2000);
var imageNumber = 0;
var imageLength = images.length - 1;
function changeImage(x) {
imageNumber += x;
// if array has reached end, starts over
if (imageNumber > imageLength) {
imageNumber = 0;
}
if (imageNumber < 0) {
imageNumber = imageLength;
}
document.getElementById("slideshow").src = images[imageNumber];
return false;
}
function autoRun() {
interval = setInterval("changeImage(1)", 2000);
}
function pause(){
clearInterval(interval);
interval = null;
}
function Exit(){
return;
}
I'm not fully understanding the return statement in the Exit function, as most examples I've looked at run the function when an 'if' statement is met, whereas I'd like mine to execute when the Stop button is clicked. Thanks
A return statement simply exits the function in which it appears, it doesn't cause other things to stop. So this:
function Exit(){
return;
}
...has the same effect as this:
function Exit() { }
That is, the function doesn't do anything at all.
I'd like the stop button to kill the autoRun function and set the image back to the first default image.
OK, so have your Exit() function call your other functions:
function Exit() {
pause(); // this will stop the slideshow
imageNumber = 0; // reset to the first image
changeImage(0); // change to that image
}

Single button toggle for audio using vanilla javascript

I am trying to make a simple button to turn on and off my audio file.
Once I click play I can't turn it off.
I'm using an image as my button and div.onclick to spark the function.
The html audio tag has id audioPlay.
I use the global boolean playSound, initially set to false.
My script looks like this:
var playSound = false;
if (playSound != true) {
audioButton.src = '../../testStuff/audioPlay.png';
audio.onclick = function () {
document.getElementById('audioPlay').play();
playSound = true;
console.log(playSound);
}
}
if (playSound == true) {
audioButton.src = '../../testStuff/audioStop.png';
audio.onclick = function () {
document.getElementById('audioPlay').pause();
playSound = false;
}
}
When I click on it the first time it works fine. It sets playSound to true.
However, when I go to click it a second time, nothing happens. Something is setting playSound back to false and I don't know why.
I've tried switching the ==true if statement above the false one, as well as rolling both if statements into a single onclick function but it still operates this way.
Any ideas?
I think the issue is that you're adding two separate click handlers that are both being executed on each click. This results in playSound always being set to true, but then immediately being set back to false.
Instead, write a function called togglePlay that does something like the following, and set that as your click handler, but only once.
function togglePlay () {
if (playSound) {
audioButton.src = '../../testStuff/audioStop.png';
document.getElementById('audioPlay').pause();
playSound = false;
} else {
audioButton.src = '../../testStuff/audioPlay.png';
document.getElementById('audioPlay').play();
playSound = true;
}
}
//play is the name of the botton that u click to play the music and psuse
const isplay;
play.addEventListener('click',()=>{
const playmusic = ()=>{
isplay = true;
console.log('play music');
music.play();
};
const pausemusic = ()=>{
isplay = false;
music.pause();
};
if(isplay){
pausemusic();
}else{
playmusic();
};
)};

synchronise code in javascript, wait for event to complete

I've got a problem near that one.
Somewhere I've got a binding over a file input :
var file;
function initLoadImg(){
$('#test').on('change', function() {
file = event.target.files;
// block 1
console.log("hello");
center.html('<span id="Tamb">25°C</span>');
over = true;
});
}
And i'm triggering it with another javascript function :
var over = false;
var center;
function loadImg(){
var elem = $('<div class="widget simpleimgchart center"><div class="matable"><div class="center"></div></div></div>');
center = elem.children().children();
$("#test").trigger('click');
passIfOver();
// block 2
console.log("bye");
return elem;
}
function passIfOver() {
if (over) {
return;
} else {
setTimeout(passIfOver(), 1000);
}
}
This way, I'm able to see the "hello" before the "bye" in the console.
However I don't really like this solution, (it's not clean) and user can have to wait up to 1s before getting any feedback.
Would there be another way to ensure that the return elem is executed after the end of the callback on click?
edit : My code doesn't even work, because of the setTimeout, I lose the restraint...
edit 2 : My goal is to execute the part code 1 before the part code 2. I don't want my function loadImg() to return before the code 1 has finished to execute.
I recommend you to look at PubSub pattern (http://davidwalsh.name/pubsub-javascript).
Just move the return inside the Trigger function:
var over = false;
function loadImg(){
var elem = $('<div class="widget simpleimgchart center"><div class="matable"><div class="center"></div></div></div>');
var center = elem.children().children();
$("#test").trigger('click', function(){
center.html('<span id="Tamb">25°C</span>');
return elem;
});
}
The second argument to .trigger is a callback function everything inside it will be executed After the trigger is completed.

Not using correctly javascript setTimeout / clearTimeout?

I have problem with simple javascript and some ajax.
I have link that calls javascript function like this:
<div id="Button11" onmouseover="changeContent4()">Actions</div>
Javascript function that is called above is like this:
function changeContent4()
{
BubbleOn()
document.getElementById("text1").innerHTML='Some text here';
clearTimeout(BOffi);
var BOffi = setTimeout(BubbleOff, 20000);
}
This works, it runs BubbleOn function, places text to element text1, most likely it empties BOffi timeout and sets new timeout 20000ms for it.
Here is BubbleOn:
function BubbleOn() {
$("#bubble").fadeIn(function() {
})
}
And here is BubbleOff:
function BubbleOff() {
$("#bubble").fadeOut(function() {
})
}
As in functions BubbleOn and BubbleOff works. They just hide or show div named bubble which contains text1 element. When BOffi goes timeout it just runs the BubbleOff function. This works fine. The problem is that when BubbleOff has been run and mouse is placed immediately over link that runs changeContent4(), It does make the bubble div visible again and places text there again but then bubble div fades out inside a second! Not after 20000ms. After this if the mouse is placed again to run changeContent4() everything works great. If there is about millisecond longer time than a second between the bubble fadeout and placing the mouse over changeContent4() launcher it works and waits 20000ms. Less than a second and bubble is shown about second...
What can cause this? Could it be that fadeOut is still running even the bubble is vanished from the screen and therefore it does not reset the BOffi counter? Which could have 1 second or less time left and then runs BubbleOff again after that magical second?
Two ideas to try:
put "clearTimeout(BOffi);" at the top of the function before "BubbleOn();".
declare BOffi as a global variable.
So:
var BOffi;
function changeContent4()
{
clearTimeout(BOffi);
BubbleOn();
document.getElementById("text1").innerHTML='Some text here';
BOffi = setTimeout(BubbleOff, 20000);
}
or you can use window.BOffi instead.
At a first glance I notice this var BOffi = setTimeout(BubbleOff, 20000);. This creates a local variable. After the function is executed, is lost. Second time function is called Boffi is some random residual value.
Make it global and you should be ok (remove var).
function BubbleOn() {
$("#bubble").fadeIn(function(){},1000)
}
function BubbleOff() {
$("#bubble").fadeOut(function() {},1000)
}
You should set duration for both fadeIn and fadeOut functions.
Because the animations are queued but your script keep running, try this one :
function changeContent4()
{
bubble(function(){
document.getElementById("text1").innerHTML='Some text here';
});
}
var fadeTimeout = null;
function bubble(callback) {
if(fadeTimeout==null)
$("#bubble").fadeIn(1000, function(){
if($.isFunction(callback))
callback();
fadeTimeout = setTimeout(bubbleOff, 20000);
});
}
function bubbleOff() {
$("#bubble").fadeOut(1000, function(){
fadeTimeout =null;
});
}
Fiddle here
You might wanna move the callback() call before the fadeIn as you are modifying the text inside the bubble but that exemple is just to let you see the order of every changes
EDIT : now allowing multiple call
var i = 0;
function changeContent4() {
bubble(function () {
$("#text1").text('Some text here ' + (i++));
});
}
var fadeTimeout = null;
function bubble(callback) {
if ($.isFunction(callback)) callback();
if (fadeTimeout == null) {
$("#bubble").fadeIn(1000, function () {
fadeTimeout = setTimeout(bubbleOff, 20000);
});
} else {
clearTimeout(fadeTimeout);
fadeTimeout = setTimeout(bubbleOff, 20000);
}
}
function bubbleOff() {
$("#bubble").fadeOut(1000, function () {
fadeTimeout = null;
});
}
FIDDLE

jQuery function attr() doesn't always update img src attribute

Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>
A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;
Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.
...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.
Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);

Categories