focused:elements:feedback

by kdrdgn

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<a href="#focus1" id="f1">Focus Item 1</a>
<a href="#focus3" class="hell yea">Focus Item 3</a>
<a href="#focus2" id="f2">Focus Item 2</a>
<a href="#focus4" id="super-item">Focus Item 4</a>
<a href="#focus5" class="btn btn-boss">Focus Item 5</a>

CSS

body{
  padding: 50px;
  background-color: #DDD;
}

JavaScript

$('*').on('focus', function(e){
	if($('#key-demo').length == 0){ $('body').append('<div id="key-demo" style="font-size: 80px;border: 5px solid #333; background-color: #FFDC00;padding: 30px;color: #333; position: fixed;bottom: 30px;right: 30px; font-weight: bold; z-index: 9999;"/>'); }
  $('#key-demo').html( e.target.id || e.target.className ).animate({opacity: 1}, function(){
        $('#key-demo').animate({opacity:.5});
      });
});