Posted by & filed under Code.

I have created a jQuery plugin  that will allow you to easily add HTML5 notifications to your site.

What this plugin does is allow you to create a notification.

The notification API is still very limited so at the moment there are two types normal and HTML. HTML allows you to show a website (basically its like an iframe) but normal allows you to have an icon, title and body, like the image above. If you want to style it then you need to use HTML as you can’t actually style the notification currently and I hope that they soon will allow you to at least make it so that you can change the way it looks a bit.

The top bar shows your Domain or URL, This too can’t be altered from what I have seen. So to be honest these can’t really do much over than they can appear out of the window.

So to the plugin. I have added all the options that I could think off and there really is not a lot.

  • icon – This is the icon that appears in normal on the left. (normal)
  • title – This is the title that gets made bold. (normal)
  • body – This is the content that you can add, some browsers may strip tags I haven’t fully tested this out as of yet. (normal)
  • timeout – This how long you want the notification to be on show. (both) (default 5000)
  • sticky – If this is set to true then it will ignore timeout and will keep the notification on until user closes it. (both)
  • id – This is used to identify the notification that is being shown. (both)
  • type – This is so that you can define which notification you want. (both) (default normal, [normal, html])
  • url – This is where you put your address for the HTML notification. (html)
  • dir – This is for the direction of the text shown in the notification. (both)

Those are the options but I have added four events with them that you can use:

  • onClick
  • onShow
  • onClose
  • onError

As you can see there is not a lot.

Example:

<!DOCTYPE html>
<html>
<head>
	<title>Desktop Notification Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.desknoty.js"></script>
	<script type="text/javascript">
	$(function() {
		$('button#noti').click(function(){
			$.desknoty({
				icon: "http://www.google.com/landing/chrome/ugc/chrome-icon.jpg",
				title: "My notification",
				body: "Woot this is awesome"

			});
		});
		$('button#noti-html').click(function(){
			$.desknoty({
				type: "html",
				url: "http://www.google.co.uk/",
				sticky: true
			});
		});
	});
	</script>
</head>
<body>
<button id="noti">Call notification</button>
<button id="noti-html">Call notification (HTML)</button>
</body>
</html>

When calling the plugin it has to be in an event like click otherwise the API won’t actually do anything.

Demo

Download Link

One Response to “jQuery Plugin – HTML5 Notification”

Leave a Reply

  • (will not be published)