How to Display Multiple List Tags as News Alternating in One Line Using setTimeout

In this article, we will introduce a method to display list (li) tag elements one by one, like news updates, using setTimeout, fadeOut, and fadeIn. By using this technique, you can effectively utilize limited space on your page and display multiple pieces of information at once. This method is especially useful when implementing a news ticker or announcement feature.

This article provides a step-by-step guide for those interested in web development, so even beginners with little programming experience can easily follow along.

Styling List Tags Using CSS

First, let’s explain the CSS settings necessary to switch list (li) tags one by one. The following code defines the basic styles applied to list tags. Here, we introduce the CSS for the basic layout and appearance of the list tags.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#idNews{
	border:solid 1px #CCCCCC;
	width:370px;
	margin:0 auto;
	text-align:left;
}
#idNews ul {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
#idNews li {
	list-style-position:inside;
	list-style-type:none;
}
#idNews li a{
	text-decoration:underline;
	color:#333333;
}
#idNews li a:hover{
	text-decoration:underline;
	color:#666666;
}
-->
</style>

Detailed Style Explanation

• body tag sets the page’s overall margin and padding to zero, making the page fit snugly against the browser edges.
• h1 tag sets the font size, line height, and alignment of the heading, displaying it centered.
• #idWrap is the overall wrapper element, and the width and margins are adjusted to center it on the page.
• #idNews sets the width and border of the list container, making the news ticker stand out on the page.
• #idNews ul sets a fixed height for the entire list and uses overflow: hidden to cut off any overflowing content.
• #idNews li customizes the list item’s style, adjusting the position and display of each list item.

With these CSS settings, the basic appearance of the news ticker is complete.

Switching List Items Animation Using jQuery

Next, we will explain how to switch list items one by one using JavaScript and jQuery. You need to load the jquery.min.js file.
In this approach, we use setTimeout to switch the display of the list at regular intervals, along with fadeOut and fadeIn to create a smooth animation effect.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	function fncnews() {
		setTimeout(function() {
			fncnews();
			$("#idNews li").not(':first').css('display', 'none');
			$("#idNews li:first").fadeOut('normal', function() {
				$(this).next().fadeIn('normal');
				$(this).clone().appendTo("#idNews ul");
				$(this).remove();
			});
		}, 2000);
	}
	var n_size = $("#idNews li").size();
	if(n_size > 1) {
		fncnews();
	}
});
</script>

Script Explanation

• $(function() { … }); defines a script that runs after the page is loaded.
• fncnews() function handles the list switching process. This function first hides all but the next list item.
• Then, it fades out the currently displayed list item and fades in the next one. This process is repeated, causing the list to switch automatically.
• setTimeout() re-executes fncnews() at intervals (in this case, every 2000 milliseconds) to continue switching the list.
• n_size variable stores the number of list items, and the animation is executed only if there are more than two items.

Using this script, you can easily achieve a news ticker-like list switching animation.

HTML Setup

Finally, let’s explain the HTML setup for configuring the list items. This HTML structure is the foundation for creating a list that dynamically switches with CSS and JavaScript.

<div id="idWrap">

    <h1>Displaying list (li tag) information one line at a time</h1>

    <div id="idNews">
    <ul class="xoxo categories">
    	<li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">CSS</a></li>
    	<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>
    	<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>
    	<li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li>
    </ul>
    </div><!--/idNews-->
    
</div><!--/idWrap-->

HTML Details

• #idWrap is the container for the entire element, and it is centered on the page.
• h1 tag functions as the title of the news ticker, briefly explaining the content displayed to the user.
• #idNews is the area where the news ticker content is displayed, using the ul tag to show the news items in list format.
• li tags define each news item, with links set for each item to indicate that each item is clickable.

By combining this HTML code with CSS and JavaScript, the news ticker functionality is completed.

Demo Page for Switching li Tag Information One Line at a Time

Demo page for switching li tag information one line at a time

Conclusion

In this article, we explained how to implement a news ticker that switches list tags one by one on a web page using CSS and JavaScript. This allows you to effectively use limited space and communicate important information efficiently to users.

This technique is particularly useful for news sites, blogs, and corporate homepages, where visual appeal is important. Use this article as a reference to incorporate this feature into your own website, and not only deepen your understanding of the technology, but also create a more engaging site for visitors.

※ Use at your own risk. Please do not copy the Google Analytics tag from the demo page’s head tag.