Jquery is not working properly

Question

0.00/5 (No votes)

See more:

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:

XML

<%@ 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>
<%--<link href="Styles/NewsStyle.css" rel="stylesheet" type="text/css" />--%>
<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:

C#

/*
* vertical news ticker
* Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
* http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
*/
(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);

Posted 17-Jul-12 21:30pm

Afzal Shaikh

Add a Solution

2 solutions

Solution 1

Where did you find this code ? Did you write it ? Chrome has a javascript debugger you can use to see if there's any error, or step through your code and see what is happening. If stepping through does not answer your question, it will at least enable you to ask it clearly and with detail.

Posted 17-Jul-12 21:56pm

Christian Graus

Comments

Afzal Shaikh 18-Jul-12 5:19am

I wrote it my self and get .js tricker file from
http://www.jugbit.com/jquery-vticker-vertical-news-ticker/

I didn't find any error in chrome debugger (checked from inspect elements)

Thanks

Christian Graus 18-Jul-12 5:29am

So there's no javascript error thrown, when you set a breakpoint all the code runs as you expect, but it doesn't do what you want ? Are you sure ?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Christian Graus · Accepted Answer · 2012-07-18T00:46:00

OK, I've got it. You used code from the web blindly and didn't pay much attention.

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('.MoveNews').vTicker({
                speed: 500,
                pause: 300,
                showItems: 3,
                animation: 'fade',
                mousePause: true,
                height: 80,
                direction: 'else'
            });
        });
    });

What is the direction value you're passing in ? Is it one of the documented options ? Note, I've never used this library, I just read the site you linked to. The values you can use are 'up' and 'down'. You do set a sensible default, but by changing it, you broke it. If direction was your issue, you should have looked at the lines that set direction and compared them with the documentation.