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!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.