I am programming a very simple JavaScript slideshow and it isn't working. I do not want jQuery. This code displays the first image after 5 seconds, however does not cycle through the rest of the images. The full code is as follows, I just can't figure out what I am doing wrong:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>JavaScript Slideshow</title>
<style>
#slider > img { display: none }
</style>
</head>
<body>
<div id="slider">
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
<img src="img5.png">
</div>
<script>
var s = document.getElementById("slider").getElementsByTagName("img");
var c = s.length;
setInterval(function() {
s[(s.length++) % c].style.display="block";
}, 5000);
</script>
</body>
</html>
Your code has several errors in it.
You're trying to increment the array length, and modulo it by the counter. I bet you wanted to do that the other way around:
s[c % (s.length)].style.display="";
You're not hiding the images already cycled through, so your cycle will only display once.
var s = document.getElementById("slider").getElementsByTagName("img");
var c = s.length;
setInterval(function() {
s[c % s.length].style.display="";
s[(++c) % s.length].style.display="block";
}, 5000);
Related
Hi I don't know how to loop the tag img using javascript or php or whatever?
I have around 200 images and the name of image is imaged1.jpg , imaged2.jpg, imaged3.jpg,........,imaged200.jpg something like this....
<DOCTYPE! html>
<html>
<head>
<script>
for(var i=1, i < 200,i++)
{
var images = document.getElementbyId("photo");
//////////////////////////////???
}
</script>
</head>
<body>
<div>
<div>
<img id = "photo" src="imaged i.jpg" />
</div>
</div>
</body>
</html>
Below is my code for some of my coursework(I will admit). As you can see in the comments i have done the 'setinterval' with a button. But what I want is the 'setInterval' to be able to run automatically. What i mean by this is I do not want the user to have to click the button. Is there a way to do this and if so could you point me in the right direction.
<!DOCTYPE html>
<html>
<head>
<title>Task 3 Manual traffic lights</title>
</head>
<body>
<h1>JavaScript Task 3</h1>
<p >This is my Traffic Light script</p>
<img id="change-light" src="red_traffic_light.png" width="150" height="300" align=middle>
<!-- <button onclick="setInterval(changelights, 1000)" >Start the timer</button> -->
<script>
var list = ["red_traffic_light.png", "red-amber-traffic-light.png","green_traffic_light.png", "amber-traffic-light.png"
];
var index = 0
function changelights() {
index = index + 1
if (index == list.length) index = 0;
var image = document.getElementById('change-light');
image.src=list[index];
}
</script>
</body>
</html>
Just put setInterval(changelights, 1000) inside your script tag.
when browser run that line of code. it will start the timer.
<script>
setInterval(changelights, 1000);
</script>
Call it when your document is ready:
With jQuery :
$( document ).ready(function() {
setInterval(changelights, 1000);
});
Pure javascript:
(function() {
setInterval(changelights, 1000);
})();
So i have some troubles getting to the right place when loading the page. I would like to when i open start.php to go to start.php#forside.
Right now i have something that works a little but its not the right way to do it and i would like something more stable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter">0</span>
<script type="text/javascript">
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML) <= 0) {
location.href = 'start.php#forside';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },75);
</script>
</body>
</html>
Would it be possible with some js?
EDIT:
i solved it with
<?php
header('Location: start.php#forside');
?>
What about this:
var timeLeft = 5;
var interval;
function timer() {
timeLeft--;
document.getElementById('counter').innerHTML = timeLeft;
if (timeLeft == 0) {
location.href = 'start.php#forside';
}
};
interval = setInterval(timer, 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ane Lagoni Jewelry</title>
</head>
<body>
<img class="loadBackground" src="img/baggrund.jpg" alt="" />
<span id="counter"></span>
</body>
</html>
If you want to go to #forside when the page loads, you could use scrollIntoView() instead of replacing location.href.
if (parseInt(i.innerHTML) <= 0) document.getElementById('forside').scrollIntoView()
Further documentation: MDN
I am trying to make a progress bar just for looks, but it doesn't work. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingdiv {position:relative;top:47%;left:43%;width:180px;height:55px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;}
#loadingbarprogress {position:relative;top:0px;left:0px;height:100%;width:0%;background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var progress = document.getElementById('loadingbarprogress');
loadingbar(progress, 500);
function doMove() {
progress.style.width = parseInt(progress.style.width) + 1 +'%';
if (progress.style.width = '100%') {
progress = null;
}
setTimeout(doMove,20);
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<div id="loadingbar">
<div id="loadingbarprogress">
</div>
</div>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
I have a div for the loader, a div for the progress, and some script containing a loop (that might not work), changing the width of the progress div.
Fixed code:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style>
#loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
#loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
#loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;border:none}
#loadingbar::-moz-progress-bar {background-color:#400040;}
#loadingtext {position:relative;top:13%;left:46%;}
</style>
<script>
var bar = document.getElementById('loadingbar');
for (int x = 0; x <= 100; x++) {
bar.value = x;
}
</script>
</head>
<body>
<div id="loader">
<h1 id="loadertitle">Site</h1>
<progress id="loadingbar" value="10" max="100"></progress>
<p id="loadingtext">Loading...</p>
</div>
</body>
</html>
Thanks, Cameron!
HTML5 now has a progress element.
You can get a lot of customisation in some browsers. See the link to css-tricks above, it goes into a fair amount of detail.
<progress max="100" value="80" id="progress_bar"></progress>
Then you can just update the value attribute using javascript, with whatever data source your progress comes from.
If you just want it to increase at a steady rate, use a simple setTimeout:
var progress_element = document.getElementById('progress_bar');
function stepProgress() {
progress_element.value += 1;
if(progress_element.value < 100) {
setTimeout(stepProgress, 100);
}
};
You may need to use parseInt on your progress_element.value, or just have a separate counter variable.
There is a problem in your code. So far I noticed this:
if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !
EDIT:
Try this then
if (progress.style.width == '100') {
I have a carousel that goes through the slides every 4 seconds if the user doesn't click on anything. However, the problem I am getting is that if, for example, the user clicks on a slide after 1 second, and then the next one after 2 seconds, the following slides don't appear 4 seconds later. The js code is below:
var arr = [];
arr[0]= new Image();
arr[0].src = "1.jpg";
arr[1]= new Image();
arr[1].src = "2.jpg";
arr[2]= new Image();
arr[2].src = "3.jpg";
titleArray = new Array();
titleArray[0] = "first";
titleArray[1] = "second";
titleArray[2] = "third";
var i=0;
function slide(){
document.getElementById("img1").src= arr[i].src;
document.getElementById("title").innerHTML = titleArray[i];
i++;
if(i==arr.length){
i=0;
}
setTimeout(function(){ slide(); },4000);
}
The html is:
<!doctype html>
<html lang="en">
<head>
<title>Carousel</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body onLoad="slide();">
<div class="image">
<img src="1.jpg" width="510" height="390" id="img1">
<a href="JavaScript:slide(this)">
<img src="carousel-label-box.png" id="img2" width="310" height="190">
</a>
<h1 id="title">first</h1>
</div>
<script src="script.js"></script>
</body>
</html>
You mean when the user clicks on the images the slide will change before the intended 4 seconds?
From what I see you should call clearTimeout() to interrupt it and then set it again when the user clicks on the images instead of simply calling slide.
EDIT: Forgot to mention you should still call slide() function when the user clicks it.