jquery functions don't work with news ticker

Question

I'm using a news ticker for a news section in a page and I want to use prettyphoto plugin with these news but any of jquery function doesn't work when < li > items change their position.

For example none of jquery functions doesn't work when first item becomes last

Here are the codes

$(document).ready(function(){
    var first = 0;
    var speed = 1000;
    var pause = 3500;

    function removeFirst(){
       first = $('ul#listticker li:first').html();
       $('ul#listticker li:first')
        .animate({opacity: 0}, speed)
        .fadeOut('slow', function() {$(this).remove();});
       addLast(first);
    }

    function addLast(first){
        last = '<li style="display:none">'+first+'</li>';
        $('ul#listticker').append(last)
        $('ul#listticker li:last')
        .animate({opacity: 1}, speed)
        .fadeIn('slow')
    }

    interval = setInterval(removeFirst, pause);

        //Codes above are for the news ticker

    $(".news").click(function(e){
        e.preventDefault(); //I assign news class to links if there is no image for the news on db but it doesn't even work
    });

    $("#newsdiv a[rel^='gallery']").prettyPhoto({
        theme:'light_rounded'
    });
});

And the HTML Result of the php functions

<ul id="listticker">
    <li>
        <img src="http://example.com/m.../k_haber.png"><a href="#" class="news">12.05.2011</a><span class="news-text">Some Title</span>
    </li>
    <li>
        <img src="http://example.com/../some.png"><a href="http://example.com/../news/p_some.jpg" class="news-title" rel="gallery[dd0]"> 12.05.2011</a><span class="news-text">Some Other Title</span>
    </li>
</ul>

Any idea what might be causing this or how to fix it?

EDIT:
I assume the problem occurs because of the jquery html selector.

score 0 · Answer 1 · answered May 12 '11 at 18:35

0

Get your variables and function declarations outside the dom ready event. http://jsfiddle.net/jfahv/

answered May 12 '11 at 18:35

Z. Zlatev

4,757
1
33
37

thanks but it didn't work either, even in jsfiddle, the weird thing is that in the 1st cycle when the second becomes first, first one works but not the second one and after the 2nd cycle none of it works..http://jsfiddle.net/jfahv/6/ (and sorry for my English) – Onur Kucukkece May 12 '11 at 18:52
Could be `console.log()` left there unintentionally. it works for me in both ie7-9 and ff4 – Z. Zlatev May 12 '11 at 18:56

score 0 · Answer 2 · answered May 12 '11 at 18:46

0

jQuery's ":first" selector returns the first-matched element, not the first child element. Try using :first-child instead.

answered May 12 '11 at 18:46

Johanna Ediger

21
1

score 0 · Accepted Answer · answered May 13 '11 at 10:53

I realized Jquery functions shuld be declared within the function which will be used so Finally I found the solution.

Here are the codes

$(document).ready(function(){
    var first = 0;
    var speed = 1000;
    var pause = 3500;

    function removeFirst(){
       first = $('ul#listticker li:first').html();
       $('ul#listticker li:first')
        .animate({opacity: 0}, speed)
        .fadeOut('slow', function() {$(this).remove();});
       addLast(first);
    }

    function addLast(first){
        last = '<li style="display:none">'+first+'</li>';
        $('ul#listticker').append(last)
        $('ul#listticker li:last')
        .animate({opacity: 1}, speed)
        .fadeIn('slow',function(){
            $("a[rel^='gallery']").click(function() {
                $.prettyPhoto.open($(this).attr("href"),"","");
                return false;
            });
        });
        $(".news").click(function(e){
            e.preventDefault(); 
        });
    }

    interval = setInterval(removeFirst, pause);


    $("#newsdiv a[rel^='gallery']").prettyPhoto({
        theme:'light_rounded'
    });
});

jquery functions don't work with news ticker

3 Answers3