Monday, February 6, 2012

caps lock warning in web app

JQuery Bubble Popup for displaying the bubble http://www.vegabit.com/jquery_bubble_popup_v2/

and the following js:

   1:  
   2: function initCaps() {
   3:                $('#password').CreateBubblePopup({
   4:                    innerHtml : w_msg,
   5:                    manageMouseEvents : false,
   6:                    innerHtmlStyle : {
   7:                        color : '#ffffdf',
   8:                        'text-align' : 'center'
   9:                    },
  10:                    position: 'left',
  11:                    alwaysVisible: true,
  12:                    dropShadow: true,
  13:                    themeName : 'all-blue',
  14:                    themePath: '../img/jquerybubblepopup-theme'
  15:  
  16:                });
  17:                $('#password111').CreateBubblePopup({
  18:                    innerHtml : w_msg,
  19:                    manageMouseEvents : false,
  20:                    innerHtmlStyle : {
  21:                        color : '#ffffdf',
  22:                        'text-align' : 'center'
  23:                    },
  24:                    position: 'right',
  25:                    alwaysVisible: true,
  26:                    dropShadow: true,
  27:                    themeName : 'all-blue',
  28:                    themePath: '../img/jquerybubblepopup-theme',
  29:                });
  30:                $('#old_password, #new_password, #confirm_password, #google_password, #imap_password').CreateBubblePopup({
  31:                    innerHtml : w_msg,
  32:                    manageMouseEvents : false,
  33:                    innerHtmlStyle : {
  34:                        color : '#ffffdf',
  35:                        'text-align' : 'center'
  36:                    },
  37:                    position: 'top',
  38:                    alwaysVisible: true,
  39:                    dropShadow: true,
  40:                    themeName : 'all-blue',
  41:                    themePath: '../img/jquerybubblepopup-theme',
  42:                });
  43:              
  44:                $('#google_password, #imap_password').CreateBubblePopup({
  45:                    innerHtml : w_msg,
  46:                    manageMouseEvents : false,
  47:                    innerHtmlStyle : {
  48:                        color : '#ffffdf',
  49:                        'text-align' : 'center'
  50:                    },
  51:                    position: 'right',
  52:                    alwaysVisible: true,
  53:                    dropShadow: true,
  54:                    themeName : 'all-blue',
  55:                    themePath: '../img/jquerybubblepopup-theme',
  56:                });
  57:              
  58:                $(':password').focusout(function(){
  59:                    $(':password').UnfreezeAllBubblePopups();
  60:                    $(':password').HideAllBubblePopups();
  61:                  
  62:                  
  63:                });
  64:                $('.w_close').click(function(){
  65:                    $(':password').UnfreezeAllBubblePopups();
  66:                    $(':password').HideAllBubblePopups();
  67:                });
  68:              
  69:              
  70: }
  71:  
  72: var capslock = {
  73:    init : function() {
  74:        if(!document.getElementsByTagName) {
  75:            return;
  76:        }
  77:        // Find all password fields in the page, and set a keypress event on them
  78:        var inps = document.getElementsByTagName("input");
  79:        for(var i = 0, l = inps.length; i < l; i++) {
  80:            if(inps[i].type == "password") {
  81:                capslock.addEvent(inps[i], "keypress", capslock.keypress);
  82:            }
  83:        }
  84:    },
  85:    addEvent : function(obj, evt, fn) {
  86:        if(document.addEventListener) {
  87:            capslock.addEvent = function(obj, evt, fn) {
  88:                obj.addEventListener(evt, fn, false);
  89:            };
  90:            capslock.addEvent(obj, evt, fn);
  91:        } else if(document.attachEvent) {
  92:            capslock.addEvent = function(obj, evt, fn) {
  93:                obj.attachEvent('on' + evt, fn);
  94:            };
  95:            capslock.addEvent(obj, evt, fn);
  96:        } else {
  97:            // no support for addEventListener *or* attachEvent, so quietly exit
  98:        }
  99:    },
 100:    keypress : function(e) {
 101:        var ev = e ? e : window.event;
 102:        if(!ev) {
 103:            return;
 104:        }
 105:        var targ = ev.target ? ev.target : ev.srcElement;
 106:        // get key pressed
 107:        var which = -1;
 108:        if(ev.which) {
 109:            which = ev.which;
 110:        } else if(ev.keyCode) {
 111:            which = ev.keyCode;
 112:        }
 113:        // get shift status
 114:        var shift_status = false;
 115:        if(ev.shiftKey) {
 116:            shift_status = ev.shiftKey;
 117:        } else if(ev.modifiers) {
 118:            shift_status = !!(ev.modifiers & 4);
 119:        }
 120:        if(((which >= 65 && which <= 90) && !shift_status) || ((which >= 97 && which <= 122) && shift_status)) {
 121:            // uppercase, no shift key
 122:            capslock.show_warning(targ);
 123:        } else {
 124:            capslock.hide_warning(targ);
 125:        }
 126:    },
 127:    show_warning : function(targ) {
 128:        /*
 129:        if(!targ.warning) {
 130:        targ.warning = document.createElement('img');
 131:        targ.warning.src = "http://farm3.static.flickr.com/2145/2067574980_3ddd405905_o_d.png";
 132:        targ.warning.style.position = "absolute";
 133:        targ.warning.style.top = (targ.offsetTop - 73) + "px";
 134:        targ.warning.style.left = (targ.offsetLeft + targ.offsetWidth - 5) + "px";
 135:        targ.warning.style.zIndex = "999";
 136:        targ.warning.setAttribute("alt", "Warning: Caps Lock is on");
 137:        if(targ.warning.runtimeStyle) {
 138:        // PNG transparency for IE
 139:        targ.warning.runtimeStyle.filter += "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://farm3.static.flickr.com/2145/2067574980_3ddd405905_o_d.png',sizingMethod='scale')";
 140:        }
 141:        document.body.appendChild(targ.warning);
 142:        } */
 143:  
 144:        if(! $('#password').IsBubblePopupOpen() && $('#password').is(":focus"))  {
 145:            $('#password').ShowBubblePopup();
 146:            $('#password').FreezeBubblePopup();
 147:        }
 148:      
 149:        if(! $('#password111').IsBubblePopupOpen() && $('#password111').is(":focus")){
 150:            $('#password111').ShowBubblePopup() ;
 151:            $('#password111').FreezeBubblePopup();
 152:        }
 153:  
 154:        if(! $('#old_password').IsBubblePopupOpen() && $('#old_password').is(":focus")){
 155:            $('#old_password').ShowBubblePopup();
 156:            $('#old_password').FreezeBubblePopup();
 157:        }
 158:      
 159:        if(! $('#new_password').IsBubblePopupOpen() && $('#new_password').is(":focus")){
 160:            $('#new_password').ShowBubblePopup();
 161:            $('#new_password').FreezeBubblePopup();
 162:        }
 163:  
 164:        if(! $('#confirm_password').IsBubblePopupOpen() && $('#confirm_password').is(":focus")){
 165:            $('#confirm_password').ShowBubblePopup();
 166:            $('#confirm_password').FreezeBubblePopup();
 167:        }
 168:      
 169:        if(! $('#google_password').IsBubblePopupOpen() && $('#google_password').is(":focus")){
 170:            $('#google_password').ShowBubblePopup();
 171:            $('#google_password').FreezeBubblePopup();
 172:        }
 173:      
 174:        if(! $('#imap_password').IsBubblePopupOpen() && $('#imap_password').is(":focus")){
 175:            $('#imap_password').ShowBubblePopup();
 176:            $('#imap_password').FreezeBubblePopup();
 177:        }
 178:  
 179:        // var alertMessage = "" + 'Caps ON' + "";
 180:        // $("#password").before(alertMessage);
 181:        // $("#capslock").fadeIn("slow");
 182:  
 183:    },
 184:    hide_warning : function(targ) {
 185:        /*
 186:        if(targ.warning) {
 187:        targ.warning.parentNode.removeChild(targ.warning);
 188:        targ.warning = null;
 189:        } */
 190:      
 191:        $(':password').UnfreezeAllBubblePopups();
 192:        $(':password').HideAllBubblePopups();
 193:  
 194:      
 195:        // $("#capslock").remove();
 196:    }
 197: };
 198: (function(i) {
 199:    var u = navigator.userAgent;
 200:    var e =    /*@cc_on!@*/false;
 201:    var st = setTimeout;
 202:    if(/webkit/i.test(u)) {st(function() {
 203:            var dr = document.readyState;
 204:            if(dr == "loaded" || dr == "complete") {i()
 205:            } else {st(arguments.callee, 10);
 206:            }
 207:        }, 10);
 208:    } else if((/mozilla/i.test(u) && !/(compati)/.test(u)) || (/opera/i.test(u))) {
 209:        document.addEventListener("DOMContentLoaded", i, false);
 210:    } else if(e) {(function() {
 211:            var t = document.createElement('doc:rdy');
 212:            try {t.doScroll('left');
 213:                i();
 214:                t = null;
 215:            } catch(e) {st(arguments.callee, 0);
 216:            }
 217:        })();
 218:    } else {
 219:        window.onload = i;
 220:    }
 221: })(capslock.init)

No comments:

Post a Comment