JavaScript Information Ticker – Phppot

This text supplies a light-weight JavaScript plugin to show information tickers on a web site. The information ticker is a manner of exhibiting content material in marquee mode both in horizontal or vertical scroll. It’s helpful to show content material like the most recent updates and upcoming occasions.

It saves the location house actual property by occupying much less portion of the display screen. It additionally reduces the person effort of scrolling to see extra content material by maintaining on ticking the content material show.

In a manner it’s an older factor. Couple of a long time again we can not see a web site and not using a scrolling ticker. Over a interval its eradicated as a nasty UI/UX apply. However it’s nonetheless broadly utilized in information web sites and particularly in inventory worth show. In the event you use it properly, it supplies good benefits.

The next examples will remind you of the locations that require information tickers on display screen.

1. On-line information bytes show headlines in a ticker.
2. Inventory costs.
3. On-line outlets that present ‘what’s new’ on a ticker board.

This tutorial reveals a easy information ticker on a webpage. On hovering the ticker field, it stops the content material marquee and releases on mouse out.

It is going to appear like a carousal impact however utilized to a component with textual content content material.

View Demo

Information ticker options

1. Extremely light-weight; Simply 2KB.
2. Plain JavaScript. Standalone and never depending on another libraries like JQuery. In fact, if wanted you should utilize it together with JQuery.
3. Totally Responsive.

Utilization

You may combine this information ticker in an internet web page in three easy steps.

1. Embrace the JavaScript library file.
2. Ticker content material as HTML unordered checklist in a div with an id.
3. Name startTicker JavaScript operate instantly subsequent to ticker-box div.

STEP 1: Obtain and embrace the JavaScript library file.

<script src="https://phppot.com/javascript/javascript-news-ticker/news-ticker.js"></script>

STEP 2: Ticker content material as HTML unordered checklist in a div with an id.

<div id="ticker-box">
	<ul>
		<li>First ticker merchandise.</li>
		<li>Second ticker merchandise.</li>
		<li>Last ticker merchandise.</li>
	</ul>
</div>

STEP 3: Name startTicker JavaScript operate instantly subsequent to ticker-box div.

This step is to name the library operate close to the ticker field id attribute.

The startTicker() operate has an non-compulsory parameter to produce the pace and interval between information contents. The default pace is 5 and the default interval is 500 milliseconds.

<script>startTicker('ticker-box');</script>

[OR]

<script>startTicker('ticker-box', {pace:7, delay:1000});</script>

Information ticker JavaScript library code

This library accommodates features to allow a information ticker on an internet web page. The startTicker() operate iterates the ticker <li> parts and let it slides horizontally.

It applies types to vary the place of the ticker aspect primarily based on the pace. The lengthen() operate modifications the default pace and interval with the desired choice.

operate applyStyles(obj, types) {
	var property;
	var styleLength = Object.keys(types).size;
	for (var i = 0; i < styleLength; i++) {
		property = Object.keys(types)[i];
		obj.type[property] = types[property];
	}
}

operate lengthen(object1, object2) {
	for (var attrname in object2) {
		object1[attrname] = object2[attrname];
	}
	return object1;
}

operate startTicker(id, param) {
	var tickerBox = doc.getElementById(id);
	var defaultParam = { pace: 5, delay: 500, rotate: true };
	var extendedParam = lengthen(defaultParam, param);
	applyStyles(tickerBox, { overflow: "hidden", 'min-height': '40px' });
	var ul = tickerBox.getElementsByTagName("ul");
	var li = ul[0].getElementsByTagName("li");
	applyStyles(ul[0], { padding: 0, margin: 0, place: 'relative', 'list-style-type': 'none' });
	for (i = 0; i < li.size; i++) {
		applyStyles(li[i], { place: 'absolute', 'white-space': 'nowrap', show: 'none' });
	}

	var li_index = 0;
	var trans_width = tickerBox.offsetWidth;
	var chunk_width = 1;

	var iterateTickerElement = operate(trans_width) {
		li[li_index].type.left = trans_width + "px";
		li[li_index].type.show = '';
		var t = setInterval(operate() {
			if (parseInt(li[li_index].type.left) > -li[li_index].offsetWidth) {
				li[li_index].type.left = parseInt(li[li_index].type.left) - chunk_width + "px";
			} else {
				clearInterval(t);
				trans_width = tickerBox.offsetWidth;
				li_index++;
				if (li_index == li.size && extendedParam.rotate == true) {
					li_index = 0;
					iterateTickerElement(trans_width);
				} else if (li_index < li.size) {
					setTimeout(operate() { iterateTickerElement(trans_width); }, extendedParam.delay);
				}
			}
		}, extendedParam.pace);
		tickerBox.onmouseover = operate() {
			clearInterval(t);
		}
		tickerBox.onmouseout = operate() {
			iterateTickerElement(parseInt(li[li_index].type.left));
		}
	}
	iterateTickerElement(trans_width);
}

Notice:

1. Presently the information ticker is out there solely in a horizontal route. For the subsequent launch, a vertical route is deliberate.
2. Ticker motion may be paused on mouseover.
3. Contact me, in case you have any characteristic requests or for any particular customization wants.

View DemoObtain

↑ Again to High