i am trying to turn the background image of a div into a slideshow but obviously do not know how to, any help would be appreciated.
HTML:
<div class = 'Header'>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
</div>
CSS:
.Header {
background-image: url(../IMG/Header.png);
background-size: cover;
width: 100%;
height: 720px;
text-align: center;
}
.Header h3 {
padding-top: 200px;
color: #ffffff;
font-size: 50pt;
font-style: italic;
margin-bottom: 50px;
}
Here's an example of a slideshow using the <img> HTML tag, instead of linking the image through CSS. This will require you to put an <img> tag in your .header <div> and link that tag to the first image in your slideshow img1.jpg
HTML:
<html>
<head>
<script src="slideshow.js" type="text/javascript"></script>
<script>
window.onload = auto;
</script>
</head>
<body>
<h3>One of the UK's best <br> <span class = 'green'>paintball</span> destinations</h3>
<input type = 'button' class = 'Book_Here' value = 'Book Here'>
<img class=".header" src="../IMG/Header.png" name="header">
</body>
</html>
CSS:
.book_here, h3 {
position: absolute;
}
JavaScript:
// Change Slide in Slideshow
var Image_Number = 0;
function change_image (num) {
var image = ["../IMG/Header.png", "../IMG/img2.png", "../IMG/img3.png"];
var Image_Length = image.length - 1;
console.log(Image_Length);
Image_Number = Image_Number + num;
console.log(Image_Number);
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.header.src=image[Image_Number];
return false;
}
// Change Slide Automatically - Interval Function
function auto () {
setInterval(function(){
change_image(1);
}, 3000);
}
Related
The program I am creating is a meme generator. I have a div container set up with display:grid with a few tags inside of that which act as the top and bottom text for the meme. I'm trying to dynamically set the background image for the grid cell using plain vanilla JS. When I attach the link inside the CSS file it works perfectly, but using JS the background-image is never set when i check inside the browser. I put a big arrow so you can see where I am attempting to set the image
const imageLink = document.querySelector('#imageLink');
const topText = document.querySelector('#topText');
const bottomText = document.querySelector('#bottomText');
const memeDiv = document.querySelector('#meme');
//listener for submit
document.addEventListener("submit", function(e) {
e.preventDefault();
//if the user doesn't enter an image, or if they don't enter any text, don't generate the meme when they submit.
if (imageLink.value === "") {
return;
} else if (topText === "" && bottomText === "") {
return;
}
console.log(imageLink.value);
//create elements
var div = document.createElement("div");
//set attribute for div containing our memes
div.setAttribute("id", "meme");
//When the page loads apply the users photo to the background of the grid
window.addEventListener('DOMContentLoaded', function() {
memeDiv.style.backgroundImage = `url(${imageLink.value})`; // < -- -- -
});
//create text and remove button for the memes
const top = document.createElement("p"); //for top text
const bottom = document.createElement("p"); //for bottom text
const removeBtn = document.createElement("input");
//remove button attributes
removeBtn.setAttribute("id", "remove");
removeBtn.setAttribute("type", "image");
removeBtn.setAttribute("height", "200px");
removeBtn.setAttribute("width", "200px");
removeBtn.setAttribute(
"src",
"https://www.freeiconspng.com/uploads/x-png-33.png"
);
//set attributes for text
top.setAttribute("id", "top");
top.innerText = topText.value;
bottom.setAttribute("id", "bottom");
bottom.innerText = bottomText.value;
//put the top and bottom text with the remove button together with the same div
div.appendChild(top);
div.appendChild(bottom);
div.appendChild(removeBtn);
//append to the div
document.querySelector("#memeContainer").appendChild(div);
//reset
imageLink.value = "";
topText.value = "";
bottomText.value = "";
})
document.addEventListener("click", function(e) {
if (e.target.id === "remove") {
e.target.parentElement.remove();
} else {
return;
}
})
* {
margin: 0px;
}
#formContainer {
background-color: blue;
margin-bottom: 5px;
text-align: center;
}
h1 {
text-align: center;
background-color: blue;
margin: 0px;
}
#memeContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
grid-gap: 5px;
}
#top,
#bottom,
#remove {
position: relative;
display: inline;
}
#top {
left: 225px;
z-index: 1;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#bottom {
top: 300px;
left: 225px;
z-index: 2;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#remove {
top: -150px;
left: 180px;
z-index: 3;
/* filter: opacity(1%); */
}
#remove:hover {
z-index: 3;
filter: opacity(25%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>MEME GENERATOR</h1>
<div id="formContainer">
<form>
<input id="imageLink" type="text" placeholder="please link to an image">
<input id="topText" type="text" placeholder="TOP TEXT">
<input id="bottomText" type="text" placeholder="BOTTOM TEXT">
<button type="submit">submit</button>
</form>
</div>
<div id="memeContainer"></div>
<script src="app.js"></script>
</body>
</html>
The DOMContentLoaded event is only called once whenever all HTML have been loaded. So you are only adding an event listener which never fires and thus nothing happens.
window.addEventListener('DOMContentLoaded', function() {
memeDiv.style.backgroundImage = `url(${imageLink.value})`;
});
Remove the event listener and correct the memeDiv variable name to div and your code will run.
div.style.backgroundImage = `url(${imageLink.value})`;
const imageLink = document.querySelector('#imageLink');
const topText = document.querySelector('#topText');
const bottomText = document.querySelector('#bottomText');
const memeDiv = document.querySelector('#meme');
//listener for submit
document.addEventListener("submit", function(e) {
e.preventDefault();
//if the user doesn't enter an image, or if they don't enter any text, don't generate the meme when they submit.
if (imageLink.value === "") {
return;
} else if (topText.value === "" && bottomText.value === "") {
return;
}
console.log(imageLink.value);
//create elements
var div = document.createElement("div");
//set attribute for div containing our memes
div.setAttribute("id", "meme");
//When the page loads apply the users photo to the background of the grid
div.style.backgroundImage = `url(${imageLink.value})`; // < -- -- -
//create text and remove button for the memes
const top = document.createElement("p"); //for top text
const bottom = document.createElement("p"); //for bottom text
const removeBtn = document.createElement("input");
//remove button attributes
removeBtn.setAttribute("id", "remove");
removeBtn.setAttribute("type", "image");
removeBtn.setAttribute("height", "200px");
removeBtn.setAttribute("width", "200px");
removeBtn.setAttribute(
"src",
"https://www.freeiconspng.com/uploads/x-png-33.png"
);
//set attributes for text
top.setAttribute("id", "top");
top.innerText = topText.value;
bottom.setAttribute("id", "bottom");
bottom.innerText = bottomText.value;
//put the top and bottom text with the remove button together with the same div
div.appendChild(top);
div.appendChild(bottom);
div.appendChild(removeBtn);
//append to the div
document.querySelector("#memeContainer").appendChild(div);
//reset
imageLink.value = "";
topText.value = "";
bottomText.value = "";
})
document.addEventListener("click", function(e) {
if (e.target.id === "remove") {
e.target.parentElement.remove();
} else {
return;
}
})
* {
margin: 0px;
}
#formContainer {
background-color: blue;
margin-bottom: 5px;
text-align: center;
}
h1 {
text-align: center;
background-color: blue;
margin: 0px;
}
#memeContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
grid-gap: 5px;
}
#top,
#bottom,
#remove {
position: relative;
display: inline;
}
#top {
left: 225px;
z-index: 1;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#bottom {
top: 300px;
left: 225px;
z-index: 2;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#remove {
top: -150px;
left: 180px;
z-index: 3;
/* filter: opacity(1%); */
}
#remove:hover {
z-index: 3;
filter: opacity(25%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>MEME GENERATOR</h1>
<div id="formContainer">
<form>
<input id="imageLink" type="text" placeholder="please link to an image">
<input id="topText" type="text" placeholder="TOP TEXT">
<input id="bottomText" type="text" placeholder="BOTTOM TEXT">
<button type="submit">submit</button>
</form>
</div>
<div id="memeContainer"></div>
<script src="app.js"></script>
</body>
</html>
I coded a simple slideshow with Javascript but it isn't working when I place it within my HTML page that I have created. So far I have tried to include it in different areas, different div's and from an external file. Nothing seems to be working. I have tested the code on blank HTML and it works. But when I use it within the page that I have put together, it wont load.
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "gotpic1.jpg";
images[1] = "gotpic2.jpg";
// Change Image
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat:no-repeat;
background-size: cover;
}
.gotlogo{
text-align: center;
}
.slider {
border: solid black 2p
}
.slider{
height: 300px;
width: 500px;
}
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo">
<img src="gotlogo2.png" alt="GOT">
</div>
<div class="slider">
<img name="slide" height="200" width="400">
</div>
<p>
<br>
</p>
</body>
Although there are a lot to of room for improvements, for now I'm giving you a working prototype of your version of code. Just added an id to the <img/> and how src is manipulated in changeImg()
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
<div class="slider">
<img name="slide" id="slide" height="200" width="400">
</div>
<p><br>
</p>
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";
// Change Image
function changeImg() {
document.getElementById("slide").src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1) {
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
</script>
<style>
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.gotlogo {
text-align: center;
}
.slider {
border: solid black 2px
}
.slider {
height: 300px;
width: 500px;
}
</style>
</body>
</html>
Having that said, let's see how you can improve your code. Please checkout the changeImg() function:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
<div class="slider">
<img name="slide" id="slide" height="200" width="400">
</div>
<p><br>
</p>
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
/*
For local images:
say you have a local folder structure like this:
GOT
|
--> index.html (this file)
|
--> Images
|
--> got1.jpg
|
--> got2.jpg
Now in you can can these images like:
images[0] = "Images/got1.jpg"
images[1] = "Images/got2.jpg"
Let's try another example folder structure:
GOT
|
--> Html
| |
| --> index.html (this file)
|
--> Images
|
--> got1.jpg
|
--> got2.jpg
Now in you can can these images like:
images[0] = "../Images/got1.jpg"
images[1] = "../Images/got2.jpg"
*/
images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";
// Change Image
function changeImg() {
document.getElementById("slide").src = images[i];
// Keep index under the size of images array
i = (i+1) % images.length;
}
// Run function when page loads
window.onload = function() {
// Run function every x seconds
setInterval(changeImg, time);
}
</script>
<style>
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
}
.gotlogo {
text-align: center;
}
.slider {
border: solid black 2px
}
.slider {
height: 300px;
width: 500px;
}
</style>
</body>
</html>
u are using old fashioned way u maybe be practicing i just changed a bitin code
i used getElementsByName() function to find element
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
images[1] = "https://www.w3schools.com/html/img_girl.jpg";
// Change Image
function changeImg(){
document.getElementsByName('slide')[0].src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-repeat:no-repeat;
background-size: cover;
}
.gotlogo{
text-align: center;
}
.slider {
border: solid black 2p
}
.slider{
height: 300px;
width: 500px;
}
<body style=" background-image: url("forest1.jpg");">
<div class="gotlogo">
<img src="gotlogo2.png" alt="GOT">
</div>
<div class="slider" name='w'>
<img name="slide" height="200" width="400">
</div>
<p>
<br>
</p>
</body>
I need to automate an array of traffic lights, so they go from red to red-amber to green then to amber all by itself, any help?
This is the code I have now
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
#box {
text-align: center;
font-size: 20px;
vertical-align: middle;
display: inline-block;
min-width: 100px;
min-height: 30px;
padding: 10px;
background-color: #FFF;
}
</style>
<body>
<img id="light" src="Traffic_Light_Red.png">
<button type="button" onclick="changeLights()">Click to Change The Light Sequence</button>
<script>
var list = [
"Traffic_Light_Red.png",
"Traffic Light Red And Yellow Only.png",
"Traffic Light Green Only.png",
"Traffic Light Yellow Only.png"
];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
}
</script>
}
</script>
</body>
</html>
Provided the list of image filenames translate to valid urls the code should work.
You have two broken tags before the closing </body> tag which you should removed:
}
</script>
But they should not be the cause of the images not appearing.
The following demonstrates the code:
var list = [
"Traffic_Light_Red.png",
"Traffic Light Red And Yellow Only.png",
"Traffic Light Green Only.png",
"Traffic Light Yellow Only.png"
];
var index = 0;
function changeLights() {
var image = document.getElementById('light');
var desc = document.getElementById('description');
index = index + 1;
if (index == list.length) {
index = 0;
}
image.src = list[index];
// for demo purposes
desc.innerHTML = image.src;
}
#light {
width: 25px;
height: 25px;
display: block;
margin: 25px;
background-color: #fee;
}
button {
padding: 15px;
}
#description {
width: 400px;
height: 50px;
margin: 10px;
}
<img id="light" src="Traffic_Light_Red.png">
<button type="button" onclick="changeLights()">Click to Change The Light Sequence</button>
<div id="description"></div>
Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.
On another question I asked if I could set the font-weight to bold on a text element when that text is selected. This has been completed much to the avail of #Eric ! But currently, when you click a text, you can happily click another one and both of the text will be bold.
How can I prevent more than one text element from being bold?
Here is my code on JSFiddle: http://jsfiddle.net/6XMzf/ or below:
CSS:
html,body {
margin: 0;
padding: 0
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
color: white;
}
.stretch {
width:100%;
height:100%;
}
.navigationPlaceholder {
width:100px;
height: 400px;
left: 100px;
top: 100px;
position: absolute;
}
#navigation {
background-color: #000000;
}
#navigationText ul {
font-family: "Yanone Kaffeesatz";
font-weight: 100;
text-align: left;
font-size: 25px;
color: #b2b2b2;
left: 25px;
top: 50px;
position: absolute;
line-height: 40px;
list-style-type: none;
}
.noSelect {
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit browsers */
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Max Kramer | iOS Developer</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = '400';
}, false);
}
</script>
</body>
</html>
If you don't have a selector engine handy like jQuery and really have to do this in plain Javascript, I would do it like this:
function addClass(elem, className) {
if (elem.className.indexOf(className) == -1) {
elem.className += " " + className;
}
}
function removeClass(elem, className) {
elem.className = elem.className.replace(new RegExp("\\s*" + className), "");
}
var lastSelected = null;
function initNavClickHandler() {
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
addClass(this, "selected");
if (lastSelected) {
removeClass(lastSelected, "selected");
}
lastSelected = this;
}, false);
}
}
initNavClickHandler();
Then, add a CSS rule that controls the selected look:
.selected {font-weight: 800;}
This is a lot more flexible for styling because you can add as many CSS rules as you want to the .selected class to change/modify it without ever touching your code.
You can see it work here: http://jsfiddle.net/jfriend00/rrxaQ/
If you can use things like jQuery then this is a much simpler problem. Let me show you the jQuery solution for both highlighting and unhighlighting.
$("#navigationText li").click( function() {
$("#navigationText li").css("fontWeight", "100");
$(this).css("fontWeight", "400");
});
Now you can achieve the same thing yourself without jQuery. You either need to create a global that holds the currently bolded item and remove the fontWeight or just remove the fontWeight from all items (brute force).
//untested with global to store currently selected
var nav = document.getElementById('navigationText');
var activeItem = null;
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
if (activeItem) {activeItem.style.fontWeight = '100'; }
this.style.fontWeight = '400';
activeItem = this;
}, false);
}
//sorry I don't feel like writing a brute force one for you!