JS: Slideshow inaccurate result - javascript

Hi I write this simple javascript slideshow cause I want to write my own slideshow in javascript. It automatically change the images by a set time interval. But when I try to click the backward and forward function the result is not accurate or the images are in order.
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = 0;
var count = images.length;
function slidingImages()
{
i = i % count;
document.banner.src = images[i];
i++;
}
function forward()
{
i = (i + 1) % count;
document.banner.src=images[i];
}
function backward()
{
if (i <= 0)
{
i = count - 1;
}
else
{
i--;
}
document.banner.src=images[i];
}
window.onload = function()
{
slidingImages(),setInterval(slidingImages, 3000)
};
<center>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<input type="button" value="«prev" onClick="backward()">
<input type="button" value="next»" onClick="forward()">
</center>
What is the solution so my slideshow would be accurate?

This will pause the automatic behavior when the mouse is within the red rectangle and continue in auto mode once the mouse is out of the red rectangle. The buttons of course work as expected.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
fieldset { width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; border: 1px solid red; }
</style>
</head>
<body>
<section>
<p>
<img src="images/1.jpg" name="banner" id="name"/>
</p>
<fieldset id="control">
<input id="prev" type="button" value="◄">
<input id="next" type="button" value="►">
</fieldset>
</section>
<script>
var images = ["http://i1214.photobucket.com/albums/cc487/myelstery/1.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/2.jpg","http://i1214.photobucket.com/albums/cc487/myelstery/3.jpg"];
var i = -1;
var count = images.length;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var control = document.getElementById('control');
var autoSlide;
window.onload = auto;
function auto() {
autoSlide = setInterval(fwd, 3000) };
function pause() {
clearInterval(autoSlide);
}
function fwd() {
if (i >= 0 && i < 2)
{
i += 1;
}
else
{
i = 0;
}
document.banner.src=images[i];
}
function rev() {
if (i > 0 && i <= 2)
{
i -= 1;
}
else
{
i = 2;
}
document.banner.src=images[i];
}
prev.addEventListener('click', function() {
rev();
}, false);
next.addEventListener('click', function() {
fwd();
}, false);
control.addEventListener('mouseover', function() {
pause();
}, false);
control.addEventListener('mouseout', function() {
auto();
}, false);
</script>
</body>
</html>

Related

How to stop this function at the given point?

