I've created a row of blinking div elements with a time interval, ensuring that only one div blinks at any given moment.
To see it in action, please view the demo below:
var arr = $(".boxes");
var current = 0;
function bgChange() {
if (arr.length > 0) {
arr.removeClass("active");
arr.eq(current).addClass("active");
current = (current + 1) % arr.length;
}
}
setInterval(bgChange, 200);.active {
background-color: red;
}Test
The issue arises when the active class moves beyond the visible part of the page, making the active record not visible in the viewport. To address this, I would like to automatically scroll the page to show the active div element.
Alternatively, a paging system could be implemented where the active class is added to each div element sequentially. Once the active class reaches the last div visible on the page, the page should transition to the next one and continue the process.