Search This Blog

Saturday 17 September 2011

Very simple JQuery News Ticker created within three steps.


In most of the website we can see that latest news and updates are shown on right or left panel. We can implemented vertical newsletter using jquery with three steps only. By using this vertical news ticker we can shown our company’s latest news, ads, announcements, events and updates with more attractive and wonderful animations.
Step by Step process to create vertical newsletter using jquery
1. Go through this link  and save .js files as jquery.js
2. Go through this link  and save .js file as jquery.vticker-min.js.
3. Create a html page and copy paste below codes to html page and save as index.html.
 
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>vTicker</title>
<metaname="description"content=" "/><metaname="keywords"content=" "/>
<styletype="text/css"media="all">body, html
{padding: 0;margin: 0;}
body
{background: #00000;}
#news-container
{width: 200px;margin: auto;margin-top: 30px;
border-bottom: 2pxsolid#333333;border-top: 2pxsolid#333333;}
#news-containerullidiv{
border-bottom: 1pxsolid#aaaaaa;padding: 2px;background: #ffffff;
}
</style><scripttype="text/javascript"src="jquery.js">
</script><scripttype="text/javascript"src="jquery.vticker-min.js">
</script><scripttype="text/javascript">
$(function() {$('#news-container').vTicker({
speed: 900,
pause: 3000,
showItems: 1,
animation:'fade',
mousePause:true,
height: 0,
direction:'down'
});
});
</script>
</head>
<body>
<divid="news-container"><ul><li><div>
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info
</div></li><li><div>
2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info
</div></li><li><div>
3) Lorem ipsum dolor sit amet more info more info more info more info
</div></li><li><div>
4) tuvian.com jquery vticker more info more info more info more info more info
</div></li></ul></div>
</body>
</html>
News ticker is ready..! Please run the index.html page and you can see the nes ticker with content scrolling to down, with some time interval, speed and fade animation. You can also customize your news by adjusting some values in the html page.
speed: 900,
pause: 3000,
showItems: 1,
animation: 'fade',
mousePause: true,
height: 0,
direction: 'down'
Please change the above code portion in the html page and enjoy the changes seen

1 comment:

  1. Your snippet code has several errors, but with some cleaning works perfect.

    ReplyDelete