I am working on a simple slideshow. I am using Javascript for the process of the slideshow and CSS for display of it. For some reason the CSS shows the first image perfectly but the JavaScript function is not engaging with the CSS to change the images. Suggestions?
Here is my code:
<body>
<style scoped id="slider">
html{
background: url('Africa Twin Mountainside.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
</style>
<script type="text/javascript">
var images = [
"Africa Twin Mountainside.jpg",
"FZ-10.jpg",
"GSXR track.jpg",
"Pioneer 1k mountain.jpg",
"Raptor sand.jpg"
];
var step = 0;
function slideit(){
var imageUrl = images[step];
document.getElementById('slider').src = background;
step++;
if(step>=images.length)
step=0;
setTimeout("slideit()", 1000);
}
slideit();
</script>
</body>
This is going to be somewhat long, but hopefully this will point you in the right direction to rework your solution properly.
I'll start with this: <style scoped id="slider">
Firstly, the scoped attribute for <style> tags are currently only supported by Firefox, so I would avoid it altogether for the time being. The purpose of the scoped attribute is to constrain the style to the enclosing element, but you can easily do the same thing with the class attribute instead.
Since this is a simple, single-page idea you're implementing, it's perfectly acceptable to use <style> tags directly in your html document, but in general, it's better to create a separate css stylesheet and attach it to your page with a <link> tag. If you do include styles in the html document, it would typically be found inside the <head> tag.
Additionally, I don't think I've ever seen someone declare styles for the html tag; from my experience that's typically used for the body tag instead, but perhaps someone more knowledgable that I can comment on that.
Lastly, you've given this style tag an id, however I can think of no practical use for this, and when you try to manipulate it in your javascript with document.getElementById('slider').src = background;, you're selecting this <style> block - which doesn't have a src attribute, so that piece of code does nothing at all.
What you really want to use here is an <img> tag, which does have a src attribute that can be manipulated - you were on the right track here, but used the wrong tools. I would ditch the <style> element you have here altogether and just use an <img> like so:
<img id="slider" src="Africa Twin Mountainside.jpg">
You can then style this in css:
#slider {
width: 100%;
height: auto;
margin: auto;
}
This will scale up your image to take up the entire width of the browser; the size can be adjusted to your preference. It will also center your image in the browser if you choose a width < 100%.
Now we can look at your script. Peter Chon's answer is a well-written, working solution that will work when combined with the <img> tag that I've written above, and is essentially the same thing I would have written. You almost had the script part right, and if you compare what's written in Peter's answer to yours you can see that you were nearly on the mark. He would probably be willing to explain further if you have questions.
You had the methodology for how to implement your slideshow (mostly) correct, but the execution didn't work because you didn't understand what tools to use to get the job done. W3Schools get's a bad rap around these parts, but it's not a bad place to start if you're looking to learn about the basics without investing in a book, and if you read through their tutorials you can get at least a basic understanding of how tags and their attributes can be used to accomplish things.
If I had book references I'd provide them, but I don't. One that I considered getting was "HTML and CSS: Design and Build Websites" by John Duckett. It's got good reviews on Amazon, but I haven't read it personally.