Problem with image 'rotations' within a div element
0
I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = ,
ImgName = ,
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>
javascript
asked Nov 16 '18 at 22:15
Pangit
115
add a comment |
0
I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = ,
ImgName = ,
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>
javascript
asked Nov 16 '18 at 22:15
Pangit
115
What are you trying to call on the last line withrotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same withrotation.advanceRotationwhen you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
– Jonny Rathbone
Nov 16 '18 at 22:23
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07
add a comment |
0
0
0
I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = ,
ImgName = ,
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>
javascript
asked Nov 16 '18 at 22:15
Pangit
115
I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = ,
ImgName = ,
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>
javascript
javascript
asked Nov 16 '18 at 22:15
Pangit
115
asked Nov 16 '18 at 22:15
Pangit
115
asked Nov 16 '18 at 22:15
Pangit
115
asked Nov 16 '18 at 22:15
Pangit
115
asked Nov 16 '18 at 22:15
Pangit
115
115
What are you trying to call on the last line withrotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same withrotation.advanceRotationwhen you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
– Jonny Rathbone
Nov 16 '18 at 22:23
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07
add a comment |
What are you trying to call on the last line withrotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same withrotation.advanceRotationwhen you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?
– Jonny Rathbone
Nov 16 '18 at 22:23
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07
What are you trying to call on the last line with
rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?– Jonny Rathbone
Nov 16 '18 at 22:23
What are you trying to call on the last line with
rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same with rotation.advanceRotation when you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?– Jonny Rathbone
Nov 16 '18 at 22:23
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07
add a comment |
1 Answer
1
active
oldest
votes
0
One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>answered Nov 16 '18 at 22:43
Will
1,79411111
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346141%2fproblem-with-image-rotations-within-a-div-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>answered Nov 16 '18 at 22:43
Will
1,79411111
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
add a comment |
0
One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>answered Nov 16 '18 at 22:43
Will
1,79411111
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
add a comment |
0
0
0
One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>answered Nov 16 '18 at 22:43
Will
1,79411111
One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>answered Nov 16 '18 at 22:43
Will
1,79411111
answered Nov 16 '18 at 22:43
Will
1,79411111
answered Nov 16 '18 at 22:43
Will
1,79411111
answered Nov 16 '18 at 22:43
Will
1,79411111
1,79411111
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
add a comment |
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
Hi, thanks for the code. I tried it out because I thought it was an elegant and short solution. However for some reason I'm not seeing my images at all...only the 'div' container for <div images>
– Pangit
Nov 17 '18 at 18:10
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<style> #images { height: 256px; width: 100%; padding: 0px; background-color: powderblue; border-style: solid; border-width: 5px; border-radius: 25px; } .img { display: inline-block; width: 256px; height: 256px; } </style>
– Pangit
Nov 17 '18 at 18:15
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
<div class="w3-quarter"> <div id="images"> <p> <class="img" img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' /> <class="img" img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' /> <class="img" img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' /> </p> </div> </div>
– Pangit
Nov 17 '18 at 18:16
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
Javascript exactly the same as you had supplied...
– Pangit
Nov 17 '18 at 18:17
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346141%2fproblem-with-image-rotations-within-a-div-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What are you trying to call on the last line with
rotation.setupRotation()? Such a thing doesn't exist in the code you posted. Same withrotation.advanceRotationwhen you set the interval. The two functions you create with those names only exist within the scope of the function. Seems like you might have better luck housing them separately and passing them the arguments they need. EDIT - it doesn't even look like you're calling the rotation function you've defined?– Jonny Rathbone
Nov 16 '18 at 22:23
I'm also not convinced you can call toString like that within the url function, but someone might be able to correct me there. But I imagine it would be safer to determine that string first, then pass it in as part of a string literal.
– Jonny Rathbone
Nov 16 '18 at 22:26
Hello, thank you for the reply. I did not write the Javascript code...it was a contribution from another member. It works perfectly fine, it only became non-functional when I attempted to add the images as 'backgrounds' within the 'div' element.
– Pangit
Nov 17 '18 at 18:06
Yea I wasn't sure about that myself...calling 'toStrin' within the URL function...
– Pangit
Nov 17 '18 at 18:07