ticker script

script that adds/removes certain elements on page at certain dates in the future

by gion_13

HTML

<h1 class="dec23Old">before 23 dec</h1>
<h1 class="dec23">23 dec</h1>

<h1 class="dec25Old">before 25 dec</h1>
<h1 class="dec25">25 dec</h1>

CSS

html .dec23,
html .dec25,
html.dec23 .dec23Old,
html.dec25 .dec25Old{
    display : none;
}

html.dec23 .dec23,
html.dec25 .dec25{
    display : block;
}

JavaScript

;(function(global, $, undefined){

    var app = {
        now : (new Date()).getTime(),
        dates : [
            {
                date : '12/23/2012',
                addClass : 'dec23',
                removeClass:  'dec23Old'
            },
            {
                date : '12/25/2012',
                addClass : 'dec25',
                removeClass:  'dec25Old'
            }
        ],

        applyDate : function(d){

            $('html')
                .addClass(d.addClass)
                .removeClass(d.removeClass);

            return this;
        },

        applyDates : function(){
            $.each(this.dates, function(i, el){
                setTimeout(function(){
                    app.applyDate(el);
                }, Math.max(0, new Date(el.date).getTime() - app.now));
            });

            return this;
        },


        init : function(){
            this.now = new Date().getTime();
            this.applyDates();            
        }

    };

    $(document).ready(function(){
        app.init();
    });

})(this, jQuery);