Ambiance Plugin for jQuery 1.7.2+ (Notification System)

The following demonstration page will hopefully show you all the available features of Ambiance.

Basic Overview

Ambiance allows you to create notifications on the fly by just calling the function and providing some information. The following parameters exist:

Parameter	Value Type	Default Value	Description
`message`	JS Object	`""`	This you should pass in! You can pass it any type of object, the function allows JavaScript objects or HTML code.
`title`	String	`""`	This is the title of the notification. It is styled as being bold and will be the first line of the notification. If you leave this out, no title will show up.
`type`	String	`"default"`	This is the type of notification. The plugin provides 3 base types: `"default"`, `"success"`, and `"error"` which you can pass in. You can also create your own types as well and extend it to style how you'd like. Just define in your CSS a class `"ambiance-name"` where name is the name of the type you want to create. For example if we want to create an `"info"` type we would create a class `"ambiance-info"` and in the JavaScript we can specify the type as `"info"` and the styling will apply.
`permanent`	Boolean	`false`	This boolean determines whether the notification can be closed or not. Permanent notifications will remain on the page as long as the user is on the page. Non-permanent notifications will have a close button for the user to remove it.
`timeout`	Integer	`2`	This is the number of seconds for the notification to be displayed before either the fade out takes place or it disappears. Use the value of `0` to indicate that the notification should persist, this allows you to create non-permanent notifications that require the user to close it.
`fade`	Boolean	`true`	This determines whether or not the item will fade out of view or not. If the `permanent` parameter is `true` then this will not take effect.
`width`	Integer	`300`	This is the width of the notification box. You can customize this on the fly or with custom CSS, either way is fine; however, if you do not specify it then the default will override to be `300`.
`link`	String	`""`	Add a link to the bottom of the notification, this should be the URL that you want to link to.
`linkName`	String	`"Link"`	Add a name for the link specified in `link`. This is the text the user sees.
`linkBlank`	Boolean	`false`	Whether the link should have a `target="_blank"` to pop up in a new window.
`linkColor`	String	`""`	The style color for the link, this will be added through `style="color: {linkColor}"` for the link.
`extraClass`	String	`null`	Any extra classes you want to add to the notification.

Demonstration Overview

Each demonstration will provide the code and a button to allow you to see the notification system in action. The following is how all the notifications are triggered (All placed when the document is ready):

$('#demo1').click(function () {
  $.ambiance({message: "This is a test notification."});
});

Demo 1

Basic usage with default settings and no title.

$.ambiance({message: "This is a test notification."});

Demo 2

Defining title and message for success.

$.ambiance({message: "We just sent a notification!",
            title: "Success!",
            type: "success"});

Demo 3

Non-fading notification that is an error without title.

$.ambiance({message: "Uh oh the fading is gone!",
            type: "error",
            fade: false});

Demo 4

Long timeout with fading and a long width.

$.ambiance({message: "Oh man this is a really long notification!",
            width: 1000,
            timeout: 10});

Demo 5

JS Object for the message and permanent. Note: Refresh to remove it.

var button = $(window.document.createElement('button'))
              .addClass("btn btn-primary")
              .html("BUTTON IN NOTIFICATION!");
$.ambiance({message: button,
            permanent: true});

Demo 6

Permanent but fading and timeout is actually just permanent. Again fade and timeout mean nothing if the notification is permanent!

$.ambiance({message: "This is permanent! Seriously!",
            permanent: true,
            fade: true,
            timeout: 1});

Demo 7

Timeout set to 0, not permanent and fading! (Fading doesn't matter if timeout is 0!)

$.ambiance({message: "You have to close this to remove it. Haha!",
            fade: true,
            timeout: 0});

Demo 8

Custom CSS Type

CSS:

.ambiance-custom {
  background: #000000;
  color: #00FF00;
  padding: 10px;
  margin-right: 100px;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript:

$.ambiance({message: "Custom styling, you have to define everything!",
            type: "custom",
            timeout: 0});

Demo 9

Add a link to the notification to be clicked.

$.ambiance({message: "Hello, this is a message",
            type: "error",
            fade: false,
            timeout: 10,
            link: "https://www.google.com",
            linkName: "Go to Google",
            linkBlank: true,
            linkColor: "white"});

Download Links

Because I want the repository to be consistent, I don't want to have multiple locations of the JavaScript and CSS files so they are included in the assets folder but here are the links for easy access! You can right click on the file and save the file.

jquery.ambiance.js jquery.ambiance.css

Thank You and Final Words

Thank you for trying out my first jQuery plugin! I know there may be similar ones out there but I thought since I'm just starting with jQuery that I'd try something simple that I was already trying to have in an application I was trying out! Have fun using it and please feel free to let me know your thoughts! I'd love to hear feedback, comments, suggestions, or anything about the plugin! Feedback on my coding is appreciated as well!

Ambiance Plugin Page on GitHub My GitHub Page