Question

I want to make “jQuery UI TAB” blink (like notification).
I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open.

Have tried diffrent options like .effect(..), .tabs(fx: {..}) but nothing seems to work 🙁

Any idea if its possible or not?

Answer 1

Yes it’s definitely possible.

To give me some practice, I’ve written a jQuery blinker plugin for you:

jQuery:

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'blinker';
    var blinkMain = function(data){
        var that = this;
        this.css(data.settings.css_1);
        clearTimeout(data.timeout);
        data.timeout = setTimeout(function(){
            that.css(data.settings.css_0);
        }, data.settings.cycle * data.settings.ratio);
    };
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                        css_0: {
                            color: $this.css('color'),
                            backgroundColor: $this.css('backgroundColor')
                        },
                        css_1: {
                            color: '#000',
                            backgroundColor: '#F90'
                        },
                        cycle: 2000,
                        ratio: 0.5
                    };
                    if(options) { $.extend(true, settings, options); }

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings,
                        interval: null,
                        timeout: null,
                        blinking: false
                    });
                }
            });
        },
        start: function(){
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                if(!data.blinking){
                    blinkMain.call($this, data);
                    data.interval = setInterval(function(){
                        blinkMain.call($this, data);
                    }, data.settings.cycle);
                    data.blinking = true;
                }
            });
        },
        stop: function(){
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                clearInterval(data.interval);
                clearTimeout(data.timeout);
                data.blinking = false;
                this.style = '';
            });
        }
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = function( method ) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );

See it in action here

The plugin and the fiddle are pretty raw in that I haven’t tried to integrate with jQuery-ui-tabs. This may be easy or hard, I don’t know, but providing each tab is addressable by class or id then it shouldn’t be too difficult.

Something you may need to consider is stopping a blinking tab when it is clicked. For this you may wish to call the .blinker('stop') method directly (with a .on('click') handler) or from an appropriate jQuery-ui-tabs callback.

API

The plugin is properly written in jQuery’s preferred pattern. It puts just one member in the jQuery.fn namespace and .blinker(...) will chain like standard jQuery methods.

Methods :

• .blinker(‘init’ [,options]) : Initialises selected element(s) with blinker behaviour. Called automatically with .blinker(options), or just .blinker() in its simplest form.
• .blinker(‘start’) : causes selected element(s) to start blinking between two styles as determined by plugin defaults and/or options.
• .blinker(‘stop’) : causes selected element(s) to stop blinking and return to their natural CSS style(s).

Options : a map of properties, which determine blinker styles and timing:

• css_0 : (optional) a map of css properties representing the blink OFF-state.
• css_1 : a map of CSS properties representing the blink ON-state.
• cycle : the blink cycle time in milliseconds (default 2000).
• ratio : ON time as a proportion of cycle time (default 0.5).

By omitting css_0 from the options map, the OFF state is determined by the element(s)’ natural CSS styling defined elsewhere (typically in a stylesheet).

Default values are hard-coded for css_1.color, css_1.backgroundColor, cycle time and ratio. Changing the default settings programmatically is not handled, so for different default styling the plugin will need to be edited.