Slider / 5s - newsTicker

by MrTest

HTML

<div class="action-box">
    <!-- NOTICEBOARD NAV -->
    <a href="#" id="notice-prev">«</a>
    <a href="#" id="notice-next">»</a>
    <!-- /NOTICEBOARD NAV -->
    
    <span class="ge"></span>
    <div class="noticeboard" style="height: 145px;">
        
        <span style="display: block;"><strong>Boy, 14, found stabbed to death</strong><a href="http://www.bbc.co.uk/news/uk-england-14570107">A 14-year-old boy has been found stabbed to death in a park in north London.</a></span><span style="display: block;"><strong>A-level passes rise for 29th year</strong><a href="http://www.bbc.co.uk/news/education-14558490">Hundreds of thousands of teenagers are getting their A-level results amid an intense battle for university places ahead of tuition fee rises.</a></span><span style="display: none;"><strong>UK: Matter of time for Gaddafi</strong><a href="http://www.bbc.co.uk/news/uk-politics-14625484">Deputy Prime Minister Nick Clegg has said it is "only a matter of time" before Col Muammar Gaddafi is defeated.</a></span>                </div>
</div>

CSS

/* NOTICE BOARD */
.noticeboard { position: relative; min-height: 150px;}
.noticeboard span { display: none; position: absolute; top: 0px; left: 0px;}
.noticeboard strong { padding-right: 30px; display: block;}
#notice-next { position: absolute; top: 50px; right: 10px; z-index: 100;}
#notice-prev { position: absolute; top: 50px; right: 30px; z-index: 100;}

JavaScript

/*!  MenuAutoActive
---------------------------------------------*/
(function($) {

    $.fn.NoticeBoard = function() {


        // Set a timeout
        var timeOut = setTimeout(nextNotice, 5000);

        // pause on hover
        $('.noticeboard').hover(

        function() {
            clearTimeout(timeOut);
        }, function() {
            timeOut = setTimeout(nextNotice, 5000);
        });

        // Next notice function called on timeout or click
        //set a flag that use to be an oberver to listen when the fadeIn done
        var flag = true;
        function nextNotice(event) {
            if(!flag){
                return false;
            }
            clearTimeout(timeOut);
            
            flag = false;
            timeOut = setTimeout(nextNotice, 5000);

            if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
                $('.noticeboard span:visible').fadeOut(300);
                $('.noticeboard span:first-child').fadeIn("slow",function(){
                    flag = true;
                });
            }
            else {
                $('.noticeboard span:visible').fadeOut(300).next().fadeIn("slow",function(){
                    flag = true;
                });
            }
            return false;
        }

        $('#notice-next').click(nextNotice);
        $('#notice-prev').click(function(event) {
            
            if(!flag){
                return false;
            }
            clearTimeout(timeOut);
            
            flag = false;
            timeOut = setTimeout(nextNotice, 5000);


            if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
                $('.noticeboard span:visible').fadeOut(300);
                $('.noticeboard span:last-child').fadeIn("slow",function(){
                    flag = true;
                });
            }
            else {
                 $('.noticeboard...