Skip to main content

Tab control usability hover triggers in jQuery

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Tab control usability hover triggers in jQuery. Tested and works in Chrome, FF, IE9, IE8.

Load is jsfiddle for TAB demo to work.
jsfiddle

The tabindex Property

  • The tabindex attribute is supported in all major browsers, except Safari.
  • HTML5 – tabindex attribute can be used on any HTML element
  • jQuery

    $(document).ready(function () {
    
        /* "trigger" hover by adding a CSS class */
        $('.transition-container').on('mouseover', function (e) {
            $(this).find('.transition').addClass('activeHover');
            $(this).on('mouseout', function (e) {
                $(this).find('.transition').removeClass('activeHover');
            });
        });
    
        /* get key code */
        function getKeyCode(key) {
            //return the key code
            return (key == null) ? event.keyCode : key.keyCode;
        }
    
        /* for usabiity capture keyboard tabbing */
        $(document).on('keyup', function (eventObj) {
            //tab keycode = 9
            if (getKeyCode(eventObj) == '9') {
                var $el = $(document.activeElement);
                //remove any current active elements
                $('.transition').removeClass('activeHover');
                if ($el.hasClass('transition-container')) {
                    $el.find('.transition').addClass('activeHover');
                }
            }
        });
    
    });
    
    /* Internet Explorer sniffer code to add class to body tag for IE version */
    var ie = (function () {
    
        var undef,
        v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i');
    
        while (
        div.innerHTML = '',
        all[0]);
    
        if (v > 4) {
            $('body').addClass('ie' + v);
        }
    
    }());

    CSS

    /* transition speed */
     .transition {
        -webkit-transition: -webkit-transform .2s ease-out;
        -moz-transition: -moz-transform .2s ease-out;
        -o-transition: -o-transform .2s ease-out;
        -ms-transition: -ms-transform .2s ease-out;
        transition: transform .2s ease-out;
    }
    /* IE 9 scale */
     .ie9 .activeHover {
        -ms-transform: scale(1.2, 1.2);
    }
    /* IE 8 scale */
     .ie8 .activeHover {
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
    }
    /* modern browsers transition */
     .activeHover {
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -o-transform:scale(1.2);
        transform:scale(1.2);
    }
    /* IE 7 scale */
     .ie7 .activeHover {
        filter: none;
        transform: none;
    }
    .transition-container {
        border: 1px solid blue;
        margin: 15px;
        padding:5px;
    }
    *:active {
        border: 1px solid red;
    }
    }

    HTML5

    
    Click to get focus and start pressing TAB to switch between items. Press SHIFT+TAB to go back up.
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!