JavaScript setInterval: Changing the active div based on the given period of time
I have 6 images shown below. The first div contains 4 images and the remaining 2 images are placed to the 2nd div. Using my pagination in a form of a bullet. What I`m trying to achieve is to automatically change the active div every 3secs. The only thing that comes to my mind is to use setInterval.
Here's the JavaScript Code
function showFrameIndex(index) {
var frames = document.getElementsByClassName('gall-frame');
var badges = document.getElementsByClassName('badge-item');
var i;
for (i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
frames[index].style.display = 'flex';
for (i = 0; i < badges.length; i++) {
badges[i].className = 'badge-item badge-item-inactive';
}
badges[index].className = 'badge-item';
}
var displayIndexFrame = 0;
showFrameIndex(displayIndexFrame);
Here's the current output
1st div
2nd div
javascript
asked Nov 10 at 19:45
Rae Ian
11510
|
show 1 more comment
I have 6 images shown below. The first div contains 4 images and the remaining 2 images are placed to the 2nd div. Using my pagination in a form of a bullet. What I`m trying to achieve is to automatically change the active div every 3secs. The only thing that comes to my mind is to use setInterval.
Here's the JavaScript Code
function showFrameIndex(index) {
var frames = document.getElementsByClassName('gall-frame');
var badges = document.getElementsByClassName('badge-item');
var i;
for (i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
frames[index].style.display = 'flex';
for (i = 0; i < badges.length; i++) {
badges[i].className = 'badge-item badge-item-inactive';
}
badges[index].className = 'badge-item';
}
var displayIndexFrame = 0;
showFrameIndex(displayIndexFrame);
Here's the current output
1st div
2nd div
javascript
asked Nov 10 at 19:45
Rae Ian
11510
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you saychange the active divdoes that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?
– Zohir Salak
Nov 10 at 20:25
|
show 1 more comment
I have 6 images shown below. The first div contains 4 images and the remaining 2 images are placed to the 2nd div. Using my pagination in a form of a bullet. What I`m trying to achieve is to automatically change the active div every 3secs. The only thing that comes to my mind is to use setInterval.
Here's the JavaScript Code
function showFrameIndex(index) {
var frames = document.getElementsByClassName('gall-frame');
var badges = document.getElementsByClassName('badge-item');
var i;
for (i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
frames[index].style.display = 'flex';
for (i = 0; i < badges.length; i++) {
badges[i].className = 'badge-item badge-item-inactive';
}
badges[index].className = 'badge-item';
}
var displayIndexFrame = 0;
showFrameIndex(displayIndexFrame);
Here's the current output
1st div
2nd div
javascript
asked Nov 10 at 19:45
Rae Ian
11510
I have 6 images shown below. The first div contains 4 images and the remaining 2 images are placed to the 2nd div. Using my pagination in a form of a bullet. What I`m trying to achieve is to automatically change the active div every 3secs. The only thing that comes to my mind is to use setInterval.
Here's the JavaScript Code
function showFrameIndex(index) {
var frames = document.getElementsByClassName('gall-frame');
var badges = document.getElementsByClassName('badge-item');
var i;
for (i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
frames[index].style.display = 'flex';
for (i = 0; i < badges.length; i++) {
badges[i].className = 'badge-item badge-item-inactive';
}
badges[index].className = 'badge-item';
}
var displayIndexFrame = 0;
showFrameIndex(displayIndexFrame);
Here's the current output
1st div
2nd div
javascript
javascript
asked Nov 10 at 19:45
Rae Ian
11510
asked Nov 10 at 19:45
Rae Ian
11510
asked Nov 10 at 19:45
Rae Ian
11510
asked Nov 10 at 19:45
Rae Ian
11510
asked Nov 10 at 19:45
Rae Ian
11510
11510
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you saychange the active divdoes that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?
– Zohir Salak
Nov 10 at 20:25
|
show 1 more comment
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you saychange the active divdoes that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?
– Zohir Salak
Nov 10 at 20:25
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you say
change the active div does that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?– Zohir Salak
Nov 10 at 20:25
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you say
change the active div does that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?– Zohir Salak
Nov 10 at 20:25
|
show 1 more comment
1 Answer
1
active
oldest
votes
Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout
let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>answered Nov 11 at 10:15
Zohir Salak
2,5031414
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
});
}
});
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%2f53242764%2fjavascript-setinterval-changing-the-active-div-based-on-the-given-period-of-tim%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
Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout
let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>answered Nov 11 at 10:15
Zohir Salak
2,5031414
add a comment |
Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout
let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>answered Nov 11 at 10:15
Zohir Salak
2,5031414
add a comment |
Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout
let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>answered Nov 11 at 10:15
Zohir Salak
2,5031414
Here's a simple example of how you can hide something and show the other, i'm sure there's better ways, now inside the callback of setInterval you'll
have to add the code to change the bullets you have, Also if you only want this to happen once, change setInterval to setTimeout
let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
d1.classList.toggle('hide');
d2.classList.toggle('hide');
}, timeinSec * 1000);.d1,
.d2 {
width: 100px;
height: 100px;
background: dodgerblue;
}
.d2 {
background: orange;
}
.hide {
display: none;
}<div class="d1 hide"></div>
<div class="d2"></div>answered Nov 11 at 10:15
Zohir Salak
2,5031414
answered Nov 11 at 10:15
Zohir Salak
2,5031414
answered Nov 11 at 10:15
Zohir Salak
2,5031414
answered Nov 11 at 10:15
Zohir Salak
2,5031414
2,5031414
add a comment |
add a comment |
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.
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%2f53242764%2fjavascript-setinterval-changing-the-active-div-based-on-the-given-period-of-tim%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
You just want to change the div periodically? SetInterval is the correct function to do that.
– user875234
Nov 10 at 19:49
Alternative is using setTimeout() inside your function which calls same function. Did you even try setInterval?
– charlietfl
Nov 10 at 19:50
Yes. I want to change the div periodically maybe 3secs
– Rae Ian
Nov 10 at 19:50
var i = -1; setInterval(function() { i++; i = i < divCount ? i : 0; hideAllDivs(); showDiv(i); }, time);
– user875234
Nov 10 at 19:51
Is the divs one below the other as in the picture or next to each other ? Are both divs visible at all times ? when you say
change the active divdoes that mean hide one and show the other ? or put one above the other ? or scroll to the next one ?– Zohir Salak
Nov 10 at 20:25