├── close.png
├── readme.md
├── sticky.css
└── sticky.js


/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ThrivingKings/Sticky/HEAD/close.png


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | NO LONGER SUPPORTED. USE AT YOUR OWN RISK.
2 | ===
3 | 
4 | A super simple notification system for jQuery
5 | 
6 | http://thrivingkings.com/read/Sticky-A-super-simple-notification-system-built-with-jQuery
7 | 


--------------------------------------------------------------------------------
/sticky.css:
--------------------------------------------------------------------------------
 1 | div.sticky-queue
 2 | 	{ 
 3 | 	position:fixed;
 4 | 	background:#fff;
 5 | 	border:1px solid #999;
 6 | 	box-shadow:0px 0px 5px #bbb;
 7 | 	-moz-box-shadow:0px 0px 5px #bbb;
 8 | 	-webkit-box-shadow:0px 0px 5px #bbb;
 9 | 	width:200px;
10 | 	}
11 | div.sticky-note
12 | 	{ padding-right:20px; }
13 | div.sticky
14 | 	{
15 | 	font-size:12px;
16 | 	color:#555;
17 | 	display:none;
18 | 	padding:10px;
19 | 	position:relative;
20 | 	}
21 | img.sticky-close
22 | 	{
23 | 	position:absolute;
24 | 	top:10px;
25 | 	right:10px;
26 | 	height:14px;
27 | 	width:14px;
28 | 	cursor:pointer;
29 | 	}
30 | 	
31 | 	
32 | .top-right
33 | 	{ right:20px; }
34 | .top-left
35 | 	{ left:20px; }
36 | .top-right, .top-left
37 | 	{
38 | 	top:-2px;
39 | 	border-bottom-right-radius:6px;
40 | 	border-bottom-left-radius:6px;
41 | 	-moz-border-radius-bottomright:6px;
42 | 	-moz-border-radius-bottomleft:6px;
43 | 	-webkit-border-bottom-right-radius:6px;
44 | 	-webkit-border-bottom-left-radius:6px;
45 | 	}
46 | .bottom-right
47 | 	{ right:20px; }
48 | .bottom-left
49 | 	{ left:20px; }
50 | .bottom-right, .bottom-left
51 | 	{
52 | 	bottom:-2px;
53 | 	border-top-right-radius:6px;
54 | 	border-top-left-radius:6px;
55 | 	-moz-border-radius-topright:6px;
56 | 	-moz-border-radius-topleft:6px;
57 | 	-webkit-border-top-right-radius:6px;
58 | 	-webkit-border-top-left-radius:6px;
59 | 	}
60 | 
61 | .border-top-right, .border-top-left
62 | 	{ border-top:1px solid #999; }
63 | .border-bottom-right, .border-bottom-left
64 | 	{ border-bottom:1px solid #999; }


--------------------------------------------------------------------------------
/sticky.js:
--------------------------------------------------------------------------------
 1 | // Sticky v1.0 by Daniel Raftery
 2 | // http://thrivingkings.com/sticky
 3 | //
 4 | // http://twitter.com/ThrivingKings
 5 | 
 6 | (function( $ )
 7 | 	{
 8 | 	
 9 | 	// Using it without an object
10 | 	$.sticky = function(note, options, callback) { return $.fn.sticky(note, options, callback); };
11 | 	
12 | 	$.fn.sticky = function(note, options, callback) 
13 | 		{
14 | 		// Default settings
15 | 		var position = 'top-right'; // top-left, top-right, bottom-left, or bottom-right
16 | 		
17 | 		var settings =
18 | 			{
19 | 			'speed'			:	'fast',	 // animations: fast, slow, or integer
20 | 			'duplicates'	:	true,  // true or false
21 | 			'autoclose'		:	5000  // integer or false
22 | 			};
23 | 		
24 | 		// Passing in the object instead of specifying a note
25 | 		if(!note)
26 | 			{ note = this.html(); }
27 | 		
28 | 		if(options)
29 | 			{ $.extend(settings, options); }
30 | 		
31 | 		// Variables
32 | 		var display = true;
33 | 		var duplicate = 'no';
34 | 		
35 | 		// Somewhat of a unique ID
36 | 		var uniqID = Math.floor(Math.random()*99999);
37 | 		
38 | 		// Handling duplicate notes and IDs
39 | 		$('.sticky-note').each(function()
40 | 			{
41 | 			if($(this).html() == note && $(this).is(':visible'))
42 | 				{ 
43 | 				duplicate = 'yes';
44 | 				if(!settings['duplicates'])
45 | 					{ display = false; }
46 | 				}
47 | 			if($(this).attr('id')==uniqID)
48 | 				{ uniqID = Math.floor(Math.random()*9999999); }
49 | 			});
50 | 		
51 | 		// Make sure the sticky queue exists
52 | 		if(!$('body').find('.sticky-queue').html())
53 | 			{ $('body').append('<div class="sticky-queue ' + position + '"></div>'); }
54 | 		
55 | 		// Can it be displayed?
56 | 		if(display)
57 | 			{
58 | 			// Building and inserting sticky note
59 | 			$('.sticky-queue').prepend('<div class="sticky border-' + position + '" id="' + uniqID + '"></div>');
60 | 			$('#' + uniqID).append('<img src="close.png" class="sticky-close" rel="' + uniqID + '" title="Close" />');
61 | 			$('#' + uniqID).append('<div class="sticky-note" rel="' + uniqID + '">' + note + '</div>');
62 | 			
63 | 			// Smoother animation
64 | 			var height = $('#' + uniqID).height();
65 | 			$('#' + uniqID).css('height', height);
66 | 			
67 | 			$('#' + uniqID).slideDown(settings['speed']);
68 | 			display = true;
69 | 			}
70 | 		
71 | 		// Listeners
72 | 		$('.sticky').ready(function()
73 | 			{
74 | 			// If 'autoclose' is enabled, set a timer to close the sticky
75 | 			if(settings['autoclose'])
76 | 				{ $('#' + uniqID).delay(settings['autoclose']).fadeOut(settings['speed']); }
77 | 			});
78 | 		// Closing a sticky
79 | 		$('.sticky-close').click(function()
80 | 			{ $('#' + $(this).attr('rel')).dequeue().fadeOut(settings['speed']); });
81 | 		
82 | 		
83 | 		// Callback data
84 | 		var response = 
85 | 			{
86 | 			'id'		:	uniqID,
87 | 			'duplicate'	:	duplicate,
88 | 			'displayed'	: 	display,
89 | 			'position'	:	position
90 | 			}
91 | 		
92 | 		// Callback function?
93 | 		if(callback)
94 | 			{ callback(response); }
95 | 		else
96 | 			{ return(response); }
97 | 		
98 | 		}
99 | 	})( jQuery );


--------------------------------------------------------------------------------