Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery News Ticker | jQuery WebTicker Horizontal Plugin Example

Mar 5, 2013
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.
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.

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






For live demo and other details check this site JQUERY NEWS TICKER

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 RSS subscribe by email Subscribe by Email

3 comments :

Unknown said...

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.

Anonymous said...

how can we do this dynamically by fetch the news content from database

Unknown said...

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

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.