Permalink
Browse files

callbacks added

  • Loading branch information...
0 parents commit 30160eee599a0ca2d115e51454635f2618df6999 @jboesch committed Oct 20, 2009
@@ -0,0 +1,13 @@
+Changes in 1.4 (October 20, 2009)
+======================
+* Added callbacks (before_open, before_close, after_open, after_close) to the gritter notifications
+* Added callbacks (before_close, after_close) to the removeAll() function
+* Using 1 image for the CSS instead of 5 (Thanks to Ozum Eldogan)
+
+Changes in 1.3 (August 1, 2009)
+======================
+* Fixed IE6 positioning bug
+
+Changes in 1.2 (July 13, 2009)
+======================
+* Fixed hover bug (pointed out by Beel & tXptr on the comments)
@@ -0,0 +1,92 @@
+/* ie6 trash */
+* html #gritter-notice-wrapper {
+ position:absolute;
+}
+* html .gritter-top {
+ margin-bottom:-10px;
+}
+* html .gritter-item {
+ padding-bottom:0;
+}
+* html .gritter-bottom {
+ margin-bottom:0;
+}
+* html .gritter-close {
+ background:url(../images/gritter-close-ie6.gif);
+ width:22px;
+ height:22px;
+ top:7px;
+ left:7px;
+}
+
+/* the norm */
+#gritter-notice-wrapper {
+ position:fixed;
+ top:20px;
+ right:20px;
+ width:301px;
+ z-index:9999;
+}
+.gritter-item-wrapper {
+ position:relative;
+ margin:0 0 10px 0;
+}
+.gritter-top {
+ background:url(../images/gritter.png) no-repeat left -30px;
+ height:10px;
+}
+.hover .gritter-top {
+ background-position:right -30px;
+}
+.gritter-bottom {
+ background:url(../images/gritter.png) no-repeat left bottom;
+ height:8px;
+ margin:0;
+}
+.hover .gritter-bottom {
+ background-position: bottom right;
+}
+.gritter-item {
+ display:block;
+ background:url(../images/gritter.png) no-repeat left -40px;
+ color:#eee;
+ padding:2px 11px 8px 11px;
+ font-size: 11px;
+ font-family:verdana;
+}
+.hover .gritter-item {
+ background-position:right -40px;
+}
+.gritter-item p {
+ padding:0;
+ margin:0;
+}
+.gritter-close {
+ position:absolute;
+ top:5px;
+ left:3px;
+ background:url(../images/gritter.png) no-repeat left top;
+ cursor:pointer;
+ width:30px;
+ height:30px;
+}
+.gritter-title {
+ font-size:14px;
+ font-weight:bold;
+ padding:0 0 7px 0;
+ display:block;
+ text-shadow:1px 1px #000; /* Not supported by IE :( */
+}
+.gritter-image {
+ width:48px;
+ height:48px;
+ float:left;
+}
+.gritter-with-image,
+.gritter-without-image {
+ padding:0 0 5px 0;
+}
+.gritter-with-image {
+ width:220px;
+ float:right;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,205 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gritter demo for jQuery - boedesign.com</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" />
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript">google.load('jquery', '1.3.2');</script>
+<script type="text/javascript" src="js/jquery.gritter.js"></script>
+<script type="text/javascript">
+
+ $(document).ready(function(){
+
+ $('#add-sticky').click(function(){
+
+ // You can have it return a unique id, this can be used to manually remove it later using
+ /*
+ $.gritter.remove(unique_id, {
+ fade: true,
+ speed: 'fast'
+ }
+ );
+ */
+ var unique_id = $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: 'This is a sticky notice!',
+ // (string | mandatory) the text inside the notification
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+ // (string | optional) the image to display on the left
+ image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
+ // (bool | optional) if you want it to fade out on its own or just sit there
+ sticky: true,
+ // (int | optional) the time you want it to be alive for before fading out
+ time: ''
+ });
+
+ return false;
+
+ });
+
+ $('#add-regular').click(function(){
+
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: 'This is a regular notice!',
+ // (string | mandatory) the text inside the notification
+ text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+ // (string | optional) the image to display on the left
+ image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
+ // (bool | optional) if you want it to fade out on its own or just sit there
+ sticky: false,
+ // (int | optional) the time you want it to be alive for before fading out
+ time: ''
+ });
+
+ return false;
+
+ });
+
+ $('#add-without-image').click(function(){
+
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: 'This is a notice without an image!',
+ // (string | mandatory) the text inside the notification
+ text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
+ });
+
+ return false;
+ });
+
+ $('#add-with-callbacks').click(function(){
+
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: 'This is a notice with callbacks!',
+ // (string | mandatory) the text inside the notification
+ text: 'The callback is...',
+ // (function | optional) function called before it opens
+ before_open: function(){
+ alert('I am called before it opens');
+ },
+ // (function | optional) function called after it opens
+ after_open: function(e){
+ alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
+ },
+ // (function | optional) function called before it closes
+ before_close: function(e){
+ alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
+ },
+ // (function | optional) function called after it closes
+ after_close: function(){
+ alert('I am called after it closes');
+ }
+ });
+
+ return false;
+ });
+
+ $('#add-sticky-with-callbacks').click(function(){
+
+ $.gritter.add({
+ // (string | mandatory) the heading of the notification
+ title: 'This is a sticky notice with callbacks!',
+ // (string | mandatory) the text inside the notification
+ text: 'Sticky sticky notice.. sticky sticky notice...',
+ // Stickeh!
+ sticky: true,
+ // (function | optional) function called before it opens
+ before_open: function(){
+ alert('I am a sticky called before it opens');
+ },
+ // (function | optional) function called after it opens
+ after_open: function(e){
+ alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
+ },
+ // (function | optional) function called before it closes
+ before_close: function(e){
+ alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
+ },
+ // (function | optional) function called after it closes
+ after_close: function(){
+ alert('I am a sticky called after it closes');
+ }
+ });
+
+ return false;
+
+ });
+
+ $("#remove-all").click(function(){
+
+ $.gritter.removeAll();
+ return false;
+
+ });
+
+ $("#remove-all-with-callbacks").click(function(){
+
+ $.gritter.removeAll({
+ before_close: function(e){
+ alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n" + e);
+ },
+ after_close: function(){
+ alert('I am called after everything has been closed.');
+ }
+ });
+ return false;
+
+ });
+
+
+ });
+</script>
+<style type="text/css">
+ body {
+ background:#222 url(images/trees.jpg);
+ color:#fff;
+ }
+ a {
+ color:#00ff00;
+ }
+ #container {
+ width:600px;
+ background:#333;
+ padding:10px;
+ }
+</style>
+</head>
+
+
+<body>
+<div id="container">
+ <h1>Gritter Demo</h1>
+ <p>
+ The super awesome background is just to show you that all notifications are transparent!
+ <em>Note: this doesn't look NEARLY as good in IE6 (still works fine). It's part of me making a stand against the worlds worst browser. All other browsers (FF 3, FF 3.5, Opera 9, IE7, IE8, Safari 4) have been tested and proven worthy.</em>
+ </p>
+ <ul>
+ <li>
+ <a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.
+ </li>
+ <li>
+ <a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer. Just sits there until the user manually removes it by clicking on the (X)
+ </li>
+ <li>
+ <a href="#" id="add-without-image">Add notification without image</a>
+ </li>
+ <li>
+ <a href="#" id="add-with-callbacks">Add notification (with callbacks)</a>
+ </li>
+ <li>
+ <a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
+ </li>
+ <li>
+ <a href="#" id="remove-all">Remove all notifications</a>
+ </li>
+ <li>
+ <a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
+ </li>
+ </ul>
+</div>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 30160ee

Please sign in to comment.