Determine if caps lock is on with MooTools

This is a quick idea I came up with. We extend the Event native like this:

Event.implement({
 
   hasCapsLock: function(){
      return ((this.code > 64 && this.code < 91 && !this.shift) 
           || (this.code > 96 && this.code < 123 && this.shift));
   }
 
});

And then access the method from a keypress event:

$('test').addEvent('keypress', function(event){
   if (event.hasCapsLock()){
      // do something
   }
});

The only drawback is that it relies on sniffing alphabet characters and whether the shift key was pressed. This means that if the user presses the caps lock key, you won’t know it until another character is inserted.

This post has 10 responses

Improve your 404 pages with Google

Google Webmaster Tools has a very interesting widget to improve the usefulness of your 404 pages with little or no effort. It brings something like “Did you mean?” for your URLs, suggests links like pages in a higher hierarchy, and adds a Google Search form.

Google 404 Webmaster Tool

First, include this snippet where you want the suggestions to appear. For Wordpress blogs, this is typically the 404.php file in your themes folder1.

<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'your website url here';
</script>
<script type="text/javascript" 
   src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

Optionally, edit its look and feel by extending this base stylesheet. Tip: you can hide, for example, the search box, by adding display: none to #goog-wm li.search-goog

<style type="text/css">
    /* Widget content container */
   #goog-wm { }
 
    /* Heading for "Closest match" */
   #goog-wm h3.closest-match { }
 
    /* "Closest match" link */
   #goog-wm h3.closest-match a { }
 
    /* Heading for "Other things" */
   #goog-wm h3.other-things { }
 
    /* "Other things" list item */
   #goog-wm ul li { }
 
    /* Site search box */
   #goog-wm li.search-goog { }
 
    /* Search text input */
   #goog-wm-qt {}
 
    /* Search button */
   #goog-wm-sb { }
</style>

Then you’re done! Check mine out (deliberately wrong url) for an example.

  1. The full path would be /wp-content/themes/yourtheme/404.php. Create it if it doesn’t exist [↩]

This post has 7 responses