News Ticker using JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, I will explain that how to implement New Ticker using JavaScript. This article is same working as like <Marquee> Tag.
Code for HTML Page
Implementation: On the HTML page I will place ul li Tags, inside the div with id named ticker as
well as div with id named ticker-box. he <ul>
tag in HTML stands for "unordered list." It
is used to create a list of items where the order of the items is not
semantically important. By default,
items within an <ul>
list are displayed with bullet points. Inside the li /li tag I write the
content that will show inside the New Ticker using Java Below
I am giving the complete code for this function. You can copy and paste the
whole code on your HTML page to enjoy the execution of this program.
<div id="ticker"><div id="ticker-box"> <ul> <li><a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </li> <li><a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li> <li><a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </li> </ul> </div> <script> startTicker('ticker-box', {speed:25, delay:500});</script> </div>
Implement New Ticker using JavaScript Function
On page load I will called JavaScript Function named start Ticker and I also passing two parameters named with this function ('ticker-box', {speed:25, delay:500}). First parameter id find from the div which I already explained in last paragraph i.e. place inside the <div id="ticker"> and second parameter is {speed:25, delay:500} speed specify that speed of news or ads showing on the screen in the box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>JavaScript News Ticker</title>
<style>
#ticker {
margin-bottom: 5px;
padding-left: 15px;
padding-right: 5px;
font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
line-height: 1.8em;
}
#ticker-box {
background-color: #40C0CB;
color: #FFF;
}
</style>
<script type="text/javascript">
function applyStyles(obj, styles) {
var property;
var styleLength = Object.keys(styles).length;
for (var i = 0; i < styleLength; i++) {
property = Object.keys(styles)[i];
obj.style[property] = styles[property];
}
}
function extend(object1, object2) {
for (var attrname in object2) {
object1[attrname] = object2[attrname];
}
return object1;
}
function startTicker(id, param) {
var tickerBox = document.getElementById(id);
var defaultParam = { speed: 5, delay: 500, rotate: true };
var extendedParam = extend(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, position: 'relative', 'list-style-type': 'none' });
for (i = 0; i < li.length; i++) {
applyStyles(li[i], { position: 'absolute', 'white-space': 'nowrap', display: 'none' });
}
var li_index = 0;
var trans_width = tickerBox.offsetWidth;
var chunk_width = 1;
var iterateTickerElement = function(trans_width) {
li[li_index].style.left = trans_width + "px";
li[li_index].style.display = '';
var t = setInterval(function() {
if (parseInt(li[li_index].style.left) > -li[li_index].offsetWidth) {
li[li_index].style.left = parseInt(li[li_index].style.left) - chunk_width + "px";
} else {
clearInterval(t);
trans_width = tickerBox.offsetWidth;
li_index++;
if (li_index == li.length && extendedParam.rotate == true) {
li_index = 0;
iterateTickerElement(trans_width);
} else if (li_index < li.length) {
setTimeout(function() { iterateTickerElement(trans_width); }, extendedParam.delay);
}
}
}, extendedParam.speed);
tickerBox.onmouseover = function() {
clearInterval(t);
}
tickerBox.onmouseout = function() {
iterateTickerElement(parseInt(li[li_index].style.left));
}
}
iterateTickerElement(trans_width);
}
</script>
</head>
<body>
<div id="ticker">
<div id="ticker-box">
<ul>
<li><a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>
It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</li>
<li>
<a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
<li>
<a href="https://usingaspdotnet.blogspot.com" target="_blank">Visit Using Asp.Net</a>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
</li>
</ul>
</div>
<script>startTicker('ticker-box', {speed:25, delay:500});</script>
</div>
<!-- ticker -->
</body>
</html>
Conclusion: In above code, I have been explained how to implement New Ticker using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Thanks and Regards
Using ASP.Net
Comments
Post a Comment