var counter;
var count = 0;
//var booli = new Boolean("false");
window.onload = function() {
var x = document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++) {
let y = x[i];
console.log(y);
x[i].onmousedown = debounce(function() {
//if(booli)
//{
start(y.className, y.value.replace(/\s/g, ''));
//};
}, 550);
};
}
function debounce(a, b) {
return function() {
var timer;
clearTimeout(timer);
timer = setTimeout(function() {
a();
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
//booli=false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put {
width: 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu">
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>
Hey guys!
Goal: stop the function that writes numbers before it starts writing numbers
without the commented things the program works, but its not stopping, so i wanted to stop it from executing the function that writes numbers with a boolean.
It has to stop when leaving the button
Why does it not work?
And what are the alternatives?
You had a couple of issues. The 550ms delay on the timeout is causing the onmouseleave to fire before the code in debounce. Also your booli was being set in the wrong spot and was never being reset to true.
let counter;
let count = 0;
let booli = false;
window.onload = function() {
let x = document.getElementsByClassName('banana')
let i;
for (i = 0; i < x.length; i++) {
let y = x[i];
console.log(y);
x[i].onmousedown = debounce(function() {
start(y.className, y.value.replace(/\s/g, ''));
}, 1);//550
}
}
function debounce(a, b) {
return function() {
let timer;
clearTimeout(timer);
booli = true;
timer = setTimeout(function() {
if(booli)
{
a();
}
else
{
clearInterval(counter);
}
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
booli = false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put{
width = 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu" style { width = 700px; height: 18px; font-size=14pt; }>
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>
On why it doesn't work:
You have an issue with the way your events are behaving on your <input type="button">s.
For some reason, when you click a button, the onMouseLeave event is triggering, which is running end(). This, in turn, is setting booli to false, which is why it felt like something was wrong with your boolean.
You're also never setting booli to be true anywhere in the code you shared.
booli gets set to false before onMouseDown and start() never gets called.
I set booli as true in your declaration and threw a couple log statements into your code to show what I mean:
var counter;
var count = 0;
var booli = true;
console.log("booli=", booli);
window.onload = function() {
var x = document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++) {
let y = x[i];
x[i].onmousedown = debounce(function() {
console.log("onMouseDown, booli is", booli);
if(booli) {
start(y.className, y.value.replace(/\s/g, ''));
}
}, 550);
};
}
function debounce(a, b) {
return function() {
var timer;
clearTimeout(timer);
timer = setTimeout(function() {
a();
}, b);
};
}
function start(clicked_className, cha) {
counter = setInterval(function() {
add(clicked_className, cha);
count++;
}, 90);
}
function end() {
console.log("onMouseLeave, setting booli=false");
booli=false;
clearInterval(counter);
}
function add(clicked_className, cha) {
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
#put {
width: 700px;
height: 18px;
font-size=14pt;
}
<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="numeri">
<input type="text" id="put" name="outpu">
<input type="button" id="apple" class="banana" value=" 1 " onmouseleave="end()">
<input type="button" id="ada" class="banana" value=" 2 " onmouseleave="end()">
<input type="button" id="aded" class="banana" value=" 3 " onmouseleave="end()">
</form>
</body>
</html>

How to end/clear/terminate a function starting after interval BEFORE the interval is over?

<!DOCTYPE html>
<html onmouseup="end()">
<head>
<meta charset="UTF-8">
</head>
<script>
var counter;
var count = 0;
window.onload=function()
{
var x=document.getElementsByClassName('banana')
var i;
for (i = 0; i < x.length; i++)
{
let y=x[i]; //////////hier funktioniert es nicht mit var !!!
console.log(y);
x[i].onmousedown = debounce(function()
{
start(y.className,y.value.replace(/\s/g, ''));
}, 550);
}
}
function debounce(a, b)
{
var timer;
return function()
{
clearTimeout(timer);
timer = setTimeout(function()
{
a();
}, b);
};
}
function start(clicked_className,cha)
{
counter = setInterval(function()
{
add(clicked_className,cha);
count++;
},90);
}
function end()
{
clearInterval(counter);
}
function add(clicked_className,cha)
{
window.document.numeri.outpu.value =
window.document.numeri.outpu.value + cha;
}
</script>
<style>
#put
{
width:700px;
height:18px;
font-size=14pt;
}
</style>
<body>
<form name="numeri">
<input type="text" id="put"name="outpu">
<input type="button"id="apple"class="banana"value=" 1 "onmouseleave="end()">
<input type="button"id="ada"class="banana"value=" 2 "onmouseleave="end()">
<input type="button"id="aded"class="banana"value=" 3 "onmouseleave="end()">
</form>
</body>
</html>
It starts after an Interval, but doesnt clear the interval if the conditions for terminating/clearing are met before the interval even started.
Now its like this:
Press button->550ms Waiting time->function->termination if conditions met
But it has to work like this too:
Press button->550ms Waiting time->termination if conditions met->no function
I have no idea how to fix that please help me :(
Also maybe is there a better way to do it in the first place?

How to pulse an image and change the rate of pulsing?

I think this is working but not really. I also don't think that it is the best approach.
The timer serves as another function running while having the ability to change the pulsing rate of the image.
I have tried to use gifs instead of because they have different speeds, there isn't a smooth transition when switching between images.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<style>
#red-square {
position: absolute;
display: inline-block;
z-index: 1;
top : 200px;
right: 200px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="result"></div>
<div id="red-square"></div>
<button onclick="speedOne();">speed one</button>
<button onclick="speedTwo();">speed two</button>
<button onclick="speedThree();">speed three</button>
<script>
var counter = 0,
stopTimeoutTwo = null,
stopTimeoutThree = null,
currentSpeed = "speed one";
function runCounter() {
counter++;
result.textContent = counter;
if(currentSpeed == "speed one") {
if((counter%60) == 0) {
$("#red-square").hide();
}else if((counter%60) != 0) {
$("#red-square").show();
}
}
else if(currentSpeed = "speed two") {
if((counter%45) == 0) {
$("#red-square").hide();
}else if((counter % 45) != 0) {
$("#red-square").show();
}
}else if(currentSpeed = "speed three") {
if((counter%30) == 0) {
$("#red-square").hide();
}else if((counter%30) != 0) {
$("#red-square").show();
}
}
if(counter < 1e5) timer = setTimeout(runCounter, 0);
}
runCounter();
function stepOne() {
currentSpeed = "speed one";
}
function stepTwo() {
currentSpeed = "speed two";
}
function stepThree() {
currentSpeed = "speed three";
}
</script>
</body>
</html>
You can use setInterval to create your efect like so: Fiddle!
This is the JS I used:
var speed = 4000;
var inter;
var square = document.getElementById("red-square");
square.style.backgroundColor = "red";
function myTime(){
inter = setInterval(function(){
console.log(square.style.backgroundColor+" "+speed);
if(square.style.backgroundColor == "red"){
square.style.backgroundColor = "blue";
}
else{
square.style.backgroundColor = "red";
}
}, speed);
}
function changSpeed(s){
clearInterval(inter);
speed = s;
inter=null;
myTime();
}
myTime();
the rest is your code.

Auto-Play feature not executing in JS

I have somewhat of a baseball game, obviously there are not bases or hits. Its all stikes, balls and outs. The buttons work and the functionality of the inning (top and bottom as well as count) are working. I want this to ideally randomly throw a pitch on its own every few seconds. Basically to randomly "click" the ball or strike button. I am trying to use the setTimeout function with no success. Any help?
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bullpen.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bullpen</title>
</head>
</html>
<body>
<button id=buttons onclick="playBall()">Auto-Play</button>
<h2>Inning: <span id=inningHalf></span> <span id=inningNum></span></h2>
<div id=buttons>
<button onclick="throwBall(), newInning()">Ball</button>
<button onclick="throwStrike(), newInning()">Strike</button>
</div>
<h2>Count: <span id=ball>0</span> - <span id=strike>0</span></h2>
<h2>Outs: <span id=out>0</span></h2>
<h2>----------------</h2>
<h2>Walks: <span id=walks>0</span></h2>
<h2>Strikeouts: <span id=strikeout>0</span></h2>
<script src="bullpen.js"></script>
</body>
</html>
JS:
var ball = 0;
var strike = 0;
var out = 0;
var walks = 0;
var strikeout = 0;
//---------------------------------
var outPerInning = 0;
var inning = 1;
//---------------------------------
document.getElementById('inningNum').innerHTML = inning;
document.getElementById('inningHalf').innerHTML = '▲';
function throwBall(){
ball++;
document.getElementById('ball').innerHTML = ball;
if (ball == 4){
ball = 0;
strike = 0;
walks++;
document.getElementById('walks').innerHTML = walks;
document.getElementById('strike').innerHTML = 0;
document.getElementById('ball').innerHTML = 0;
}
};
function throwStrike(){
strike++;
document.getElementById('strike').innerHTML = strike;
if(strike == 3){
ball = 0;
strike = 0;
strikeout++;
out++;
outPerInning++;
document.getElementById('strikeout').innerHTML = strikeout;
document.getElementById('out').innerHTML = out;
document.getElementById('strike').innerHTML = 0;
document.getElementById('ball').innerHTML = 0;
}
};
function newInning(){
if(out == 3){
ball=0;
strike=0;
out=0;
document.getElementById('strike').innerHTML = 0;
document.getElementById('ball').innerHTML = 0;
document.getElementById('out').innerHTML = 0;
}
if(outPerInning == 3){
document.getElementById('inningHalf').innerHTML = '▼';
}
if(outPerInning == 6){
inning++;
document.getElementById('inningHalf').innerHTML = '▲';
outPerInning = 0;
document.getElementById('inningNum').innerHTML = inning;
}
};
function playBall(){
var play = Math.random;
if(play >= 0.4){
throwStrike();
newInning();
}
else{
throwBall();
newInning();
}
setTimeout(playBall, 5000);
};
CSS if needed:
h2{
margin-left: 50px;
font-size: 50px;
}
button{
font-size: 45px;
}
#buttons{
width: 227px;
margin-left:50px;
margin-top: 20px;
}
Perhaps this is the problem:
function playBall(){
var play = math.random;
if(play >= 0.4){
throwStrike;
newInning();
}
else{
throwBall;
newInning();
}
setTimeout(playBall, 5000);
};
Should be
function playBall(){
var play = Math.random();
if(play >= 0.4){
throwStrike(); //call the function
newInning();
}
else{
throwBall(); //call the function
newInning();
}
setTimeout(playBall, 5000);
};
You were not calling these functions!
Here is a working fiddle: https://jsfiddle.net/av6vsp7g/

I get [Object Error] When I use a timer in IE Mobile

I am trying to display 1 image after another in IE Mobile. The following code works in IE Desktop but I get an [Object error] If I run it in IE Mobile.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var interval = 30;
var _timer;
var _index = 0;
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" title="Play Motion Clip from Beginning" onclick="test();">
<img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;" id="btnPlay" />
</a>
<img alt="" src="../0000.jpg" id="imgLive" />
<div id="divImage" style="width: 352px; height: 288px; display: none; background-image: url('Portal/Catalogues/000EC902F17F/3/2013/10/6/10/60b01a71-27f9-4122-ae8e-674e65a8b4dd/20131006102041027x75x0.04x0.40x.img00001.jpg');
background-repeat: no-repeat;">
</div>
<div id="divImageCache1" style="width: 352px; height: 288px; display: none;">
<img alt="" src="../0000.jpg" id="imgCached" />
</div>
</div>
</form>
<script type="text/javascript">
function test() {
try {
_timer = setInterval(swapImages(), interval);
}
catch (e) {
alert(e);
}
}
var imgCached = document.getElementById('imgCached');
var imgLive = document.getElementById('imgLive');
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my irl/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
</script>
</body>
</html>
To debug I changed the javascript to this:
<script type="text/javascript">
function test() {
try {
alert('hi1');
_timer = setInterval(swapImages(), interval);
alert('hi2');
}
catch (e) {
alert(e);
}
}
var imgCached = document.getElementById('imgCached');
var imgLive = document.getElementById('imgLive');
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
function swapImages() {
alert('hi3');
imgCached.onload = OnImgLoaded();
imgCached.src = 'http://www.url.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
alert('hi4');
}
</script>
What happened was that I got 'hi1', 'hi3', 'hi4' then object error. the image DID change once.
You are not assining a function to setInterval, you are calling the function and assigning what every it returns.
Your code
_timer = setInterval(swapImages(), interval);
is actually doing this
_timer = setInterval(undefined, interval);
Your code needs to drop the () so you are not calling the function.
_timer = setInterval(swapImages, interval);
You also did it here:
imgCached.onload = OnImgLoaded();
Personally I would not use an interval, your images are NOT going to load in 30 ms. You a timeout after the images are loaded. Something like this would work.
var isRunning,
timer,
intervalMS = 30,
imgLive = document.getElementById('imgLive');
function test() {
_index = 0;
isRunning = true;
if (timer) window.clearTimeout(timer);
swapImages();
}
function setImageSrc (src) {
imgLive.src = src;
if(isRunning) timer = window.setTimeout(swapImages, intervalMS);
}
function swapImages() {
var imgCached = new Image();
imgCached.onload = function() {
setImageSrc(this.src);
};
imgCached.onerror = function() {
setImageSrc("Error.jpg");
};
imgCached.src = 'http://www.informedmotion.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
isRunning = false;
}
}

Categories

Resources