Introduction:
jQuery News Ticker or jQuery WebTicker is a lightweight, stylish, easy to use and flexible. By using jQuery news ticker horizontal we can display news, notifications, recent post or other details. jQuery News Ticker or jQuery WebTicker brings a lightweight and easy to use news ticker to jQuery.
jQuery News Ticker or jQuery WebTicker is a lightweight, stylish, easy to use and flexible. By using jQuery news ticker horizontal we can display news, notifications, recent post or other details. jQuery News Ticker or jQuery WebTicker brings a lightweight and easy to use news ticker to jQuery.
Description:
In previous posts I explained jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, jQuery upload multiple files in asp.net, jQuery Redirect to another page after some time delay and many articles relating to JQuery, asp.net. Now I will explain how to use jQuery News Ticker to display news like bbc news website tickertas shown in other websites.
In previous posts I explained jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, jQuery upload multiple files in asp.net, jQuery Redirect to another page after some time delay and many articles relating to JQuery, asp.net. Now I will explain how to use jQuery News Ticker to display news like bbc news website tickertas shown in other websites.
Here we will use JQUERY NEWS TICKER
Plugin to implement news ticker effect for text for that we need to write the
code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery News Ticker</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script src="jquery.ticker.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#js-news').ticker();
});
</script>
</head>
<body>
<h2>jQuery News Ticker</h2>
<ul id="js-news"
class="js-hidden">
<li class="news-item">Welcome to
Aspdotnet-Suresh.com Site!</li>
<li class="news-item">Aspdotnet-Suresh.com will
offer many articles relating to technology!</li>
<li class="news-item">Recently
Aspdotnet-Suresh.com trying to cover all the jQuery related articles!</li>
<li class="news-item">Aspdotnet-Suresh.com has
reached 7 lac + pagviews per month!</li>
<li class="news-item">New updates have been
made to jQuery News Ticker! Check below for more details!</li>
<li class="news-item">Further updates please
follow Aspdotnet-Suresh.com!</li>
</ul>
</body>
</html>
|
If you observe above code in
header section I added “jquery.ticker.js” by using this plugin we can implement new sticker effects for required elements
you can get those files by downloading attached sample or you can get it from
this site JQUERY NEWS TICKER
Demo
 |
Download Sample Attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
thank you very very very much sir
sir i need tutorials on LINQ (linqdatasource , objectdatasource and entity datasource) so please post some tutorials on it.
how can we do this dynamically by fetch the news content from database
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'ticker'
getting this error when i am trying it in asp web form with IE 10
Note: Only a member of this blog may post a comment.