Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

Question

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website.

The main text in the center needs to change every 60 seconds.

I have over 150 individual lines of text that I want to cycle through on the page.

What would be the most efficient way to load all these text lines?

Should I load them one by one or from another file?

I just want to find the best way to handle loading the text smoothly.

var divs = $('div[id^="content-"]').hide(),
  i = 0;

(function cycle() {

  divs.eq(i).fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % divs.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-1">text 1</div>
<div id="content-2">text 2</div>
<div id="content-3">text 3</div>
<div id="content-4">text 4</div>
<div id="content-5">text 5</div>
<div id="content-6">text 6</div>
<div id="content-7">text 7</div>
......
<div id="content-180">text 180</div>

javascript css ajax html

Answer 1

Answer №1

A single text element can be used to cycle its content on a 1-second interval. The code includes a modulus operator to ensure the array cycles properly.

To stop the cycling, the code allows for setting the function as a variable and using clearInterval(variable).

While the fade animation is not included in the code provided, it can easily be incorporated.

var content = ['This is text content 1',' This is another text  content', 'I am also a text content']; 
let contentLength = content.length;
let count=0;

function contentDisplay (){
   document.querySelector('#content').innerText = content[count % contentLength];
  count++;
}

// sets the initial display
contentDisplay();

// sets the interval to change the display
setInterval(contentDisplay, 1000);

#content {
  text-align: center;
  padding: 15px;
  font-size: 20px
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="content">text 1</p>

Answer 2

A single text element can be used to cycle its content on a 1-second interval. The code includes a modulus operator to ensure the array cycles properly.

To stop the cycling, the code allows for setting the function as a variable and using clearInterval(variable).

While the fade animation is not included in the code provided, it can easily be incorporated.

var content = ['This is text content 1',' This is another text  content', 'I am also a text content']; 
let contentLength = content.length;
let count=0;

function contentDisplay (){
   document.querySelector('#content').innerText = content[count % contentLength];
  count++;
}

// sets the initial display
contentDisplay();

// sets the interval to change the display
setInterval(contentDisplay, 1000);

#content {
  text-align: center;
  padding: 15px;
  font-size: 20px
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="content">text 1</p>

Answer 3

Answer №2

async/await is a great programming pattern.

var arr = ["apple", "orange", "banana"];

function twoSeconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2020);
    });
}
async function displayFruits(arr) {
    console.log("Beginning to display fruits");
    for (var i = 0; i < arr.length; i++) {
        await twoSeconds();
        console.log(arr[i]);
    }
    console.log("All fruits displayed.");
}
displayFruits(arr);

Answer 4

async/await is a great programming pattern.

var arr = ["apple", "orange", "banana"];

function twoSeconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2020);
    });
}
async function displayFruits(arr) {
    console.log("Beginning to display fruits");
    for (var i = 0; i < arr.length; i++) {
        await twoSeconds();
        console.log(arr[i]);
    }
    console.log("All fruits displayed.");
}
displayFruits(arr);

Answer 5

Answer №3

It's surprising how little 150 lines of text is for today's browsers, even on tiny mobile screens. One neat trick is to store the text in javascript and repeatedly populate a single div with it, rather than cluttering up the DOM with multiple divs.

var lines = [
    "Text line 1",
    "Text line 2",
    "etc"
];

var div = $('div[id="content"]');
var i = 0;

(function cycle() {

  div
    .text(lines[i])
    .fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % lines.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

Answer 6

It's surprising how little 150 lines of text is for today's browsers, even on tiny mobile screens. One neat trick is to store the text in javascript and repeatedly populate a single div with it, rather than cluttering up the DOM with multiple divs.

var lines = [
    "Text line 1",
    "Text line 2",
    "etc"
];

var div = $('div[id="content"]');
var i = 0;

(function cycle() {

  div
    .text(lines[i])
    .fadeIn(2000)
    .delay(60000) // 1000 is 1 second
    .fadeOut(2000, cycle);

  i = ++i % lines.length;

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

Answer №1

Answer №2

Answer №3

Similar questions

Implementing three identical dropdown menus using jQuery and HTML on a single webpage

Issue with JQuery mobile: dynamically inserted popup fails to appear

Is the contenteditable feature working properly when updating PHP, SQL, and AJAX in the network?

Unable to load the threejs module

jQuery: use the "data-target" attribute to toggle the display of a single content area

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

Avoid altering the Vuex store state directly without using mutation handlers in VueJS

The Oracle Apex Login Interface with a Touch of Customized Styling

Traversing a JavaScript class within a for loop

What is the best way to customize multiple checkboxes in React Native?

Leveraging a VueJS prop as a variable in an array mapping operation

Styling on Material UI Button disappears upon refreshing the page

Ensuring the Selection with jQuery

Javascript Flickering Effect in HTML5

The validation for Australian mobile numbers should include the option to have spaces between the digits

What is the best way to adjust the color of the colon within my timer digits using a span element?

Encountering unexpected fetch requests to JSON files when using getStaticProps/getStaticPaths

How can an object inside an array be destructured in just one line?

Learn the technique of swapping out a portion of a string with a value from an input field in real-time

Is it acceptable to compare a boolean with a string?