I tried to adapt some code I found on youtube and ran into some trouble. I can switch through images fine, but I can't seem to adapt the code to transition through background images.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link type="text/css" rel="stylesheet" href="slideshow.css"/>
</head>
<body>
<script src="slideshow.js"></script>
</body>
</html>
and
html {
min-height:100%;
}
body {
background-image:url("Summer.jpg");
background-repeat:no-repeat;
background-size:cover;
}
and
//JavaScript Document
var myImage=document.body.style.backgroundImage;
var imageArray=["Summer.jpg", "Autumn.jpg", "Winter.jpg"];
var imageIndex=0;
function changeImage () {
document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);
imageIndex++;
if (imageIndex>=imageArray.length) {
imageIndex=0;
}
}
var intervalHandle = setInterval(changeImage,2000);
I am a complete novice here so if I am missing something obvious, please point me in the right direction to read up on it. Thanks.
Instead of
document.body.style.backgroundImage=myImage;
myImage.setAttribute("url", imageArray [ imageIndex]);
do
document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
All you need to do is set the backgroundImage property of the body's style to the appropriate "url(...)" syntax. Replace your changeImage function with this one:
function changeImage () {
document.body.style.backgroundImage = "url(" + imageArray[imageIndex] + ")";
imageIndex++;
if (imageIndex>=imageArray.length) {
imageIndex=0;
}
}
What you were doing with myImage.setAttribute wouldn't work because myImage isn't a DOM element and doesn't have a setAttribute method.
Related
var image = document.getElementById("image");
function hide(el){
el.hidden = true;
}
image.onclick = hide(image);
I've gone over this part countless times, but I'm not smart enough to see why it isn't working. Thanks for the help lads.
THE HTML:
<!DOCTYPE html>
<html>
<head>
<title>Chore Door!</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image></div>
<script src="script.js"></script>
</body>
</html>
Your function is called and executed on page load. Call the function inside of an anonymous function.
Please Note: You do not have any element with id=image.
var image = document.getElementById("image");
function hide(el){
el.hidden = true;
}
image.onclick = function(){ hide(image) };
<div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>
Probably the following demo will help you to clear your doubts:
var image = document.getElementById("image");
function hide(){
image.hidden = true;
}
image.onclick = hide; // notice there is no () after the function name, here the function will not be executed on page load
<div id="image"><img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" id="image"></div>
document.getElementById("image").addEventListener('click', function() {
this.hidden = true;
}
As i look at your HTML, there is no image with the id of "image" So no element will be returned on the document.getElementById("image") call.
You might want to use getElementsByTagName("image") instead but note that this is an array of elements.
Getting an error saying too much recursion. The actually has to move the image. Its giving the same error even if I am trying to clear the timeout.
Note: I found out that the_image.style.left is not moving the image whatsoever.
<!DOCTYPE HTML>
<html>
<head>
<style>
.image_style{left:x}
</style>
<script>
var the_timer, x_position = 0, my_image;
function move_image(){
my_image = document.getElementById("imag");
x_position = x_position+1;
my_image.style.left = x_position;
the_timer = setTimeout(move_image(), 200);
}
</script>
</head>
<body onclick="move_image()">
<img src = "desert.jpg" id = "imag"
style="position:obsolute; width:300px; height:400px; left:0">
<script>
my_image = document.getElementById("imag");
alert(my_image.style.left);
</script>
</body>
</html>
You need to call setInterval instead of setTimeOut. Right now you are calling function within function which is a never ending process that's why you are getting error.
Also left property needs value in px while you are assigning only a number which will not move the image.
setInterval(function () { move_image() }, '1000');
function move_image() {
my_image = document.getElementById("imag");
x_position = x_position + 1;
my_image.style.left = x_position + "px";
console.log(x_position);
}
some issue with google chrome, center image must be on top, but they don't.
Please try following code to repeat this issue:
<!DOCTYPE html>
<html>
<head>
<script>
function big_image(myelem) {
myelem.style.webkitTransform = 'scale(2.0)';
myelem.style.zIndex = '99';
}
function orig_image(myelem) {
myelem.style.webkitTransform = 'scale(1.0)';
myelem.style.zIndex = 'auto';
}
</script>
</head>
<body>
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
<img src="http://www.pewforum.org/files/2015/10/PF_15.10.05_PostPapal_promo260x260.jpg" onmouseover="big_image(this);" onmouseout="orig_image(this);">
</body>
</html>
How to fix / overcome it?
Thanks.
There is a bug to do with z-index and transform properties.
The best way to avoid it, will be to reset transform property onmouseout:
function big_image(myelem) {
myelem.style.webkitTransform = 'scale(2.0)';
myelem.style.zIndex = '2';
}
function orig_image(myelem) {
myelem.style.webkitTransform = 'none';
myelem.style.zIndex = '1';
}
Tested and works as expected on Chrome/Opera.
I am trying to get the background image of a div to change at an interval. I created an Array with the images, and every few seconds the function should check the value of "x" against the array length. If X is less, x will increase by one and the background image will change to the next image in the array, otherwise it will set x=0 and restart the process.
The div and initial image shows up how I want, but nothing happens.
I know there are probably better ways to do this, but I am very new to Javascript and want to learn why this code doesn't work. Thanks in advance for the help!!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ImageChanger</title>
<style type="text/css">
#imagediv {
float:left;
border-style:ridge;
border-width:8px;
border-color:Green;
border-radius:15px;
width:1250px;
height:450px;
background-image:url(images/landscape1.jpg)
}
</style>
<script type="text/javascript">
function displayNextImage() {
var x;
If (x<imageArray.length) {
x=x+1;
document.getElementById("imagediv").style.backgroundImage=images[x];
}
else {
x=0;
document.getElementById("imagediv").style.backgroundImage=images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var imageArray=new Array();
images[0] = "images/landscape1.jpg";
images[1] = "images/landscape2.jpg";
images[2] = "images/landscape3.jpg";
images[3] = "images/landscape4.jpg";
</script>
</head>
<body>
<div id="imagediv">
</div>
</body>
</html>
If (x<imageArray.length) {..
should be
if (x<imageArray.length) {
Javascript is case-sensitive.
Also you have some missing braces like you are not closing
function displayNextImage() { ....
Use your browser console to debug. These syntax errors will be shown there.
As far as syntax issues go:
As #Zee stated, If should be lowercase (if)
Also, as #Zee and some others stated, you are not closing function displayNextImage() { with a closing brace }.
You are improperly defining the background-image property in your function, whereas you defined it correctly in the block of CSS. You must wrap the image name with url().
You are never calling your timeout function, startTimer.
You create a new array imageArray but then use an undeclared array images
I am struggling with the following problem.
I have made a memorygame with javascrpt for school.It all works fine, but my teacher told me that i can not have on line of javascript in my HTML, like this :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Memory spelen</title>
</head>
<body>
<script type="text/javascript" src="javascript.js"></script>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html>
The newBoard() is applied to the memory_board div. How can i take this little piece of script out of my HTML file and place it in my js file, to still function properly.
Thanks in advance
Inside of your javascript.js put this
window.onload = function {
// content of your script
var newBoard = function(){
// the new updated newBoard() function from below
}
// other parts of your script
if(window.location.href == 'your-url') {
// now, after the newBoard() has been updated
// the next to lines are not needed
// var board = document.getElementById('memory_board');
// board.innerHTML = newBoard();
// just call the function
newBoard();
}
};
UPDATE
I just took a look at your old fiddle and I changed your newBoard function to this
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
var div = document.createElement('DIV');
div.id = "tile_" + i;
(function(div,i){
div.onclick = function() {
memoryFlipTile(this, memory_array[i]);
};
}(div,i));
document.getElementById('memory_board').appendChild(div);
}
}
Check the working fiddle.
try to put it like this in external js file
$(document).ready(function(){
newBoard();
});
It looks that you need to call newBoard() method on onload event of memory_board div , You can do this in following ways:
<div id="memory_board" onload="javascript:newBoard()" ></div> // use onload event of memory_board
you can use onload function on the javascript. It will call the function when all the HTML tag is loaded on the screen.