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.

This entry was posted on Sunday, July 26th, 2015 at 8:51 pm and is filed under CSS, jQuery, jQuery Plugins, MySQL, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can leave a response, or trackback from your own site.

Dave

Leave a Comment

You must be logged in to post a comment.

Random Ramblings

Looking for a good VPN service?

If you are serious about your online security and safety, you owe it to yourself to be using a trusted VPN. And Torguard is one of the best and most trusted VPN services around. For the best Torguard promo code to save you money, check out domaincouponspro.com