Twitter Alert jQuery Plugin

Posted on July 26th, 2015. Written by Dave.

Here is a jQuery plugin which allows you to easily display Twitter like alert messages within your website.

See it in action here.

Usage

The plugin is extremely easy to use. Firstly you must create a hidden div on your page. like so :

<div id="my_div" style="display:none;"> Here is a message</div>

This div can contain the content of the alert bar or the content can be set in the plugin’s settings if needed.

The next step is to call the plugin which is done by inserting the below code on your page :

<script type="text/javascript">

$(document).ready(function () {

                $('#my_div').twitter_alert();

 });

</script>

This is the simplest usage of the plugin and will use all the default settings and use the div’s original content for the alert.

Settings

The plugin is very customizable.

The style of the alert bar be set using the plugin settings like below :

        $('#my_div').twitter_alert({
                bg_colour: '#FFFFFF',
                border_colour: '#6CF',
                text_colour: '#6CF',
                text_size: '24px',
                text_font: 'Arial, Helvetica, sans-serif',
	        height: '50px'
});

or for more customization you can use css. To do this you must set the override_css option to true like below :

        $('#my_div').twitter_alert({        

	        override_css: true
});

The most important option of the plugin is the message option, this option sets what the alert bars message is going to be and can contain html.

         $('#my_div').twitter_alert({

                        message: '<b>Here</b> is an example with some <i>html</i>'

                                   });

The last option is fadeout_time, this option sets the time in milliseconds which the alert bar will appear for before fading out.

         $('#my_div').twitter_alert({

                        fadeout_time: 1000

                                   });

         $('#my_div').twitter_alert({

                        message: '<b>Here</b> is an example with some <i>html</i>'

                                   });

See it in action here.

Dave