Rarely updated, and proud of it!

Introducing jwAnnounce

I was recently asked on Twitter if I was aware of a simple announcement plugin for jQuery – where a little bar is posted at the top of a website informing the user that some important news/update is taking place. I’m sure you’ve seen them plenty of times. With jQuery, we can create a wrapper for this effect easily and quickly.

Learn How to Build the Plugin Yourself

Usage

Simply reference the jwAnnounce.js file, and then call it like so:

$('body').jwAnnounce({
  text : '<p>The text that you want to display within the bar.</p>',
  siteWidth : '960px' // the width of your site,
  className : 'notice' // this class name will be applied to the div that is created. You can then use this to style accordingly.
});

You’ll then see an unstyled bar at the top of your site when you load the page. Assuming a “className” of “notice,” you could then style the bar as you feel fit. You can use this one as a starting point if you’d like:

Sample CSS

	body { margin: 0; font-family: helvetica;}

	.notice {
		background: #dcf3ff;
		border-top: 1px solid #2a8ab7;
		border-bottom: 1px solid #2a8ab7;
	}

	.notice div p {
		font-size: 14px;
		line-height: 28px;
		padding-left: 30px;
	}

	.notice span {
		background: #2a8ab7;
		color: white;
		font-family: helvetica;
		font-size: 15px;
		padding: .3em;
	}

Let me know if you have any questions!