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>



<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...

CSS

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

JavaScript

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

    /*!  Scroller
    ---------------------------------------------*/    
    $.fn.Scroller = function() {
        
        //Set height
        
        $('.scroller').each( function() {
            var height = 0;
            $(this).children('div').each(function() {
                
                if ( height < $(this).height() ) {  
                     height = $(this).height();
                }
                
            });
             $(this).css("height", height + "px");
            
        });
        
        $('.scroller').each( function() { 
        
                var NextArrow = $(this).parent().find('.next');
                var PrevArrow = $(this).parent().find('.prev');
                
                var CurrentScrollerDiv = $(this);
                
                // Set a timeout
                var timeOut = setTimeout(nextNotice, 5000);

                   // pause on hover
                $(this).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 ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + '  div:last-child')) {
                        $(CurrentScrollerDiv + ' div:visible').fadeOut(300);
                        $(CurrentScrollerDiv  + ' div:first-child').fadeIn("slow",function(){
                            flag =...