Skip to content

Instantly share code, notes, and snippets.

@manigandanta

manigandanta/jquery.vticker-min.js

Created April 17, 2012 06:59
Show Gist options
  • Save manigandanta/2404084 to your computer and use it in GitHub Desktop.
Save manigandanta/2404084 to your computer and use it in GitHub Desktop.
Download ZIP
text scroller
Raw
jquery.vticker-min.js
/*
* vertical news ticker
* Tadas Juozapaitis ( [email protected] )
* http://plugins.jquery.com/project/vTicker
*/
(function(a){a.fn.vTicker=function(b){var c={speed:700,pause:4000,showItems:3,animation:"",mousePause:true,isPaused:false,direction:"up",height:0};var b=a.extend(c,b);moveUp=function(g,d,e){if(e.isPaused){return}var f=g.children("ul");var h=f.children("li:first").clone(true);if(e.height>0){d=f.children("li:first").height()}f.animate({top:"-="+d+"px"},e.speed,function(){a(this).children("li:first").remove();a(this).css("top","0px")});if(e.animation=="fade"){f.children("li:first").fadeOut(e.speed);if(e.height==0){f.children("li:eq("+e.showItems+")").hide().fadeIn(e.speed)}}h.appendTo(f)};moveDown=function(g,d,e){if(e.isPaused){return}var f=g.children("ul");var h=f.children("li:last").clone(true);if(e.height>0){d=f.children("li:first").height()}f.css("top","-"+d+"px").prepend(h);f.animate({top:0},e.speed,function(){a(this).children("li:last").remove()});if(e.animation=="fade"){if(e.height==0){f.children("li:eq("+e.showItems+")").fadeOut(e.speed)}f.children("li:first").hide().fadeIn(e.speed)}};return this.each(function(){var f=a(this);var e=0;f.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:0,padding:0});if(b.height==0){f.children("ul").children("li").each(function(){if(a(this).height()>e){e=a(this).height()}});f.children("ul").children("li").each(function(){a(this).height(e)});f.height(e*b.showItems)}else{f.height(b.height)}var d=setInterval(function(){if(b.direction=="up"){moveUp(f,e,b)}else{moveDown(f,e,b)}},b.pause);if(b.mousePause){f.bind("mouseenter",function(){b.isPaused=true}).bind("mouseleave",function(){b.isPaused=false})}})}})(jQuery);
Raw
textscroller.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vTicker</title>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<style type="text/css" media="all">
body,html
{
padding: 0;
margin: 0;
}
body
{
background: #cccccc;
}
#news-container
{
width: 400px;
margin: auto;
margin-top: 30px;
border: 5px solid #333333;
}
#news-container ul li div
{
border: 1px solid #aaaaaa;
background: #ffffff;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
});
</script>
</head>
<body>
<div id="news-container">
<ul>
<li>
<div>
1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. 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) jugbit.com jquery vticker more info more info more info more info more info
</div>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment