why news is not moving up??
height and other options are running fine but direction is having problem.someone please check if he/she knows.
Here is the full code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewNews.aspx.cs" Inherits="TestPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html>
<head runat="server">
<title>News Module</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.vticker.js" type="text/javascript"></script>
<%----%>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.MoveNews').vTicker({
speed: 500,
pause: 300,
showItems: 3,
animation: 'fade',
mousePause: true,
height: 80,
direction: 'else'
});
});
});
</script>
<style type="text/css">
#Newsform
{
height: 361px;
}
</style>
</head>
<body>
<form id="Newsform" runat="server">
<div>
<table>
<tr>
</tr>
<tr>
<td>
<asp:Repeater ID="RptNews" runat="server">
<ItemTemplate>
<h2></h2>
<li class="MoveNews"><%# Eval("Title")%><br />
Created Date:<%# Eval("StartDate")%><br /><Br /><%# Eval("Content")%><asp:HyperLink ID="MoreLink" runat="server" Text="More" NavigateUrl='<%# Eval("URL")%>'></asp:HyperLink>
</li>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
here is the .js file:
(function($){
$.fn.vTicker = function(options) {
var defaults = {
speed: 700,
pause: 4000,
showItems: 3,
animation: '',
mousePause: true,
isPaused: false,
direction: 'up',
height: 0
};
var options = $.extend(defaults, options);
moveUp = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:first').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
$(this).children('li:first').remove();
$(this).css('top', '0px');
});
if(options.animation == 'fade')
{
obj.children('li:first').fadeOut(options.speed);
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
}
}
clone.appendTo(obj);
};
moveDown = function(obj2, height, options){
if(options.isPaused)
return;
var obj = obj2.children('ul');
var clone = obj.children('li:last').clone(true);
if(options.height > 0)
{
height = obj.children('li:first').height();
}
obj.css('top', '-' + height + 'px')
.prepend(clone);
obj.animate({top: 0}, options.speed, function() {
$(this).children('li:last').remove();
});
if(options.animation == 'fade')
{
if(options.height == 0)
{
obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
}
obj.children('li:first').hide().fadeIn(options.speed).show();
}
};
return this.each(function() {
var obj = $(this);
var maxHeight = 0;
obj.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: 0, padding: 0});
if(options.height == 0)
{
obj.children('ul').children('li').each(function(){
if($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
obj.children('ul').children('li').each(function(){
$(this).height(maxHeight);
});
obj.height(maxHeight * options.showItems);
}
else
{
obj.height(options.height);
}
var interval = setInterval(function(){
if(options.direction == 'up')
{
moveUp(obj, maxHeight, options);
}
else
{
moveDown(obj, maxHeight, options);
}
}, options.pause);
if(options.mousePause)
{
obj.bind("mouseenter",function(){
options.isPaused = true;
}).bind("mouseleave",function(){
options.isPaused = false;
});
}
});
};
})(jQuery);