Skip to content
Browse files

first, very alpha version.

  • Loading branch information...
1 parent 56b2d76 commit 128352c46b539749ce3ef13ffb411c8b4885c3da @andykent committed Feb 23, 2008
Showing with 143 additions and 0 deletions.
  1. +73 −0 README
  2. +23 −0 jquery.humanize.css
  3. +47 −0 jquery.humanize.js
View
73 README
@@ -0,0 +1,73 @@
+jQuery Humanize Plugin - By Andy Kent
+======================================================
+
+This plugin is a great way of showing user feedback
+without distracting flow. It shows a semi-transparent
+overlay on top of the current page which fades away
+as soon as the user interacts with the browser in
+any way.
+
+
+Usage
+------------------------------------------------------
+
+You will need to include both the JS and CSS files
+first, feel free to customize the CSS as you feel
+fit.
+
+The first example will search for an element with a
+class of 'feedback' and then display it's contents
+to the user immediately, it's great for showing
+rails flash messages and the like.
+
+$(document).ready(function(){
+ $.humanize();
+});
+
+The second example shows the provided message to the
+user as soon as it is called. This is great for use
+in AJAX callbacks and validation checks.
+
+$.humanize('hello this is a message');
+
+
+Options
+------------------------------------------------------
+
+$.humanize([msg:String],options:Object);
+
+The defaults should be fine for most people but the
+plugin does take several options if you want to
+customize things. Options can be passed in as the
+last parameter to $.humanize(); or set globally
+via $.humanize.defaults
+
+baseSelector ('.feedback)
+The jQuery selector to be used to find and display
+the message.
+
+container ('<p class="feedback">&nbsp;</p>')
+The html to use so a container can be added if none
+exists.
+
+fadeIn ({easing:'swing', duration:1000})
+Options to be passed to the jQuery animate function
+when fading the message in.
+
+fadeOut ({easing:'swing', duration:1000})
+Options to be passed to the jQuery animate function
+when fading the message out.
+
+opacity : 0.8
+value between 0 and 1 for the final message opacity.
+
+
+Credits
+------------------------------------------------------
+
+Created by: Andy Kent
+Contributors: YOUR NAME HERE ?
+
+I'd love to hear about any bugs/improvements/patches
+that you may have and will always credit people where
+appropriate. Thanks.
View
23 jquery.humanize.css
@@ -0,0 +1,23 @@
+.feedback {
+ display: block;
+ position: fixed;
+ top: 100px;
+ left: 25%;
+ width: 43%;
+ z-index: 100000;
+ padding: .75em;
+ font-size: 28px;
+ color: #fff;
+ background: #000;
+ text-align: center;
+ text-shadow: #333 -1px -1px 1px;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ border: 2px solid #000;
+}
+.positive {
+ border: 2px solid #00ff00;
+}
+.negative {
+ border: 2px solid #ff0000;
+}
View
47 jquery.humanize.js
@@ -0,0 +1,47 @@
+/* Copyright (c) 2008 Andy Kent (andrew.d.kent@gmail.com)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ *
+ * Requires: jQuery 1.2+
+ *
+ ****** CURRENTLY ONLY TESTED IN FF and Safari 3 *******
+ */
+
+(function($) {
+ $.humanize = function(msg,options){
+ if(typeof(msg)=='string') {
+ var o = $.extend($.humanize.defaults, options||{});
+ if($(o.baseSelector).length==0) $('body').append(o.container);
+ $(o.baseSelector).html(msg);
+ } else {
+ var o = $.extend($.humanize.defaults, msg||{});
+ };
+ $(o.baseSelector).css('opacity',0)
+ .animate({opacity:o.opacity},o.fadeIn);
+ $(window).mousemove($.humanize.remove).click($.humanize.remove).keypress($.humanize.remove)
+ };
+ $.humanize.defaults = {
+ baseSelector : '.feedback',
+ container : '<p class="feedback">&nbsp;</p>',
+ fadeIn : {easing:'swing', duration:1000},
+ fadeOut : {easing:'swing', duration:1000},
+ opacity : 0.8
+ };
+ $.humanize.mouseCatch = true; // a horrid hack for Safari because it triggers a mousemove event on refresh.
+ $.humanize.remove = function(e) {
+ if(e.type=='mousemove' && $.humanize.mouseCatch) {
+ $.humanize.mouseCatch=false;
+ return
+ } else {
+ $.humanize.mouseCatch=true;
+ }
+ var o = $.humanize.defaults;
+ $(o.baseSelector)
+ .animate({opacity:0},o.fadeOut);
+ $(window)
+ .unbind('mousemove',$.humanize.remove)
+ .unbind('click',$.humanize.remove)
+ .unbind('keypress',$.humanize.remove)
+ };
+})(jQuery);

0 comments on commit 128352c

Please sign in to comment.
Something went wrong with that request. Please try again.